Which frontend SDK do you use?

supertokens-web-js / mobile

supertokens-auth-react

Embed in a page

Step 1: Disable the default implementation

ReactJS

Note

You can use the supertokens-web-js SDK which exposes several helper functions that query the APIs exposed by the SuperTokens backend SDK.

You can refer to this example app as a reference for using the supertokens-web-js SDK.

Angular

Note

To use SuperTokens with React Native you need to use the supertokens-react-native SDK. The SDK provides session management features.

To add login functionality, you need to build your own UI and call the APIs exposed by the backend SDKs. You can find the API spec here

Vue

What type of UI are you using?

Prebuilt UICustom UI

Plain JavaScript

What type of UI are you using?

Prebuilt UICustom UI

React Native

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.

Step 2: Render the component yourself

ReactJS

Note

You can use the supertokens-web-js SDK which exposes several helper functions that query the APIs exposed by the SuperTokens backend SDK.

You can refer to this example app as a reference for using the supertokens-web-js SDK.

Angular

Note

To use SuperTokens with React Native you need to use the supertokens-react-native SDK. The SDK provides session management features.

To add login functionality, you need to build your own UI and call the APIs exposed by the backend SDKs. You can find the API spec here

Vue

What type of UI are you using?

Prebuilt UICustom UI

Plain JavaScript

What type of UI are you using?

Prebuilt UICustom UI

React Native

Add the EmailVerification component in your app:

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

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

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

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

GoLang

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
                    },
                },
            }),
        },
    })
}

Python

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

Note

You can use the supertokens-web-js SDK which exposes several helper functions that query the APIs exposed by the SuperTokens backend SDK.

You can refer to this example app as a reference for using the supertokens-web-js SDK.

Angular

Note

To use SuperTokens with React Native you need to use the supertokens-react-native SDK. The SDK provides session management features.

To add login functionality, you need to build your own UI and call the APIs exposed by the backend SDKs. You can find the API spec here

Vue

What type of UI are you using?

Prebuilt UICustom UI

Plain JavaScript

What type of UI are you using?

Prebuilt UICustom UI

React Native

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