Skip to main content

Changing the Magic Link URL

Backend change#

You can change the URL of Magic Links by providing a callback 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            createAndSendCustomEmail: async (input) => console.log(input),            // This example works with the "USER_INPUT_CODE_AND_MAGIC_LINK" and "MAGIC_LINK" flows.            flowType: "USER_INPUT_CODE_AND_MAGIC_LINK", 
            // Customize information in the URL.            // By default: `${websiteDomain}/${websiteBasePath}/verify`            getLinkDomainAndPath: async (contactInfo, context) => {                // contactInfo is {email: string} | {phoneNumber: string}                return "https://example.com/custom/auth/verify"            }        }),        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: {        disableDefaultImplementation: true    },});

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

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