Which UI do you use?

Custom UI

Pre built UI

Embed in a page

Step 1: Disable the default implementation

ReactJS

// this goes in the auth route config of your frontend app (once the pre built UI script has been loaded)

(window as any).supertokensUIInit("supertokensui", {
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        (window as any).supertokensUIEmailPassword.init({
            resetPasswordUsingTokenFeature: {
                disableDefaultUI: true
            },
        }),
    ]
});

Angular

import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        EmailPassword.init({
            resetPasswordUsingTokenFeature: {
                disableDefaultUI: true
            },
        }),
    ]
});

Vue

// this goes in the auth route config of your frontend app (once the pre built UI script has been loaded)

(window as any).supertokensUIInit("supertokensui", {
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        (window as any).supertokensUIEmailPassword.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:

ReactJS

caution

You will have to build your own UI for this.

Angular

import React from "react";
import {ResetPasswordUsingToken} from 'supertokens-auth-react/recipe/emailpassword/prebuiltui';

class ResetPasswordPage extends React.Component {
    render() {
        return (
            <div>
                <ResetPasswordUsingToken/> 
            </div>
        )
    }
}

Vue

caution

You will have to build your own UI for this.

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

Important

For other backend frameworks, you can follow our guide on how to spin up a separate server configured with the SuperTokens backend SDK to authenticate requests and issue session tokens.

GoLang

import SuperTokens from "supertokens-node";
import EmailPassword from "supertokens-node/recipe/emailpassword";

SuperTokens.init({
    supertokens: { 
        connectionURI: "...",
     },
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        EmailPassword.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);
                        }
                    }
                }
            }
        })
    ]
});

Python

import (
    "strings"

    "github.com/supertokens/supertokens-golang/ingredients/emaildelivery"
    "github.com/supertokens/supertokens-golang/recipe/emailpassword"
    "github.com/supertokens/supertokens-golang/recipe/emailpassword/epmodels"
    "github.com/supertokens/supertokens-golang/supertokens"
)

func main() {
    supertokens.Init(supertokens.TypeInput{
        RecipeList: []supertokens.Recipe{
            emailpassword.Init(&epmodels.TypeInput{

                EmailDelivery: &emaildelivery.TypeInput{
                    Override: func(originalImplementation emaildelivery.EmailDeliveryInterface) emaildelivery.EmailDeliveryInterface {
                        ogSendEmail := *originalImplementation.SendEmail

                        (*originalImplementation.SendEmail) = func(input emaildelivery.EmailType, userContext supertokens.UserContext) error {
                            // This is: `${websiteDomain}${websiteBasePath}/reset-password`
                            input.PasswordReset.PasswordResetLink = strings.Replace(
                                input.PasswordReset.PasswordResetLink,
                                "http://localhost:3000/auth/reset-password",
                                "http://localhost:3000/your/path", 1,
                            )
                            return ogSendEmail(input, userContext)
                        }
                        return originalImplementation
                    },
                },

            }),
        },
    })
}

Other Frameworks

from supertokens_python import init, InputAppInfo
from supertokens_python.recipe.emailpassword.types import EmailDeliveryOverrideInput, EmailTemplateVars
from supertokens_python.recipe import emailpassword
from typing import Dict, Any
from supertokens_python.ingredients.emaildelivery.types import EmailDeliveryConfig

def custom_email_deliver(original_implementation: EmailDeliveryOverrideInput) -> EmailDeliveryOverrideInput:
    original_send_email = original_implementation.send_email

    async def send_email(template_vars: EmailTemplateVars, user_context: Dict[str, Any]) -> None:
        # This is: `${websiteDomain}${websiteBasePath}/reset-password`
        template_vars.password_reset_link = template_vars.password_reset_link.replace(
            "http://localhost:3000/auth/reset-password", "http://localhost:3000/your/path")
        return await original_send_email(template_vars, user_context)

    original_implementation.send_email = send_email
    return original_implementation

init(
    app_info=InputAppInfo(api_domain="...", app_name="...", website_domain="..."),
    framework='...', 
    recipe_list=[
        emailpassword.init(
            email_delivery=EmailDeliveryConfig(override=custom_email_deliver)
        )
    ]
)

Step B: On the frontend

ReactJS

// this goes in the auth route config of your frontend app (once the pre built UI script has been loaded)

(window as any).supertokensUIInit("supertokensui", {
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "...",
    },
    recipeList: [
        (window as any).supertokensUIEmailPassword.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";
                };
            }
        })
    ]
})

Angular

import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "...",
    },
    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";
                };
            }
        })
    ]
})

Vue

// this goes in the auth route config of your frontend app (once the pre built UI script has been loaded)

(window as any).supertokensUIInit("supertokensui", {
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "...",
    },
    recipeList: [
        (window as any).supertokensUIEmailPassword.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";
                };
            }
        })
    ]
})