Build a custom flow for resetting a user's password

'use client'

import React, { useEffect, useState } from 'react'
import { useAuth, useSignIn } from '@clerk/nextjs'
import { useRouter } from 'next/navigation'

export default function Page() {
  const { isSignedIn } = useAuth()
  const { isLoaded, signIn, setActive } = useSignIn()
  const router = useRouter()

  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [code, setCode] = useState('')
  const [successfulCreation, setSuccessfulCreation] = useState(false)
  const [secondFactor, setSecondFactor] = useState(false)
  const [error, setError] = useState('')

  // Redirect signed-in users to home
  useEffect(() => {
    if (isSignedIn) router.push('/')
  }, [isSignedIn, router])

  if (!isLoaded) return <p>Loading...</p>

  // Send the password reset code to the user's email
  async function create(e: React.FormEvent) {
    e.preventDefault()
    await signIn
      ?.create({
        strategy: 'reset_password_email_code',
        identifier: email,
      })
      .then((_) => {
        setSuccessfulCreation(true)
        setError('')
      })
      .catch((err) => {
        console.error('error', err.errors[0].longMessage)
        setError(err.errors[0].longMessage)
      })
  }

  // Reset the user's password.
  // Upon successful reset, the user will be
  // signed in and redirected to the home page
  async function reset(e: React.FormEvent) {
    e.preventDefault()
    await signIn
      ?.attemptFirstFactor({
        strategy: 'reset_password_email_code',
        code,
        password,
      })
      .then((result) => {
        // Check if 2FA is required
        if (result.status === 'needs_second_factor') {
          setSecondFactor(true)
          setError('')
        } else if (result.status === 'complete') {
          // Set the active session to
          // the newly created session (user is now signed in)
          setActive({
            session: result.createdSessionId,
            navigate: async ({ session }) => {
              if (session?.currentTask) {
                // Handle pending session tasks
                // See https://clerk.com/docs/guides/development/custom-flows/authentication/session-tasks
                console.log(session?.currentTask)
                return
              }

              router.push('/')
            },
          })
          setError('')
        } else {
          console.log(result)
        }
      })
      .catch((err) => {
        console.error('error', err.errors[0].longMessage)
        setError(err.errors[0].longMessage)
      })
  }

  return (
    <div>
      <h1>Forgot Password?</h1>
      <form onSubmit={!successfulCreation ? create : reset}>
        {!successfulCreation && (
          <>
            <label htmlFor="email">Provide your email address</label>
            <input
              type="email"
              placeholder="e.g john@doe.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />

            <button>Send password reset code</button>
            {error && <p>{error}</p>}
          </>
        )}

        {successfulCreation && (
          <>
            <label htmlFor="password">Enter your new password</label>
            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />

            <label htmlFor="code">Enter the password reset code that was sent to your email</label>
            <input type="text" value={code} onChange={(e) => setCode(e.target.value)} />

            <button>Reset</button>
            {error && <p>{error}</p>}
          </>
        )}

        {secondFactor && <p>2FA is required, but this UI does not handle that</p>}
      </form>
    </div>
  )
}

import { ThemedText } from '@/components/themed-text'
import { ThemedView } from '@/components/themed-view'
import { useSignIn, useUser } from '@clerk/clerk-expo'
import { Redirect, useRouter } from 'expo-router'
import React, { useState } from 'react'
import { Pressable, StyleSheet, TextInput, View } from 'react-native'

