What is a Supabase magic link email template?
A Supabase magic link email is sent when a user signs in with signInWithOtp() — instead of a password, the user clicks a link that logs them in directly. This template covers the email Supabase sends for that flow.
This template is designed in Figma and exports as custom HTML ready to paste into your Supabase Auth dashboard. All Supabase variables are pre-configured — customize your brand design, export, and go live in minutes.
The full Figma file with all 12 Supabase auth email templates (including this one) is available at the Supabase email templates hub →
Supabase variables used in this template
| Variable | Description |
|---|---|
{{ .ConfirmationURL }} |
The magic link URL — include this as the href on your CTA button |
{{ .Token }} |
6-digit OTP code — use when you want to show a code instead of a link |
{{ .TokenHash }} |
Hashed token for constructing custom verification URLs |
{{ .SiteURL }} |
Your app's site URL from Supabase Auth settings |
{{ .Email }} |
The user's email address |
For a complete variable reference, see the Supabase email variables guide.
How to add this template to Supabase
- Duplicate the Figma file and customize with your brand (logo, colors, copy)
- Open the Marka Email Generator plugin in Figma
- Select the magic link email frame and click Export HTML
- In your Supabase Dashboard: go to Authentication → Email Templates
- Select Magic Link from the template type list
- Paste your exported HTML into the Body field
- Click Save
Your custom magic link email goes live immediately for all new sign-in requests.
Customization tips
Button link
Make sure your CTA button links to {{ .ConfirmationURL }}. In Figma, set the button layer's link value to this variable — Marka will preserve it in the exported HTML.
OTP code alternative
If you prefer showing a 6-digit code instead of a clickable link, use {{ .Token }} in a styled text block. Some users find a code easier to use on mobile when switching between apps.
Expiry warning Magic links expire after the time set in your Supabase project (default: 1 hour). Consider adding a line like "This link expires in 60 minutes" to reduce support requests.
Preheader text Add a short preheader in Figma (e.g., "Your sign-in link is ready — click to log in"). It shows as preview text in the inbox.
Frequently asked questions
Can I use a custom domain for the magic link URL?
Yes. Set your Site URL in Supabase Auth settings to your custom domain. {{ .ConfirmationURL }} will use it automatically.
How do I test the magic link email before going live? Send a test email from Marka directly to your inbox to check rendering. Then trigger a real magic link sign-in in your Supabase project to verify the variables resolve correctly.
Does this template work with Supabase self-hosted? Yes. Paste the HTML into your self-hosted Supabase Auth email template configuration — it works the same way as Supabase Cloud.
