Embed in a page
Step 1: Disable the default implementation#
- ReactJS
- Plain JavaScript
- React Native
Note
To use SuperTokens with plain javascript you need to use the
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
You can refer to this blog post to know how this is done, the example uses social login but the same setup applies to other recipes as well.
supertokens-website 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
You can refer to this blog post to know how this is done, the example uses social login but the same setup applies to other recipes as well.
Note
To use SuperTokens with React Native you need to use the
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
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
import SuperTokens from "supertokens-auth-react";import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword";
SuperTokens.init({ appInfo: { apiDomain: "...", appName: "...", websiteDomain: "..." }, 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
- Plain JavaScript
- React Native
Note
To use SuperTokens with plain javascript you need to use the
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
You can refer to this blog post to know how this is done, the example uses social login but the same setup applies to other recipes as well.
supertokens-website 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
You can refer to this blog post to know how this is done, the example uses social login but the same setup applies to other recipes as well.
Note
To use SuperTokens with React Native you need to use the
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
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
import React from "react";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
- GoLang
- Python
import SuperTokens from "supertokens-node";import ThirdPartyEmailPassword from "supertokens-node/recipe/thirdpartyemailpassword";
SuperTokens.init({ supertokens: { connectionURI: "...", }, appInfo: { apiDomain: "...", appName: "...", websiteDomain: "..." }, 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" } } }) ]});import ( "github.com/supertokens/supertokens-golang/recipe/thirdpartyemailpassword" "github.com/supertokens/supertokens-golang/recipe/thirdpartyemailpassword/tpepmodels" "github.com/supertokens/supertokens-golang/supertokens")
func main() { 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, userContext supertokens.UserContext) (string, error) { return "https://example.com/custom-email-verification-path", nil }, }, }), }, })}from supertokens_python import init, InputAppInfofrom supertokens_python.recipe import thirdpartyemailpasswordfrom supertokens_python.recipe.thirdpartyemailpassword.types import Userfrom typing import Dict, Any
async def get_email_verification_url(user: User, user_context: Dict[str, Any]) -> str: return "https://example.com/auth/verify-email"
init( app_info=InputAppInfo(api_domain="...", app_name="...", website_domain="..."), framework='...', recipe_list=[ thirdpartyemailpassword.init( email_verification_feature=thirdpartyemailpassword.InputEmailVerificationConfig( get_email_verification_url=get_email_verification_url ) ) ])Step B: On the frontend#
- ReactJS
- Plain JavaScript
- React Native
Note
To use SuperTokens with plain javascript you need to use the
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
You can refer to this blog post to know how this is done, the example uses social login but the same setup applies to other recipes as well.
supertokens-website 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
You can refer to this blog post to know how this is done, the example uses social login but the same setup applies to other recipes as well.
Note
To use SuperTokens with React Native you need to use the
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
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
import SuperTokens from "supertokens-auth-react";import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword";
SuperTokens.init({ appInfo: { apiDomain: "...", appName: "...", websiteDomain: "...", }, 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"; }; } }) ]})