File length: 5290
# Authentication - Passwordless - Customize the magic link
Source: https://supertokens.com/docs/authentication/passwordless/customize-the-magic-link
## 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.
```tsx
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",
// highlight-start
emailDelivery: {
// highlight-start
override: (originalImplementation) => {
return {
...originalImplementation,
sendEmail: async function (input) {
return originalImplementation.sendEmail({
...input,
urlWithLinkCode: input.urlWithLinkCode?.replace(
// This is: `/verify`
"http://localhost:3000/auth/verify",
"http://your.domain.com/your/path"
)
})
}
}
}
}
// highlight-end
}),
Session.init({ /* ... */ })
]
});
```
```go
Passwordless.init({
contactMethod: "EMAIL", // This example will work with any contactMethod
linkClickedScreenFeature: {
disableDefaultUI: true
},
});
```
#### 2. Render the link clicked screen on your custom route:
```tsx
function CustomLinkClickedScreen () {
return
}
```
When the user clicks the magic link, you need to build your own UI on that page to handle the link clicked. You also need to disable the pre-built UI provided by the SDK for the link clicked screen as shown below:
```tsx
// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)
supertokensUIPasswordless.init({
contactMethod: "EMAIL", // This example will work with any contactMethod
linkClickedScreenFeature: {
disableDefaultUI: true
},
});
```
:::info Caution
Not applicable since you do not use the pre-built UI
:::
---
## Generate the link manually
You can use the backend SDK to generate magic links as shown below:
```tsx
async function createMagicLink(email: string) {
const magicLink = await Passwordless.createMagicLink({email, tenantId: "public"});
console.log(magicLink);
}
```
```go
:::
---
## 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).
:::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.
:::
```bash
docker run \
-p 3567:3567 \
// highlight-start
-e PASSWORDLESS_CODE_LIFETIME=60000 \
// highlight-end
-d supertokens/supertokens-
```
```yaml
# You need to add the following to the config.yaml file.
# The file path can be found by running the "supertokens --help" command
passwordless_code_lifetime: 60000
```
- Navigate to your SuperTokens managed service dashboard, and click on the Edit Configuration button.
- In there, change the values of the following fields, and click on save.
```yaml
passwordless_code_lifetime: 60000
```
---