Changing the Magic Link URL

Backend change

You can change the URL of Magic Links by providing a callback on the backend.

NodeJS

import SuperTokens from "supertokens-node";import Passwordless from "supertokens-node/recipe/passwordless";import Session from "supertokens-node/recipe/session";
SuperTokens.init({    appInfo: {        apiDomain: "...",        appName: "...",        websiteDomain: "..."    },    recipeList: [        Passwordless.init({            contactMethod: "EMAIL", // This example will work with any contactMethod            createAndSendCustomEmail: async (input) => console.log(input),            // This example works with the "USER_INPUT_CODE_AND_MAGIC_LINK" and "MAGIC_LINK" flows.            flowType: "USER_INPUT_CODE_AND_MAGIC_LINK", 
            // Customize information in the URL.            // By default: `${websiteDomain}/${websiteBasePath}/verify`            getLinkDomainAndPath: async (contactInfo, context) => {                // contactInfo is {email: string} | {phoneNumber: string}                return "https://example.com/custom/auth/verify"            }        }),        Session.init({ /* ... */ })    ]});

GoLang

import (    "github.com/supertokens/supertokens-golang/recipe/passwordless"    "github.com/supertokens/supertokens-golang/recipe/passwordless/plessmodels"    "github.com/supertokens/supertokens-golang/supertokens")
func main() {    supertokens.Init(supertokens.TypeInput{        RecipeList: []supertokens.Recipe{            passwordless.Init(plessmodels.TypeInput{                // Customize information in the URL.                // By default: `${websiteDomain}/${websiteBasePath}/verify`                GetLinkDomainAndPath: func(email, phoneNumber *string, userContext supertokens.UserContext) (string, error) {                    return "https://example.com/custom/auth/verify", nil                },            }),        },    })}

Python

from supertokens_python.recipe import passwordlessfrom supertokens_python import InputAppInfo, initfrom supertokens_python.recipe.passwordless.utils import PhoneOrEmailInputfrom typing import Dict, Any
async def get_link_domain_and_path(config: PhoneOrEmailInput, user_context: Dict[str, Any]) -> str:    return "https://example.com/custom/auth/verify"
init(    app_info=InputAppInfo(api_domain="...", app_name="...", website_domain="..."),    framework='...',     recipe_list=[        passwordless.init(            contact_config=...,             flow_type="...",             # Customize information in the URL.            # By default: `${websiteDomain}/${websiteBasePath}/verify`            get_link_domain_and_path=get_link_domain_and_path        )    ])

Frontend change

ReactJS

Note

To use SuperTokens with plain javascript you need to use the 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.

Plain JavaScript

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

React Native

When the user clicks the magic link, you need to render the LinkClicked component that exported by our SDK on that page. By default, this already happens on the ${websiteDomain}/${websiteBasePath}/verify path. To change this, you need to:

1) Disable the default UI for the link clicked screen:

import Passwordless from "supertokens-auth-react/recipe/passwordless";
Passwordless.init({    contactMethod: "EMAIL", // This example will work with any contactMethod    linkClickedScreenFeature: {        disableDefaultImplementation: true    },});

2) Render the link clicked screen on your custom route:

import React from "react";import {LinkClicked} from "supertokens-auth-react/recipe/passwordless";function CustomLinkClickedScreen () {    return <LinkClicked />}