export default function Page() {
  const { isSignedIn } = useUser()
  const { isLoaded, signIn, setActive } = useSignIn()
  const router = useRouter()

  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [code, setCode] = useState('')
  const [successfulCreation, setSuccessfulCreation] = useState(false)
  const [secondFactor, setSecondFactor] = useState(false)
  const [error, setError] = useState('')

  // Redirect signed-in users to home
  if (isSignedIn) {
    return <Redirect href="/" />
  }

  if (!isLoaded) {
    return (
      <ThemedView style={styles.container}>
        <ThemedText>Loading...</ThemedText>
      </ThemedView>
    )
  }

  // Send the password reset code to the user's email
  async function create() {
    try {
      await signIn?.create({
        strategy: 'reset_password_email_code',
        identifier: email,
      })
      setSuccessfulCreation(true)
      setError('')
    } catch (err: any) {
      console.error('error', err.errors?.[0]?.longMessage)
      setError(err.errors?.[0]?.longMessage || 'An error occurred')
    }
  }

  // Reset the user's password.
  // Upon successful reset, the user will be
  // signed in and redirected to the home page
  async function reset() {
    try {
      const result = await signIn?.attemptFirstFactor({
        strategy: 'reset_password_email_code',
        code,
        password,
      })

      if (!result) return

      // Check if 2FA is required
      if (result.status === 'needs_second_factor') {
        setSecondFactor(true)
        setError('')
      } else if (result.status === 'complete') {
        // Set the active session to
        // the newly created session (user is now signed in)
        await setActive?.({
          session: result.createdSessionId,
          navigate: async ({ session }) => {
            if (session?.currentTask) {
              // Handle pending session tasks
              // See https://clerk.com/docs/guides/development/custom-flows/authentication/session-tasks
              console.log(session?.currentTask)
              return
            }

            router.replace('/')
          },
        })
        setError('')
      } else {
        console.log(result)
      }
    } catch (err: any) {
      console.error('error', err.errors?.[0]?.longMessage)
      setError(err.errors?.[0]?.longMessage || 'An error occurred')
    }
  }

  return (
    <ThemedView style={styles.container}>
      <ThemedText type="title" style={styles.title}>
        Forgot Password?
      </ThemedText>

      {!successfulCreation && (
        <>
          <ThemedText style={styles.label}>Provide your email address</ThemedText>
          <TextInput
            style={styles.input}
            placeholder="e.g john@doe.com"
            placeholderTextColor="#666666"
            value={email}
            onChangeText={setEmail}
            autoCapitalize="none"
            keyboardType="email-address"
          />

          <Pressable
            style={({ pressed }) => [
              styles.button,
              !email && styles.buttonDisabled,
              pressed && styles.buttonPressed,
            ]}
            onPress={create}
            disabled={!email}
          >
            <ThemedText style={styles.buttonText}>Send password reset code</ThemedText>
          </Pressable>

          {error && (
            <View style={styles.errorContainer}>
              <ThemedText style={styles.errorText}>{error}</ThemedText>
            </View>
          )}
        </>
      )}

      {successfulCreation && !secondFactor && (
        <>
          <ThemedText style={styles.description}>
            A password reset code has been sent to your email
          </ThemedText>

          <ThemedText style={styles.label}>Enter your new password</ThemedText>
          <TextInput
            style={styles.input}
            placeholder="Enter new password"
            placeholderTextColor="#666666"
            value={password}
            onChangeText={setPassword}
            secureTextEntry={true}
          />

          <ThemedText style={styles.label}>Enter the password reset code</ThemedText>
          <TextInput
            style={styles.input}
            placeholder="Enter code"
            placeholderTextColor="#666666"
            value={code}
            onChangeText={setCode}
            keyboardType="numeric"
          />

          <Pressable
            style={({ pressed }) => [
              styles.button,
              (!password || !code) && styles.buttonDisabled,
              pressed && styles.buttonPressed,
            ]}
            onPress={reset}
            disabled={!password || !code}
          >
            <ThemedText style={styles.buttonText}>Reset Password</ThemedText>
          </Pressable>

          {error && (
            <View style={styles.errorContainer}>
              <ThemedText style={styles.errorText}>{error}</ThemedText>
            </View>
          )}
        </>
      )}

      {secondFactor && (
        <View style={styles.warningContainer}>
          <ThemedText style={styles.warningText}>
            2FA is required, but this UI does not handle that yet
          </ThemedText>
        </View>
      )}
    </ThemedView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    gap: 12,
  },
  title: {
    marginBottom: 8,
  },
  description: {
    fontSize: 14,
    marginBottom: 16,
    opacity: 0.8,
  },
  label: {
    fontWeight: '600',
    fontSize: 14,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
    backgroundColor: '#fff',
  },
  button: {
    backgroundColor: '#0a7ea4',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
    alignItems: 'center',
    marginTop: 8,
  },
  buttonPressed: {
    opacity: 0.7,
  },
  buttonDisabled: {
    opacity: 0.5,
  },
  buttonText: {
    color: '#fff',
    fontWeight: '600',
  },
  errorContainer: {
    padding: 12,
    backgroundColor: '#ffebee',
    borderRadius: 8,
    marginTop: 8,
  },
  errorText: {
    color: '#c62828',
    fontWeight: '500',
  },
  warningContainer: {
    padding: 12,
    backgroundColor: '#fff3e0',
    borderRadius: 8,
    marginTop: 8,
  },
  warningText: {
    color: '#e65100',
    fontWeight: '500',
  },
})

  import SwiftUI
  import ClerkKit

  struct ForgotPasswordView: View {
    @Environment(Clerk.self) private var clerk
    @State private var email = ""
    @State private var code = ""
    @State private var newPassword = ""
    @State private var isVerifying = false

    var body: some View {
      switch clerk.auth.currentSignIn?.status {
      case .needsFirstFactor:
        // Verify the reset code.
        TextField("Enter your code", text: $code)
        Button("Verify") {
          Task { await verify(code: code) }
        }

      case .needsSecondFactor:
        // Handle any additional verification requirements.
        Text("2FA is required, but this UI does not handle that")

      case .needsNewPassword:
        // Set the new password after verification.
        SecureField("New password", text: $newPassword)
        Button("Set new password") {
          Task { await setNewPassword(password: newPassword) }
        }

      default:
        if let user = clerk.user {
          // Show the current user after a successful reset.
          Text("Signed in as: \(user.id)")
        } else {
          // Start the reset flow by creating a sign-in attempt.
          TextField("Email", text: $email)
          Button("Forgot password?") {
            Task { await createSignIn(email: email) }
          }
        }
      }
    }
  }

