Skip to main content

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.

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({ /* ... */ })
    ]
});

Frontend change​

What type of UI are you using?

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:

import Passwordless from "supertokens-auth-react/recipe/passwordless";

Passwordless.init({
    contactMethod: "EMAIL", // This example will work with any contactMethod
    linkClickedScreenFeature: {
        disableDefaultUI: true
    },
});
import React from "react";
import { LinkClicked } from "supertokens-auth-react/recipe/passwordless/prebuiltui";
function CustomLinkClickedScreen () {
    return <LinkClicked />
}