Embed in a page

Step 1: Disable the default implementation

ReactJS

not supported / not applicable

If this requires a call to the backend, you will need to call our APIs yourself. Otherwise, since you are building your own login UI, you will have to handle this yourself.

Plain JavaScript

not supported / not applicable

If this requires a call to the backend, you will need to call our APIs yourself. Otherwise, since you are building your own login UI, you will have to handle this yourself.

React Native

SuperTokens.init({    appInfo: {...},    recipeList: [        EmailPassword.init({            resetPasswordUsingTokenFeature: {                disableDefaultImplementation: true            },        }),    ]});

If you navigate to /auth/reset-password, you should not see the widget anymore.

Step 2: Render the component yourself

Add the ResetPasswordUsingToken component in your app:

ReactJS

not supported / not applicable

If this requires a call to the backend, you will need to call our APIs yourself. Otherwise, since you are building your own login UI, you will have to handle this yourself.

Plain JavaScript

not supported / not applicable

If this requires a call to the backend, you will need to call our APIs yourself. Otherwise, since you are building your own login UI, you will have to handle this yourself.

React Native

import {ResetPasswordUsingToken} from 'supertokens-auth-react/recipe/emailpassword';
class ResetPasswordPage extends React.Component {    render() {        return (            <div>                <ResetPasswordUsingToken/>             </div>        )    }}

Step 3: Changing the website path for reset password UI (optional)

The default path for this is component is /{websiteBasePath}/reset-password.

If you are displaying this at some custom path, then you need add additional config on the backend and frontend:

Step A: On the backend

NodeJS

let SuperTokens = require("supertokens-node");let EmailPassword = require("supertokens-node/recipe/emailpassword);
SuperTokens.init({    SuperTokens: {...},    appInfo: {...},    recipeList: [        EmailPassword.init({            resetPasswordUsingTokenFeature: {
                // This function is used to generate the password reset link                getResetPasswordURL: async (user) => {                    let { email, id } = user;                    return "https://example.com/custom-reset-password-path"                }            }        })    ]});

GoLang

supertokens.Init(supertokens.TypeInput{    RecipeList: []supertokens.Recipe{        emailpassword.Init(&epmodels.TypeInput{
            ResetPasswordUsingTokenFeature: &epmodels.TypeInputResetPasswordUsingTokenFeature{                GetResetPasswordURL: func(user epmodels.User) (string, error) {                    return "https://example.com/custom-reset-password-path", nil                },            },
        }),    },})

Python

async def func (user: User):    # This function is used to generate the password reset link    return "https://example.com/custom-reset-password-path"

supertokens_python.init({    'app_info': {...},    'supertokens': {...},    'framework': '...',    'recipe_list': [        emailpassword.init({            'reset_password_using_token_feature': {                'get_reset_password_url': func            }        })    ]});

Step B: On the frontend

ReactJS

not supported / not applicable

If this requires a call to the backend, you will need to call our APIs yourself. Otherwise, since you are building your own login UI, you will have to handle this yourself.

Plain JavaScript

not supported / not applicable

If this requires a call to the backend, you will need to call our APIs yourself. Otherwise, since you are building your own login UI, you will have to handle this yourself.

React Native

SuperTokens.init({    recipeList: [        EmailPassword.init({
            // The user will be taken to the custom path when they click on forgot password.            getRedirectionURL: async (context) => {                if (context.action === "RESET_PASSWORD") {                    return "/custom-reset-password-path";                };            }        })    ]})