'use client'

import React, { useState, useEffect } from 'react'
import { useAuth, useSignIn } from '@clerk/nextjs'
import { useRouter } from 'next/navigation'

export default function Page() {
  const { isSignedIn } = useAuth()
  const { isLoaded, signIn, setActive } = useSignIn()
  const router = useRouter()

  const [phoneNumber, setPhoneNumber] = useState('')
  const [password, setPassword] = useState('')
  const [code, setCode] = useState('')
  const [successfulCreation, setSuccessfulCreation] = useState(false)
  const [secondFactor, setSecondFactor] = useState(false)
  const [error, setError] = useState('')

  // Redirect signed-in users to home
  useEffect(() => {
    if (isSignedIn) router.push('/')
  }, [isSignedIn, router])

  if (!isLoaded) return <p>Loading...</p>

  // Send the password reset code to the user's email
  async function create(e: React.FormEvent) {
    e.preventDefault()
    await signIn
      ?.create({
        strategy: 'reset_password_phone_code',
        identifier: phoneNumber,
      })
      .then((_) => {
        setSuccessfulCreation(true)
        setError('')
      })
      .catch((err) => {
        console.error('error', err.errors[0].longMessage)
        setError(err.errors[0].longMessage)
      })
  }

  // Reset the user's password.
  // Upon successful reset, the user will be
  // signed in and redirected to the home page
  async function reset(e: React.FormEvent) {
    e.preventDefault()
    await signIn
      ?.attemptFirstFactor({
        strategy: 'reset_password_phone_code',
        code,
        password,
      })
      .then((result) => {
        // Check if 2FA is required
        if (result.status === 'needs_second_factor') {
          setSecondFactor(true)
          setError('')
        } else if (result.status === 'complete') {
          // Set the active session to
          // the newly created session (user is now signed in)
          setActive({
            session: result.createdSessionId,
            navigate: async ({ session }) => {
              if (session?.currentTask) {
                // Handle pending session tasks
                // See https://clerk.com/docs/guides/development/custom-flows/authentication/session-tasks
                console.log(session?.currentTask)
                return
              }

              router.push('/')
            },
          })
          setError('')
        } else {
          console.log(result)
        }
      })
      .catch((err) => {
        console.error('error', err.errors[0].longMessage)
        setError(err.errors[0].longMessage)
      })
  }

  return (
    <div>
      <h1>Forgot Password?</h1>
      <form onSubmit={!successfulCreation ? create : reset}>
        {!successfulCreation && (
          <>
            <label htmlFor="phoneNumber">Provide your phone number</label>
            <input
              type="tel"
              placeholder="e.g +1234567890"
              value={phoneNumber}
              onChange={(e) => setPhoneNumber(e.target.value)}
            />

            <button>Send password reset code</button>
            {error && <p>{error}</p>}
          </>
        )}

        {successfulCreation && (
          <>
            <label htmlFor="password">Enter your new password</label>
            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />

            <label htmlFor="code">
              Enter the password reset code that was sent to your phone number
            </label>
            <input type="text" value={code} onChange={(e) => setCode(e.target.value)} />

            <button>Reset</button>
            {error && <p>{error}</p>}
          </>
        )}

        {secondFactor && <p>2FA is required, but this UI does not handle that</p>}
      </form>
    </div>
  )
}

