Changing the Magic Link URL

Backend change#

You can change the URL of Magic Links by providing overriding the email delivery config on the backend.

NodeJS
GoLang
Python

import SuperTokens from "supertokens-node";
import ThirdPartyPasswordless from "supertokens-node/recipe/thirdpartypasswordless";
import Session from "supertokens-node/recipe/session";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        ThirdPartyPasswordless.init({
            contactMethod: "EMAIL", // This example will work with any contactMethod
            // This example works with the "USER_INPUT_CODE_AND_MAGIC_LINK" and "MAGIC_LINK" flows.
            flowType: "USER_INPUT_CODE_AND_MAGIC_LINK", 

            emailDelivery: {
                override: (originalImplementation) => {
                    return {
                        ...originalImplementation,
                        sendEmail: async function (input) {
                            if (input.type === "PASSWORDLESS_LOGIN") {
                                return originalImplementation.sendEmail({
                                    ...input,
                                    urlWithLinkCode: input.urlWithLinkCode?.replace(
                                        // This is: `${websiteDomain}${websiteBasePath}/verify`
                                        "http://localhost:3000/auth/verify",
                                        "http://your.domain.com/your/path"
                                        )
                                })
                            }
                            return originalImplementation.sendEmail(input);
                        }
                    }
                }
            }
        }),
        Session.init({ /* ... */ })
    ]
});

import (
    "strings"

    "github.com/supertokens/supertokens-golang/ingredients/emaildelivery"
    "github.com/supertokens/supertokens-golang/recipe/thirdpartypasswordless"
    "github.com/supertokens/supertokens-golang/recipe/thirdpartypasswordless/tplmodels"
    "github.com/supertokens/supertokens-golang/supertokens"
)

func main() {
    supertokens.Init(supertokens.TypeInput{
        RecipeList: []supertokens.Recipe{
            thirdpartypasswordless.Init(tplmodels.TypeInput{
                EmailDelivery: &emaildelivery.TypeInput{
                    Override: func(originalImplementation emaildelivery.EmailDeliveryInterface) emaildelivery.EmailDeliveryInterface {
                        ogSendEmail := *originalImplementation.SendEmail
                        (*originalImplementation.SendEmail) = func(input emaildelivery.EmailType, userContext supertokens.UserContext) error {
                            // By default: `${websiteDomain}/${websiteBasePath}/verify`
                            newUrl := strings.Replace(
                                *input.PasswordlessLogin.UrlWithLinkCode,
                                "http://localhost:3000/auth/verify",
                                "http://localhost:3000/custom/path",
                                1,
                            )
                            input.PasswordlessLogin.UrlWithLinkCode = &newUrl
                            return ogSendEmail(input, userContext)
                        }
                        return originalImplementation
                    },
                },
            }),
        },
    })
}

from supertokens_python import init, InputAppInfo
from supertokens_python.recipe.thirdpartypasswordless.types import EmailDeliveryOverrideInput, EmailTemplateVars
from supertokens_python.recipe import thirdpartypasswordless
from typing import Dict, Any
from supertokens_python.ingredients.emaildelivery.types import EmailDeliveryConfig

def custom_email_deliver(original_implementation: EmailDeliveryOverrideInput) -> EmailDeliveryOverrideInput:
    original_send_email = original_implementation.send_email

    async def send_email(template_vars: EmailTemplateVars, user_context: Dict[str, Any]) -> None:
        assert template_vars.url_with_link_code is not None
        # By default: `${websiteDomain}/${websiteBasePath}/verify`
        template_vars.url_with_link_code = template_vars.url_with_link_code.replace(
            "http://localhost:3000/auth/verify", "http://localhost:3000/custom/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=[
        thirdpartypasswordless.init(
            email_delivery=EmailDeliveryConfig(override=custom_email_deliver)
        )
    ]
)

Frontend change#

ReactJS
Angular
Vue
Plain JavaScript
React Native

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.

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

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 ThirdPartyPasswordless from "supertokens-auth-react/recipe/thirdpartypasswordless";

ThirdPartyPasswordless.init({
    contactMethod: "EMAIL", // This example will work with any contactMethod
    linkClickedScreenFeature: {
        disableDefaultUI: true
    },
});

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

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