Skip to main content

Embed in a page

Step 1: Disable the default implementation#

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:

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#

let SuperTokens = require("supertokens-node");let Session = require("supertokens-node/recipe/session);
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"                }            }        })    ]});

Step B: On the frontend#

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";                };            }        })    ]})