Setting up passwords using the SDK

Use the selector below to select the SDK you are using.

Before adding passwords to your application you will need to make the following project configurations within the Stytch dashboard:

1. Create a Login and Reset Password redirect URL on the redirect URL configuration page. These will used during the password reset flow.
2. Within SDK Configuration, authorize the domain(s) (eg. http://localhost:3000) the SDK will run on. Under Auth methods enable the Passwords toggle, and the Email magic links > Enable the LoginOrCreate Flow toggle.
3. Finally, under API keys, save your project's public_token for later.

At the top level of your application you will need to initialize the Stytch client using the public_token saved in the previous step.

Next, create a component that will render on your sign up, and login page. Within this component you will configure, and render the Stytch UI. The Stytch UI accepts a config object as an argument; learn more about this object here. You will need the Login and Password Reset redirect URLs you configured in step one.

A password reset flow has two parts. First, an email is sent to the user which includes a link back to your application; this link contains a unique token which is used for validation. Once the link is clicked, which ensures the user has control of the email address associated with the account, they are then able to set a new password.

Triggering a password reset is handled by the Stytch UI which was configured in the previous step. Now, we will build a separate component which handles the second step of the password reset. Create a component which will appear on the page that your Password Reset redirect url points to. On this page we will configure and render the password reset Stytch UI.

The password reset email sent by Stytch includes an additional button which allows the user to login directly. Our data indicates a large portion of password resets are initiated with the intention to login; by providing a Login without a password option during the reset flow you can increase your number of active users, and their engagement with your application.

The "Login without a password" button is powered by a Magic link. On the page your Login redirect URL points to you will need to capture the token value from the URL query parameters, and authenticate it.

You have now built all the pieces needed for a password sign up and log in flow that handles both password resets, and magic link passwordless login. When a user logs in successfully the SDK will automatically start and manage a session on your behalf. You can learn more about how to use sessions here.

Have any feedback after integrating? Get in touch with us and tell us what you think in our forum, support@stytch.com, or in our Slack community.