Skip to main content

Customize the magic link

See how to change the magic link or how to generate it manually

Override the email delivery backend function

You can change the URL of Magic Links by providing overriding the email delivery configuration 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: `<YOUR_WEBSITE_DOMAIN>/auth/verify`
"http://localhost:3000/auth/verify",
"http://your.domain.com/your/path"
)
})
}
}
}
}
}),
Session.init({ /* ... */ })
]
});

Change the frontend page

What type of UI are you using?

When the user clicks the magic link, you need to render the LinkClicked component that exported by the SDK on that page. By default, this already happens on the <YOUR_WEBSITE_DOMAIN>/auth/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 />
}

You can use the backend SDK to generate magic links as shown below:

import Passwordless from "supertokens-node/recipe/passwordless";

async function createMagicLink(email: string) {
const magicLink = await Passwordless.createMagicLink({email, tenantId: "public"});

console.log(magicLink);
}
Multi Tenancy

Notice that you pass the "public" tenantId to the function call above - which is the default tenantId.

If you are using the multi tenancy feature, you can pass in another tenantId which SuperTokens embeds in the link. This ensures that when the user clicks on the link and signs up, they sign up to the tenant you want to give them access to.

Note that the generated link uses the configured websiteDomain from the appInfo object (in supertokens.init), however, you can change the domain of the generated link to match that of the tenant ID.

You can change how long a user can use an OTP or a Magic Link to log in by changing the passwordless_code_lifetime core configuration value. You configure this value in milliseconds and it defaults to 900000 (15 minutes).

caution

Each new OTP / magic link generated, either by opening a new browser or by clicking on the "Resend" button, has a lifetime according to the passwordless_code_lifetime setting.

docker run \
-p 3567:3567 \
// highlight-start
-e PASSWORDLESS_CODE_LIFETIME=60000 \
// highlight-end
-d registry.supertokens.io/supertokens/supertokens-<db name>

See also