import { ThemedText } from '@/components/themed-text'
import { ThemedView } from '@/components/themed-view'
import { useSignIn, useUser } from '@clerk/clerk-expo'
import { Redirect, useRouter } from 'expo-router'
import React, { useState } from 'react'
import { Pressable, StyleSheet, TextInput, View } from 'react-native'

export default function ForgotPasswordPage() {
  const { isSignedIn } = useUser()
  const { isLoaded, signIn, setActive } = useSignIn()
  const router = useRouter()

  const [phoneNumber, setPhoneNumber] = useState('')
  const [password, setPassword] = useState('')
  const [code, setCode] = useState('')
  const [successfulCreation, setSuccessfulCreation] = useState(false)
  const [secondFactor, setSecondFactor] = useState(false)
  const [error, setError] = useState('')

  // Redirect signed-in users to home
  if (isSignedIn) {
    return <Redirect href="/" />
  }

  if (!isLoaded) {
    return (
      <ThemedView style={styles.container}>
        <ThemedText>Loading...</ThemedText>
      </ThemedView>
    )
  }

  // Send the password reset code to the user's phone
  async function create() {
    try {
      await signIn?.create({
        strategy: 'reset_password_phone_code',
        identifier: phoneNumber,
      })
      setSuccessfulCreation(true)
      setError('')
    } catch (err: any) {
      console.error('error', err.errors?.[0]?.longMessage)
      setError(err.errors?.[0]?.longMessage || 'An error occurred')
    }
  }

  // Reset the user's password.
  // Upon successful reset, the user will be
  // signed in and redirected to the home page
  async function reset() {
    try {
      const result = await signIn?.attemptFirstFactor({
        strategy: 'reset_password_phone_code',
        code,
        password,
      })

      if (!result) return

      // Check if 2FA is required
      if (result.status === 'needs_second_factor') {
        setSecondFactor(true)
        setError('')
      } else if (result.status === 'complete') {
        // Set the active session to
        // the newly created session (user is now signed in)
        await setActive?.({
          session: result.createdSessionId,
          navigate: async ({ session }) => {
            if (session?.currentTask) {
              // Handle pending session tasks
              // See https://clerk.com/docs/guides/development/custom-flows/authentication/session-tasks
              console.log(session?.currentTask)
              return
            }

            router.replace('/')
          },
        })
        setError('')
      } else {
        console.log(result)
      }
    } catch (err: any) {
      console.error('error', err.errors?.[0]?.longMessage)
      setError(err.errors?.[0]?.longMessage || 'An error occurred')
    }
  }

  return (
    <ThemedView style={styles.container}>
      <ThemedText type="title" style={styles.title}>
        Forgot Password?
      </ThemedText>

      {!successfulCreation && (
        <>
          <ThemedText style={styles.label}>Provide your phone number</ThemedText>
          <TextInput
            style={styles.input}
            placeholder="e.g +1234567890"
            placeholderTextColor="#666666"
            value={phoneNumber}
            onChangeText={setPhoneNumber}
            keyboardType="phone-pad"
          />

          <Pressable
            style={({ pressed }) => [
              styles.button,
              !phoneNumber && styles.buttonDisabled,
              pressed && styles.buttonPressed,
            ]}
            onPress={create}
            disabled={!phoneNumber}
          >
            <ThemedText style={styles.buttonText}>Send password reset code</ThemedText>
          </Pressable>

          {error && (
            <View style={styles.errorContainer}>
              <ThemedText style={styles.errorText}>{error}</ThemedText>
            </View>
          )}
        </>
      )}

      {successfulCreation && !secondFactor && (
        <>
          <ThemedText style={styles.description}>
            A password reset code has been sent to your phone
          </ThemedText>

          <ThemedText style={styles.label}>Enter your new password</ThemedText>
          <TextInput
            style={styles.input}
            placeholder="Enter new password"
            placeholderTextColor="#666666"
            value={password}
            onChangeText={setPassword}
            secureTextEntry={true}
          />

          <ThemedText style={styles.label}>Enter the password reset code</ThemedText>
          <TextInput
            style={styles.input}
            placeholder="Enter code"
            placeholderTextColor="#666666"
            value={code}
            onChangeText={setCode}
            keyboardType="numeric"
          />

          <Pressable
            style={({ pressed }) => [
              styles.button,
              (!password || !code) && styles.buttonDisabled,
              pressed && styles.buttonPressed,
            ]}
            onPress={reset}
            disabled={!password || !code}
          >
            <ThemedText style={styles.buttonText}>Reset Password</ThemedText>
          </Pressable>

          {error && (
            <View style={styles.errorContainer}>
              <ThemedText style={styles.errorText}>{error}</ThemedText>
            </View>
          )}
        </>
      )}

      {secondFactor && (
        <View style={styles.warningContainer}>
          <ThemedText style={styles.warningText}>
            2FA is required, but this UI does not handle that yet
          </ThemedText>
        </View>
      )}
    </ThemedView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    gap: 12,
  },
  title: {
    marginBottom: 8,
  },
  description: {
    fontSize: 14,
    marginBottom: 16,
    opacity: 0.8,
  },
  label: {
    fontWeight: '600',
    fontSize: 14,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
    backgroundColor: '#fff',
  },
  button: {
    backgroundColor: '#0a7ea4',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
    alignItems: 'center',
    marginTop: 8,
  },
  buttonPressed: {
    opacity: 0.7,
  },
  buttonDisabled: {
    opacity: 0.5,
  },
  buttonText: {
    color: '#fff',
    fontWeight: '600',
  },
  errorContainer: {
    padding: 12,
    backgroundColor: '#ffebee',
    borderRadius: 8,
    marginTop: 8,
  },
  errorText: {
    color: '#c62828',
    fontWeight: '500',
  },
  warningContainer: {
    padding: 12,
    backgroundColor: '#fff3e0',
    borderRadius: 8,
    marginTop: 8,
  },
  warningText: {
    color: '#e65100',
    fontWeight: '500',
  },
})