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

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.

Angular

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

Vue

What type of UI are you using?

Prebuilt UICustom UI

Plain JavaScript

What type of UI are you using?

Prebuilt UICustom UI

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: {
        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 />
}