mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
docs: update email template guide (#18594)
This commit is contained in:
1 parent
2a3d243a34
commit
b8eddfeb52
1 file changed
+8
-6
@@ -2,7 +2,8 @@ import Layout from '~/layouts/DefaultGuideLayout'
|
||||
|
||||
export const meta = {
|
||||
title: 'Email Templates',
|
||||
description: 'Learn how to configure the email templates on Supabase.',
|
||||
description: 'Learn how to manage the email templates in Supabase.',
|
||||
subtitle: 'Learn how to manage the email templates in Supabase.',
|
||||
}
|
||||
|
||||
You can customize the email messages used for the authentication flows. You can edit the following email templates:
|
||||
@@ -22,13 +23,14 @@ The templating system provides the following variables for use:
|
||||
| `{{ .ConfirmationURL }}` | Contains the confirmation URL. For example, a signup confirmation URL would look like: `https://project-ref.supabase.co/auth/v1/verify?token={{ .TokenHash }}&type=signup&redirect_to=https://example.com/path` . |
|
||||
| `{{ .Token }}` | Contains a 6-digit One-Time-Password (OTP) that can be used instead of the `{{. ConfirmationURL }}` . |
|
||||
| `{{ .TokenHash }}` | Contains a hashed version of the `{{ .Token }}`. This is useful for constructing your own email link in the email template. |
|
||||
| `{{ .SiteURL }}` | Contains your application's Site URL. This can be configured in your project's [authentication settings](https://supabase.com/dashboard/project/_/auth/url-configuration). |
|
||||
| `{{ .SiteURL }}` | Contains your application's Site URL. This can be configured in your project's [authentication settings](/dashboard/project/_/auth/url-configuration). |
|
||||
| `{{ .RedirectTo }}` | Contains the redirect URL passed when `signUp`, `signInWithOtp`, `signInWithOAuth`, `resetPasswordForEmail` or `inviteUserByEmail` is called. The redirect URL allow list can be configured in your project's [authentication settings](/dashboard/project/_/auth/url-configuration). |
|
||||
|
||||
## Limitations
|
||||
|
||||
### Email Prefetching
|
||||
|
||||
Certain email providers may have spam detection or other security features that prefetch URL links from incoming emails.
|
||||
Certain email providers may have spam detection or other security features that prefetch URL links from incoming emails (e.g. [Safe Links in Microsoft Defender for Office 365](https://learn.microsoft.com/en-us/microsoft-365/security/office-365-security/safe-links-about?view=o365-worldwide)).
|
||||
In this scenario, the `{{ .ConfirmationURL }}` sent will be consumed instantly which leads to a "Token has expired or is invalid" error.
|
||||
To guard against this:
|
||||
|
||||
@@ -56,17 +58,17 @@ If you intend to use [Server-side rendering](/docs/guides/auth/server-side-rende
|
||||
You can customize the email link in the email template to redirect the user to a server-side endpoint successfully. For example:
|
||||
|
||||
```html
|
||||
<a href="https://api.example.com/v1/authenticate?token_hash={{ .TokenHash }}&type=invite"
|
||||
<a href="https://api.example.com/v1/authenticate?token_hash={{ .TokenHash }}&type=invite&redirect_to={{ .RedirectTo }}"
|
||||
>Accept the invite
|
||||
</a>
|
||||
```
|
||||
When the user clicks on the link, the request will hit `https://api.example.com/v1/authenticate` and you can grab the `token_hash` and `type` query parameters from the URL. Then, you can call the [`verifyOtp`](/docs/reference/javascript/auth-verifyotp) method to get back an authenticated session before redirecting the user back to the client. Since the `verifyOtp` method makes a `POST` request to Supabase Auth to verify the user, the session will be returned in the response body, which can be read by the server. For example:
|
||||
When the user clicks on the link, the request will hit `https://api.example.com/v1/authenticate` and you can grab the `token_hash`, `type` and `redirect_to` query parameters from the URL. Then, you can call the [`verifyOtp`](/docs/reference/javascript/auth-verifyotp) method to get back an authenticated session before redirecting the user back to the client. Since the `verifyOtp` method makes a `POST` request to Supabase Auth to verify the user, the session will be returned in the response body, which can be read by the server. For example:
|
||||
|
||||
```js
|
||||
const { token_hash, type } = Object.fromEntries(new URLSearchParams(window.location.search))
|
||||
const { data: { session }, error } = await supabase.auth.verifyOtp({ token_hash, type })
|
||||
|
||||
// subsequently redirect the user back to the client
|
||||
// subsequently redirect the user back to the client using the redirect_to param
|
||||
// ...
|
||||
|
||||
```
|
||||
|
||||
Reference in new issue
Block a user