Customize the magic link
See how to change the magic link or how to generate it manually
Change the magic link URL
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:
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 />
}
Generate the link manually
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);
}
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.
Change the link lifetime
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).
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>