Skip to main content

Embed in a page

Step 1: Disable the default implementation#

import SuperTokens from "supertokens-auth-react";
import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        ThirdPartyEmailPassword.init({
            resetPasswordUsingTokenFeature: {
                disableDefaultUI: 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 React from "react";
import {ResetPasswordUsingToken} from 'supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui';

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#

import SuperTokens from "supertokens-node";
import ThirdPartyEmailPassword from "supertokens-node/recipe/thirdpartyemailpassword";
import { SMTPService } from "supertokens-node/recipe/thirdpartyemailpassword/emaildelivery";

SuperTokens.init({
    supertokens: { 
        connectionURI: "...",
     },
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        ThirdPartyEmailPassword.init({
            emailDelivery: {
                override: (originalImplementation) => {
                    return {
                        ...originalImplementation,
                        sendEmail: async function (input) {
                            if (input.type === "PASSWORD_RESET") {
                                return originalImplementation.sendEmail({
                                    ...input,
                                    passwordResetLink: input.passwordResetLink.replace(
                                        // This is: `${websiteDomain}${websiteBasePath}/reset-password`
                                        "http://localhost:3000/auth/reset-password",
                                        "http://localhost:3000/your/path"
                                        )
                                })
                            }
                            return originalImplementation.sendEmail(input);
                        }
                    }
                }
            }
        })
    ]
});

Step B: On the frontend#

import SuperTokens from "supertokens-auth-react";
import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "...",
    },
    recipeList: [
        ThirdPartyEmailPassword.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";
                };
            }
        })
    ]
})
Looking for older versions of the documentation?
Which UI do you use?
Custom UI
Pre built UI