Forgot Password

Create a custom forgot password flow for your users.

When using Clerk's Prebuilt Components options are included to help users who have forgotten a password.
If these options will not work for you, or if you want more control of your user's experience, it's possible to create a completely custom Forgot Password flow using lower-level methods.
Example

1
import React, { SyntheticEvent, useState } from 'react';
2
import { useSignIn } from '@clerk/nextjs';
3
import type { NextPage } from 'next';
4

5
const SignInPage: NextPage = () => {
6
  const [email, setEmail] = useState('');
7
  const [password, setPassword] = useState('');
8
  const [code, setCode] = useState('');
9
  const [successfulCreation, setSuccessfulCreation] = useState(false);
10
  const [complete, setComplete] = useState(false);
11
  const [secondFactor, setSecondFactor] = useState(false);
12

13
  const { isLoaded, signIn, setActive } = useSignIn();
14

15
  if (!isLoaded) {
16
    return null;
17
  }
18

19
  async function create(e: SyntheticEvent) {
20
    e.preventDefault();
21
    await signIn
22
      ?.create({
23
        strategy: 'reset_password_email_code',
24
        identifier: email,
25
      })
26
      .then(_ => {
27
        setSuccessfulCreation(true);
28
      })
29
      .catch(err => console.error('error', err.errors[0].longMessage));
30
  }
31

32
  async function reset(e: SyntheticEvent) {
33
    e.preventDefault();
34
    await signIn
35
      ?.attemptFirstFactor({
36
        strategy: 'reset_password_email_code',
37
        code,
38
        password,
39
      })
40
      .then(result => {
41
        if (result.status === 'needs_second_factor') {
42
          setSecondFactor(true);
43
        } else if (result.status === 'complete') {
44
          setActive({ session: result.createdSessionId });
45
          setComplete(true);
46
        } else {
47
          console.log(result);
48
        }
49
      })
50
      .catch(err => console.error('error', err.errors[0].longMessage));
51
  }
52

53
  return (
54
    <div
55
      style={{
56
        margin: 'auto',
57
        maxWidth: '500px',
58
      }}
59
    >
60
      <h1>Forgot Password ?</h1>
61
      <form
62
        style={{
63
          display: 'flex',
64
          flexDirection: 'column',
65
          gap: '1em',
66
        }}
67
        onSubmit={!successfulCreation ? create : reset}
68
      >
69
        {!successfulCreation && !complete && (
70
          <>
71
            <label htmlFor='email'>Please provide identifier</label>
72
            <input
73
              type='email'
74
              placeholder='e.g john@doe.com'
75
              value={email}
76
              onChange={e => setEmail(e.target.value)}
77
            />
78

79
            <button>Sign in</button>
80
          </>
81
        )}
82

83
        {successfulCreation && !complete && (
84
          <>
85
            <label htmlFor='password'>New password</label>
86
            <input
87
              type='password'
88
              value={password}
89
              onChange={e => setPassword(e.target.value)}
90
            />
91

92
            <label htmlFor='password'>Reset password code</label>
93
            <input
94
              type='text'
95
              value={code}
96
              onChange={e => setCode(e.target.value)}
97
            />
98

99
            <button>Reset</button>
100
          </>
101
        )}
102

103
        {complete && 'You successfully changed you password'}
104
        {secondFactor && '2FA is required, this UI does not handle that'}
105
      </form>
106
    </div>
107
  );
108
};
109

110
export default SignInPage;