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

Frontend change#

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 />
}
Which UI do you use?
Custom UI
Pre built UI