Skip to main content

Email Template Setup

This guide will help you set up and customize email templates for your application.

  1. Go to your Supabase dashboard
  2. Navigate to Authentication > Email Templates
  3. Select the "Magic Link" template
  4. Use the following template:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Access Your Account</title>
    <style>
      body {
        background-color: #f6f9fc;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Ubuntu, sans-serif;
        margin: 0;
        padding: 0;
      }
      .container {
        background-color: #ffffff;
        max-width: 600px;
        margin: 0 auto;
        padding: 40px 20px;
      }
      h1 {
        color: #333333;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        margin: 0 0 20px;
      }
      p {
        color: #333333;
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 20px;
      }
      .button-container {
        text-align: center;
        margin: 30px 0;
      }
      .footer {
        color: #8898aa;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid #e6e6e6;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Access Your Account</h1>
      <p>Hello,</p>
      <p>
        You've requested access to your account. Click the button below to log
        in:
      </p>
      <div class="button-container">
        <a
          href="{{ .SiteURL }}/api/auth/callback?token_hash={{ .TokenHash }}&type=magiclink&redirect_to={{ .RedirectTo }}"
          style="background-color: #0070f3; border: none; border-radius: 5px; color: #ffffff; display: inline-block; font-size: 16px; font-weight: bold; padding: 14px 28px; text-decoration: none; text-align: center; mso-hide: all;"
        >
          Log In
        </a>
      </div>
      <p>
        This link will expire in 24 hours for security reasons. If you didn't
        request this email, please ignore it.
      </p>
      <p>Best regards,</p>
      <p>The Team</p>
      <div class="footer">&copy; All rights reserved.</div>
    </div>
  </body>
</html>

2. Welcome Email Template​

  1. Navigate to Authentication > Email Templates
  2. Select the "Welcome" template
  3. Customize the content to match your brand

3. Password Reset Template​

  1. Navigate to Authentication > Email Templates
  2. Select the "Reset Password" template
  3. Update the content and styling

4. Email Change Template​

  1. Navigate to Authentication > Email Templates
  2. Select the "Change Email" template
  3. Customize the content

5. Test Email Templates​

  1. Use the "Send Test Email" feature in Supabase
  2. Verify all templates render correctly
  3. Test on different email clients
  4. Check mobile responsiveness

Next Steps​

  1. Configure SMTP settings
  2. Set up email monitoring
  3. Deploy to production