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 ThirdPartyPasswordless from "supertokens-node/recipe/thirdpartypasswordless";
import Session from "supertokens-node/recipe/session";

SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
ThirdPartyPasswordless.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 ThirdPartyPasswordless from "supertokens-auth-react/recipe/thirdpartypasswordless";

ThirdPartyPasswordless.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 { PasswordlessLinkClicked } from "supertokens-auth-react/recipe/thirdpartypasswordless";
function CustomLinkClickedScreen () {
return <PasswordlessLinkClicked />
}