Embed in a page

Step 1: Disable the default implementation

ReactJS

not supported / not applicable

If this requires a call to the backend, you will need to call our APIs yourself. Otherwise, since you are building your own login UI, you will have to handle this yourself.

Plain JavaScript

coming soon

In the meantime, you can subscribe to our react native SDK to get notified about releases.

React Native

SuperTokens.init({    appInfo: {...},    recipeList: [        ThirdPartyEmailPassword.init({            emailVerificationFeature: {                mode: "REQUIRED",                disableDefaultImplementation: true            },        }),    ]});

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

Step 2: Render the component yourself

Add the EmailVerification component in your app:

ReactJS

not supported / not applicable

If this requires a call to the backend, you will need to call our APIs yourself. Otherwise, since you are building your own login UI, you will have to handle this yourself.

Plain JavaScript

coming soon

In the meantime, you can subscribe to our react native SDK to get notified about releases.

React Native

import {EmailVerification} from 'supertokens-auth-react/recipe/thirdpartyemailpassword';
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

let SuperTokens = require("supertokens-node");let ThirdPartyEmailPassword = require("supertokens-node/recipe/thirdpartyemailpassword);
SuperTokens.init({    SuperTokens: {...},    appInfo: {...},    recipeList: [        ThirdPartyEmailPassword.init({            emailVerificationFeature: {
                // This function is used to generate the email verification link                getEmailVerificationURL: async (user) => {                    let { email, id } = user;                    return "https://example.com/custom-email-verification-path"                }            }        })    ]});

GoLang

supertokens.Init(supertokens.TypeInput{    RecipeList: []supertokens.Recipe{        thirdpartyemailpassword.Init(&tpepmodels.TypeInput{            EmailVerificationFeature: &tpepmodels.TypeInputEmailVerificationFeature{                // This function is used to generate the email verification link                GetEmailVerificationURL: func(user tpepmodels.User) (string, error) {                    return "https://example.com/custom-email-verification-path", nil                },            },        }),    },})

Python

Step B: On the frontend

ReactJS

not supported / not applicable

If this requires a call to the backend, you will need to call our APIs yourself. Otherwise, since you are building your own login UI, you will have to handle this yourself.

Plain JavaScript

coming soon

In the meantime, you can subscribe to our react native SDK to get notified about releases.

React Native

SuperTokens.init({    recipeList: [        ThirdPartyEmailPassword.init({
            // 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";                };            }        })    ]})