Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.devGet API keys

Forgot Password

Create a custom forgot password flow for your users.

When using Clerk's Prebuilt Components or Clerk Hosted Pages, options are included to help users who have forgotten a password.

If neither of these options will 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.

email-verification-link

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.

Was this helpful?

Clerk © 2022