docs: update email template guide (#18594)

This commit is contained in:
Kang Ming authored and GitHub committed 2023-10-30 13:13:16 -04:00
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
// ...
```