Replacing your password reset flow

Integrate Stytch as a replacement for your forgot password flow. This will be used to complement your existing login methods. To replace your login flow with Stytch, see the Augmenting existing auth flow guide.

Here's an example of a password reset component.

Add the login and signup URLs to the project's list of predefined redirect URLs in the dashboard. For more information on why this step is necessary, please check out the documentation here.

By default, all redirect URLs are set to http://localhost:3000 for the Test environment.

To send a login email, the user who forgot their password needs to be created with Stytch. Check if the user has a Stytch user ID. If they do not, create a Stytch user for them and save the user ID from the response. This needs to happen once for each user who forgets their password. We recommend saving the Stytch user ID in a new column of your users table or within a new table linking your users with their Stytch user ID.

curl --request POST \
  --url https://test.stytch.com/v1/users \
  -u 'PROJECT_ID:SECRET' \
  -H 'Content-Type: application/json' \
  -d '{
    "email": "sandbox@stytch.com"
  }'

When the user wants to reset their password, send a request to send an email magic link. Either the login_magic_link_url or signup_magic_link_url request parameter is the URL the user will be redirected to from the email. The signup_magic_link_url will be used if the user is in a pending state due to using CreateUser's create_user_as_pending request parameter.

curl --request POST \
  --url https://test.stytch.com/v1/magic_links/email/send \
  -u 'PROJECT_ID:SECRET' \
  -H 'Content-Type: application/json' \
  -d '{
    "email": "sandbox@stytch.com",
    "login_magic_link_url": "https://example.com/login",
    "signup_magic_link_url": "https://example.com/signup"
  }'

When the user opens the email, they are prompted to log in by clicking either the login_magic_link_url or signup_magic_link_url from the SendMagicLinkByEmail request. The url will contain a token in the query params that you will use to send the AuthenticateMagic request. If the response is a 200, you have successfully verified ownership of the user's email address. That authentication event allows you to provide the user with access to their logged-in profile. While it's not necessary from an authentication perspective at this point, you may also allow them to rotate their password if that's their preference.

curl --request POST \
  --url https://test.stytch.com/v1/magic_links/authenticate \
  -u 'PROJECT_ID:SECRET' \
  -H 'Content-Type: application/json' \
  -d '{
    "token": "SeiGwdj5lKkrEVgcEY3QNJXt6srxS3IK2Nwkar6mXD4="
  }'