Supabase email templates: Complete auth set ready in 5 minutes
Transform Supabase default emails into professional branded templates. Design in Figma, export production-ready HTML in 5 minutes. Includes password reset, magic link, signup confirmation, email change, and invitation templates.
Why use custom Supabase email templates?
Supabase default emails have no design and don't match your brand. With Marka Email Generator, design professional authentication emails in Figma and export production-ready HTML in one click. All Supabase variables are pre-configured. Just paste into your dashboard.
12 templates covering all Supabase Auth flows
Complete authentication set included: signup confirmation, password reset, magic link, email verification, email change, password recovery, and user invitations. Design once in Figma, export HTML, deploy to Supabase in 5 minutes.
All Supabase variables pre-configured
{{ .ConfirmationURL }}, {{ .Token }}, {{ .Email }}, {{ .SiteURL }} and all other Supabase Auth variables are already included and properly formatted in every template. No syntax to learn or documentation to read.
Automatic dark mode support
Works across Apple Mail, Gmail, Outlook, and all major email clients. Templates automatically adapt to light and dark themes without any extra configuration.
Tested across all major email clients
Verified compatibility with Gmail, Outlook (including legacy versions), Apple Mail, Yahoo Mail, and mobile email apps. Table-based HTML ensures consistent rendering. Fully responsive for mobile devices.
Full design control in Figma
Customize colors, typography, logos, layouts, spacing, and copy without touching code. Visual editing means anyone on your team can make updates. No HTML or CSS knowledge required.
Export production-ready HTML instantly
One-click export generates clean, table-based HTML optimized for email clients. Copy the code and paste directly into your Supabase Dashboard. Your custom emails go live immediately.
Create custom Supabase emails: step by step
Follow this complete guide to design, customize, and deploy professional Supabase authentication emails. From Figma template to live emails in your dashboard in under 5 minutes.
Watch the complete video tutorial
See the entire process from start to finish. This 5-minute video covers duplicating templates, customizing in Figma, exporting HTML, and deploying to your Supabase project.
Duplicate free Supabase email templates from Figma
Get our complete Supabase email template library from Figma Community. Includes all 12 authentication email templates: signup confirmation, magic link, password reset, email verification, email change confirmation, password recovery, and user invitation emails. All templates are pre-configured with Supabase variables.
Duplicate Supabase templatesInstall Marka Email Generator plugin for Figma
Install the Marka Email Generator plugin. This plugin exports your email designs as clean, table-based HTML code that works perfectly with Supabase and all major email clients.
Install the pluginCustomize Supabase email templates with your brand
Edit colors, fonts, logos, and layouts visually in Figma
Make the templates your own without writing any code. Customize every visual element directly in Figma:
- Replace placeholder logo with your company logo
- Update colors to match your brand palette
- Customize fonts and typography styles
- Adjust button styles, spacing, and layouts
- Edit email copy for each authentication template
- Add or remove sections as needed
Export production-ready HTML with one click
One-click export generates production-ready HTML with Supabase variables
Select your customized email template in Figma and click export in the Marka plugin. The plugin generates clean HTML code optimized for email clients. All Supabase variables like are preserved and properly formatted.
Deploy to your Supabase project dashboard
Deploy custom emails by pasting HTML into Supabase Dashboard
Copy the exported HTML code and paste it into your Supabase Dashboard. Navigate to Authentication → Email Templates, select the template type (e.g., "Confirm signup"), paste your HTML, and save. Your custom branded emails are now live and will be sent automatically by Supabase Auth.
Supabase email variables guide
All templates include Supabase Auth variables that automatically populate with user data. No setup required—just customize the design and the variables work immediately.
Common Variables:
{{ .ConfirmationURL }} | Contains the confirmation URL for email verification. Example: https://project-ref.supabase.co/auth/v1/verify?token={{ .TokenHash }}&type=email&redirect_to=https://example.com/path |
{{ .Token }} | Contains a 6-digit One-Time-Password (OTP) that can be used instead of the ConfirmationURL for passwordless authentication |
{{ .TokenHash }} | Contains a hashed version of the Token. Use this for constructing custom email verification links in your templates |
{{ .SiteURL }} | Contains your application Site URL configured in your Supabase project authentication settings. Use this to link back to your app |
{{ .RedirectTo }} | Contains the redirect URL passed when calling signUp, signInWithOtp, signInWithOAuth, resetPasswordForEmail, or inviteUserByEmail functions |
{{ .Data }} | Contains metadata from auth.users.user_metadata. Use this to personalize email messages with user-specific information like name or preferences |
{{ .Email }} | Contains the user email address. Empty when linking an email address to an anonymous user account |
{{ .NewEmail }} | Contains the new email address when a user is changing their email. Used in email change confirmation templates |
Frequently asked questions
Do I need coding knowledge to use these Supabase email templates?
No coding required! Design your templates visually in Figma, then export production-ready HTML with one click using the Marka Email Generator plugin. All Supabase variables are pre-configured. You just customize colors, logos, and text without touching any code.
Are these templates compatible with all Supabase authentication flows?
Yes! The template library includes all 12 Supabase Auth email types: signup confirmation, magic link, password reset, email verification, email change confirmation, password recovery, user invitation, and more. Every authentication flow is covered.
How do I customize the Supabase email templates?
Open the templates in Figma and customize everything visually: change colors, update fonts, replace logos, edit layouts, modify button styles, and rewrite email copy. No HTML or CSS knowledge needed. When you're done, export with the Marka plugin in one click.
Do these templates support dark mode in email clients?
Yes! All templates include automatic dark mode support. They adapt to light and dark themes in Apple Mail, Gmail, Outlook. No extra configuration needed.
How do I add custom email templates to my Supabase project?
After exporting HTML from Figma: (1) Open your Supabase Dashboard, (2) Go to Authentication → Email Templates, (3) Select the template type (e.g., "Confirm signup"), (4) Paste your HTML code, (5) Save. Your custom emails go live immediately. Takes about 2 minutes per template.
How can I test my Supabase email templates before deploying?
Use the built-in test email feature in Marka Email Generator to send test emails directly from Figma. Just enter your email address in the plugin and send a preview to see exactly how your template looks in your inbox.
Which email clients are supported by these templates?
The templates work across all major email clients: Gmail (desktop and mobile), Outlook (including legacy versions), Apple Mail, Yahoo Mail, Thunderbird, and mobile email apps. We use table-based layouts for maximum compatibility and test thoroughly across platforms.
Can I use these templates with self-hosted Supabase?
Yes! The templates work with both Supabase Cloud and self-hosted Supabase instances. Just paste the HTML into your email template configuration wherever your Supabase instance is hosted. The Supabase variables work the same way in both environments.
How long does it take to customize and deploy all templates?
Most teams customize the master template with their branding in 5-10 minutes. Exporting all 12 templates takes about 5 minutes. Pasting them into Supabase Dashboard takes another 5-10 minutes. Total time: 15-25 minutes to have all custom-branded authentication emails live in your project.
Related Templates
Ready to customize your Supabase emails?
Download free templates, customize with your brand in Figma, and export production-ready HTML. Everything you need to launch professional authentication emails is ready now.
More tools and resources for Supabase email customization
Explore guides, templates and workflows that help you design, customize and export Supabase Auth emails using Figma and the Marka HTML email generator.
HTML Email Generator for Supabase
Convert your Supabase Auth email designs in Figma into clean, production-ready HTML. Works with all 12 Supabase templates and preserves your variables.
Generate Supabase HTML emails →Export HTML from Figma Guide
A complete tutorial on exporting HTML emails from Figma. Includes Supabase-specific tips, dark mode guidance and best practices for Auth emails.
Read the guide →Email Template Library
Browse 100+ free Figma templates for newsletters, onboarding flows, transactional emails and more—all compatible with the HTML email generator.
Browse templates →Brand-Inspired Email Templates
Templates inspired by brands like Airbnb, Apple, Miro and Netflix. Great for Supabase transactional flows that need polished branding.
Browse brand templates →Klaviyo Email Templates
If you also run marketing flows in Klaviyo, explore templates with built-in personalization tags that export cleanly from Figma.
Explore Klaviyo templates →