Embed in a page

Overview

If you are looking to render the email verification UI in a different page follow this guide.

Before you start

Most of the updates require your attention if you are using the pre-built UI components. If you are working with a custom UI you need to update the backend configuration, like in step 3.1.

Steps

1. Disable the default implementation

If you are using a custom UI implementation, then you can skip this step.

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.

2. Render the component yourself

If you are using a custom UI implementation, then you can skip this step.

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

3. Change 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 configuration on the backend and frontend:

3.1 Update the backend configuration

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: `<YOUR_WEBSITE_DOMAIN>/auth/verify-email`
                                    "http://localhost:3000/auth/verify-email",
                                    "http://localhost:3000/your/path"
                                    )
                                }
                            )
                        },
                    }
                }
            }
        })
    ]
});

3.2 Update the frontend configuration

If you are using a custom UI implementation, then you can skip this step.

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