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).supertokensUIEmailVerification.init({
            mode: "REQUIRED",
            disableDefaultUI: true
        }),
    ]
});

If you navigate to /auth/verify-email, you should not see the widget anymore.

Angular

import SuperTokens from "supertokens-auth-react";
import EmailVerification from "supertokens-auth-react/recipe/emailverification";

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

If you navigate to /auth/verify-email, you should not see the widget anymore.

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).supertokensUIEmailVerification.init({
            mode: "REQUIRED",
            disableDefaultUI: true
        }),
    ]
});

If you navigate to /auth/verify-email, you should not see the widget anymore.

Step 2: Render the component yourself

ReactJS

caution

You will have to build your own UI instead.

Angular

Add the EmailVerification component in your app:

import React from "react";
import { EmailVerification } from 'supertokens-auth-react/recipe/emailverification/prebuiltui';

class EmailVerificationPage extends React.Component {
    render() {
        return (
            <div>
                <EmailVerification />
            </div>
        )
    }
}

Vue

caution

You will have to build your own UI instead.

Step 3: Changing the website path for the email verification UI (optional)

The default path for this is component is /{websiteBasePath}/verify-email.

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 EmailVerification from "supertokens-node/recipe/emailverification";

SuperTokens.init({
    supertokens: {
        connectionURI: "...",
    },
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        EmailVerification.init({
            mode: "OPTIONAL",
            emailDelivery: {
                override: (originalImplementation) => {
                    return {
                        ...originalImplementation,
                        sendEmail(input) {
                            return originalImplementation.sendEmail({
                                ...input,
                                emailVerifyLink: input.emailVerifyLink.replace(
                                    // This is: `${websiteDomain}${websiteBasePath}/verify-email`
                                    "http://localhost:3000/auth/verify-email",
                                    "http://localhost:3000/your/path"
                                    )
                                }
                            )
                        },
                    }
                }
            }
        })
    ]
});

Python

import (
    "strings"

    "github.com/supertokens/supertokens-golang/ingredients/emaildelivery"
    "github.com/supertokens/supertokens-golang/recipe/emailverification"
    "github.com/supertokens/supertokens-golang/recipe/emailverification/evmodels"
    "github.com/supertokens/supertokens-golang/supertokens"
)

func main() {
    supertokens.Init(supertokens.TypeInput{
        RecipeList: []supertokens.Recipe{
            emailverification.Init(evmodels.TypeInput{
                Mode: evmodels.ModeOptional,
                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}/verify-email`
                            input.EmailVerification.EmailVerifyLink = strings.Replace(
                                input.EmailVerification.EmailVerifyLink,
                                "http://localhost:3000/auth/verify-email",
                                "http://localhost:3000/your/path", 1,
                            )
                            return ogSendEmail(input, userContext)
                        }
                        return originalImplementation
                    },
                },
            }),
        },
    })
}

Other Frameworks

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


def custom_email_delivery(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}/verify-email`
        template_vars.email_verify_link = template_vars.email_verify_link.replace(
            "http://localhost:3000/auth/verify-email", "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=[
        emailverification.init(
            mode="OPTIONAL",
            email_delivery=EmailDeliveryConfig(override=custom_email_delivery))
    ]
)

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).supertokensUIEmailVerification.init({
            mode: "REQUIRED",

            // The user will be taken to the custom path when they need to get their email verified.
            getRedirectionURL: async (context) => {
                if (context.action === "VERIFY_EMAIL") {
                    return "/custom-email-verification-path";
                };
            }
        })
    ]
})

Angular

import SuperTokens from "supertokens-auth-react";
import EmailVerification from "supertokens-auth-react/recipe/emailverification";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "...",
    },
    recipeList: [
        EmailVerification.init({
            mode: "REQUIRED",

            // The user will be taken to the custom path when they need to get their email verified.
            getRedirectionURL: async (context) => {
                if (context.action === "VERIFY_EMAIL") {
                    return "/custom-email-verification-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).supertokensUIEmailVerification.init({
            mode: "REQUIRED",

            // The user will be taken to the custom path when they need to get their email verified.
            getRedirectionURL: async (context) => {
                if (context.action === "VERIFY_EMAIL") {
                    return "/custom-email-verification-path";
                };
            }
        })
    ]
})