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.

Our recommendation is to send your user either an email magic link or an email OTP(One-time password), and then redirect them to a page where they can reset their password.

Configuration

First, make sure you have Email verification link toggled on for your application. This can be found under the Authentication factors section of the Dashboard.

Example

1
import { useSignIn } from '@clerk/nextjs';
2
import { useRouter } from 'next/router';
3

4
const signInWithLink = async () => {
5
  const router = useRouter();
6
  const { signIn, setSession } = useSignIn();
7
    // Prepare sign in with strategy and identifier
8
  await signIn.create({
9
    strategy: 'email_link',
10
    identifier: 'example@email.com',
11
    redirectUrl: `${window.location.origin}/reset-password`
12
    });
13

14
    // Make sure that email magic links are supported on this user.
15
    const firstFactor = signIn.supportedFirstFactors.find(
16
      (f) => f.strategy === 'email_link'
17
    );
18
    // Find the correct emailAddressId for the user.
19
    const { emailAddressId } = firstFactor;
20

21
    // Begin the magic link flow
22
    const { startMagicLinkFlow } = signIn.createMagicLinkFlow();
23

24
    // The redirectUrl should be a page where your user can change their password.
25
    const response = await startMagicLinkFlow({
26
      emailAddressId,
27
      redirectUrl: `${window.location.origin}/reset-password`
28
    });
29

30
    // Create a sesssion once the user is verified
31
    if (response.status === 'complete') {
32
      setSession(response.createdSessionId, () =>
33
        router.push(`/?strategy=${'email_link'}`)
34
      );
35
      return;
36
    }
37
  };

1
import { useSignIn } from '@clerk/nextjs';
2
import { EmailLinkFactor } from '@clerk/types'
3
import { useRouter } from 'next/router';  
4
  
5
const { signIn, setSession } = useSignIn();
6
const router = useRouter();
7

8
const signInWithLink = async () => {
9

10
  // Prepare sign in with strategy and identifier
11
  await signIn!.create({
12
    strategy: 'email_link',
13
    identifier: 'example@email.com',
14
    redirectUrl: `${window.location.origin}/reset-password`
15
  });
16

17
  // Make sure that email magic links are supported on this user.
18
  const firstFactor = signIn!.supportedFirstFactors.find(f => f.strategy === 'email_link') as EmailLinkFactor;
19
  // Find the correct emailAddressId for the user.
20
  const { emailAddressId } = firstFactor;
21

22
  // Begin the magic link flow
23
  const { startMagicLinkFlow } = signIn!.createMagicLinkFlow();
24

25
  // The redirectUrl should be a page where your user can change their password.
26
  const response = await startMagicLinkFlow({
27
    emailAddressId,
28
    redirectUrl: `${window.location.origin}/reset-password`
29
  });
30

31
  // Create a sesssion once the user is verified
32
  if (response.status === 'complete' && setSession) {
33
    setSession(response.createdSessionId, () =>
34
      router.push(`/?strategy=${'email_link'}`)
35
    );
36
    return;
37
  }
38
};

You can also achieve a similar result by sending a One-Time Password with an email address. Simply pass the value email_code as the first-factor strategy. Just make sure you've collected the user's email address first. You can find all available methods on the SignIn object documentation.