Which UI do you use?

Custom UI

Pre built UI

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

Important

For other backend frameworks, you can follow our guide on how to spin up a separate server configured with the SuperTokens backend SDK to authenticate requests and issue session tokens.

GoLang

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
            // 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) {
                            return originalImplementation.sendEmail({
                                ...input,
                                urlWithLinkCode: input.urlWithLinkCode?.replace(
                                    // This is: `${websiteDomain}${websiteBasePath}/verify`
                                    "http://localhost:3000/auth/verify",
                                    "http://your.domain.com/your/path"
                                )
                            })
                        }
                    }
                }
            }
        }),
        Session.init({ /* ... */ })
    ]
});

Python

import (
    "strings"

    "github.com/supertokens/supertokens-golang/ingredients/emaildelivery"
    "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{
                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
                    },
                },
            }),
        },
    })
}

Other Frameworks

from supertokens_python import init, InputAppInfo
from supertokens_python.recipe.passwordless.types import EmailDeliveryOverrideInput, EmailTemplateVars
from supertokens_python.recipe import passwordless
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=[
        passwordless.init(
            email_delivery=EmailDeliveryConfig(override=custom_email_deliver)
        )
    ]
)

Frontend change

ReactJS

When the user clicks the magic link, you need to build your own UI on that page to handle the link clicked. You also need to disable the pre built UI that was provided by our SDK for the link clicked screen as shown below:

// this goes in the auth route config of your frontend app (once the pre built UI script has been loaded)

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

Angular

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: {
        disableDefaultUI: true
    },
});

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

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

Vue

When the user clicks the magic link, you need to build your own UI on that page to handle the link clicked. You also need to disable the pre built UI that was provided by our SDK for the link clicked screen as shown below:

// this goes in the auth route config of your frontend app (once the pre built UI script has been loaded)

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