Skip to main content
import { StytchPasswordReset, useStytch } from '@stytch/react';

const config = {
  sessionOptions: {
    sessionDurationMinutes: 60,
  },
};

export const ResetPassword = () => {
  const stytch = useStytch();
  const parsed = stytch.parseAuthenticateUrl();

  if (!parsed?.token) {
    // Handle missing token
    return <>...</>;
  }

  return <StytchPasswordReset config={config} passwordResetToken={parsed.token} />;
};
Example of Password Reset component
The SDK comes with a pre-built UI component to reset passwords for our Passwords product. Render this component on the page at resetPasswordRedirectURL if using our <StytchLogin> prebuilt component, or the URL sent to the user by our reset password start API.

​
Props

​
passwordResetToken
string
Password reset token. The component will read the token from the current page by default, you only need to pass this in if the token is not there. To retrieve the token manually, use the client.parseAuthenticateUrl() method. The token will be available in the token property in the returned object.
​
config
object
The configuration object for the UI component. This component accepts the same config as StytchLogin so you can reuse the config, although most options will not have any effect.
​
presentation
The presentation field allows you to customize the look of the SDK. This component accepts the same presentation prop as StytchLogin so you can reuse it. For more information, see the Theming documentation.
​
callbacks
object
Optional callbacks that are triggered by various events in the SDK. See more details about the callbacks here.
​
onEvent
(data) => void
A callback function that responds to events sent from the SDK.
​
onError
(data) => void
A callback function that responds to errors in the SDK. It is useful for debugging during development and error handling in production.
​
strings
object
Specify custom strings to be used in the prebuilt UI. Consult the message catalog (messages/en.po) for the list of available strings. Each value should be specified using ICU MessageFormat.Strings that are not defined will use the default English value as a fallback.See Text Customization for more information.