Skip to content

Email Templates

Jump to bottom
ThanuMahee12 edited this page Oct 19, 2025 · 1 revision

Email Templates

Customize Firebase Authentication email templates for a professional look.

Overview

Firebase sends automated emails for:

  • ✉️ Email verification
  • 🔐 Password reset
  • 📧 Email address change
  • ⚠️ SMS verification (Blaze plan only)

You can customize these templates in the Firebase Console.

Customizing Email Templates

Step 1: Access Email Templates

  1. Go to Firebase Console
  2. Select your project
  3. Click Authentication in the left sidebar
  4. Click the Templates tab
  5. Select the email type you want to customize

Step 2: Edit Template

Available email types:

  • Email address verification
  • Password reset
  • Email address change revocation
  • SMS verification (Blaze plan only)

Step 3: Customize Content

You can customize:

  • From name - Your app/company name
  • Reply-to email - Where replies go
  • Subject line - Email subject
  • Email body - HTML template

Email Verification Template

Default Template

Firebase provides a basic template. Here's how to make it professional:

Custom Template Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Verify Your Email</title>
</head>
<body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; padding: 20px;">
  <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 30px; text-align: center; border-radius: 10px 10px 0 0;">
    <h1 style="color: white; margin: 0;">Verify Your Email</h1>
  </div>

  <div style="background: #f7f7f7; padding: 30px; border-radius: 0 0 10px 10px;">
    <p>Hello %DISPLAY_NAME%,</p>

    <p>Thank you for creating an account with us! To complete your registration, please verify your email address by clicking the button below:</p>

    <div style="text-align: center; margin: 30px 0;">
      <a href="%LINK%" style="background: #667eea; color: white; padding: 15px 30px; text-decoration: none; border-radius: 5px; display: inline-block; font-weight: bold;">Verify Email Address</a>
    </div>

    <p>Or copy and paste this link into your browser:</p>
    <p style="background: white; padding: 15px; border-radius: 5px; word-break: break-all;">%LINK%</p>

    <p>This link will expire in 24 hours.</p>

    <p>If you didn't create an account with us, please ignore this email.</p>

    <hr style="border: none; border-top: 1px solid #ddd; margin: 30px 0;">

    <p style="font-size: 12px; color: #666; text-align: center;">
      This is an automated email. Please do not reply.<br>
      © 2025 Your App Name. All rights reserved.
    </p>
  </div>
</body>
</html>

Available Variables

  • %LINK% - Verification/reset link
  • %EMAIL% - User's email address
  • %DISPLAY_NAME% - User's display name (if set)
  • %APP_NAME% - Your Firebase project name

Password Reset Template

Custom Template Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reset Your Password</title>
</head>
<body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; padding: 20px;">
  <div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); padding: 30px; text-align: center; border-radius: 10px 10px 0 0;">
    <h1 style="color: white; margin: 0;">🔐 Reset Your Password</h1>
  </div>

  <div style="background: #f7f7f7; padding: 30px; border-radius: 0 0 10px 10px;">
    <p>Hello,</p>

    <p>We received a request to reset the password for your account associated with <strong>%EMAIL%</strong>.</p>

    <p>Click the button below to reset your password:</p>

    <div style="text-align: center; margin: 30px 0;">
      <a href="%LINK%" style="background: #f5576c; color: white; padding: 15px 30px; text-decoration: none; border-radius: 5px; display: inline-block; font-weight: bold;">Reset Password</a>
    </div>

    <p>Or copy and paste this link into your browser:</p>
    <p style="background: white; padding: 15px; border-radius: 5px; word-break: break-all;">%LINK%</p>

    <p><strong>Important:</strong> This link will expire in 1 hour.</p>

    <div style="background: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; margin: 20px 0; border-radius: 5px;">
      <p style="margin: 0;"><strong>⚠️ Security Notice:</strong></p>
      <p style="margin: 10px 0 0 0;">If you didn't request a password reset, please ignore this email and your password will remain unchanged.</p>
    </div>

    <hr style="border: none; border-top: 1px solid #ddd; margin: 30px 0;">

    <p style="font-size: 12px; color: #666; text-align: center;">
      This is an automated email. Please do not reply.<br>
      © 2025 Your App Name. All rights reserved.
    </p>
  </div>
</body>
</html>

Email Change Revocation Template

Custom Template Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email Address Change</title>
</head>
<body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; padding: 20px;">
  <div style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); padding: 30px; text-align: center; border-radius: 10px 10px 0 0;">
    <h1 style="color: white; margin: 0;">⚠️ Email Address Changed</h1>
  </div>

  <div style="background: #f7f7f7; padding: 30px; border-radius: 0 0 10px 10px;">
    <p>Hello,</p>

    <p>The email address for your account was recently changed to <strong>%NEW_EMAIL%</strong>.</p>

    <p>If you made this change, you can safely ignore this email.</p>

    <div style="background: #f8d7da; border-left: 4px solid #dc3545; padding: 15px; margin: 20px 0; border-radius: 5px;">
      <p style="margin: 0;"><strong>⚠️ Didn't make this change?</strong></p>
      <p style="margin: 10px 0 0 0;">If you didn't authorize this email change, click the button below immediately to revert it and secure your account.</p>
    </div>

    <div style="text-align: center; margin: 30px 0;">
      <a href="%LINK%" style="background: #dc3545; color: white; padding: 15px 30px; text-decoration: none; border-radius: 5px; display: inline-block; font-weight: bold;">Revert Email Change</a>
    </div>

    <p>Or copy and paste this link into your browser:</p>
    <p style="background: white; padding: 15px; border-radius: 5px; word-break: break-all;">%LINK%</p>

    <p>This link will expire in 48 hours.</p>

    <hr style="border: none; border-top: 1px solid #ddd; margin: 30px 0;">

    <p style="font-size: 12px; color: #666; text-align: center;">
      This is an automated email. Please do not reply.<br>
      © 2025 Your App Name. All rights reserved.
    </p>
  </div>
</body>
</html>

Sender Configuration

Configure Sender Details

In Firebase Console → Authentication → Templates:

  1. From name: Your app/company name

    • Example: "MyApp Team"
    • Example: "Your Company Name"

  2. Reply-to email: Your support email

Domain Authentication (Advanced)

For better deliverability, authenticate your domain:

  1. Go to Firebase Console → Project Settings
  2. Under "Public-facing name", add your domain
  3. Configure SPF and DKIM records in your DNS

Custom Action Handlers

For complete control, create custom email action handlers.

Step 1: Create Custom Handler Page

Create public/auth-action.html:

<!DOCTYPE html>
<html>
<head>
  <title>Email Action Handler</title>
  <script type="module">
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.0.0/firebase-app.js'
    import { getAuth, applyActionCode, verifyPasswordResetCode, confirmPasswordReset } from 'https://www.gstatic.com/firebasejs/10.0.0/firebase-auth.js'

    const firebaseConfig = {
      // Your config
    }

    const app = initializeApp(firebaseConfig)
    const auth = getAuth(app)

    const params = new URLSearchParams(window.location.search)
    const mode = params.get('mode')
    const code = params.get('oobCode')

    switch (mode) {
      case 'verifyEmail':
        await applyActionCode(auth, code)
        // Show success message
        break
      case 'resetPassword':
        // Show password reset form
        break
    }
  </script>
</head>
<body>
  <div id="message"></div>
</body>
</html>

Step 2: Configure Action URL

  1. Firebase Console → Authentication → Templates
  2. Click "Customize action URL"
  3. Enter: https://your-domain.com/auth-action

Email Deliverability Best Practices

1. Use Custom Domain

Using a custom domain (vs @firebaseapp.com) improves deliverability.

2. Authenticate Domain

Set up SPF, DKIM, and DMARC records.

3. Monitor Bounce Rates

Keep bounce rates low by:

  • Validating email addresses before signup
  • Removing invalid emails
  • Using double opt-in

4. Avoid Spam Triggers

  • Don't use all caps in subject lines
  • Avoid excessive punctuation
  • Include an unsubscribe option for marketing emails
  • Use proper HTML formatting

Testing Email Templates

Send Test Email

import { sendEmailVerification } from 'firebase/auth'

const sendTestVerification = async () => {
  const user = auth.currentUser
  if (user) {
    await sendEmailVerification(user)
    console.log('Verification email sent!')
  }
}

Check Spam Folder

Always check spam/junk folders when testing.

Test Across Email Clients

Test templates in:

  • Gmail
  • Outlook
  • Apple Mail
  • Yahoo Mail

Common Issues

Emails Not Received

  1. Check spam folder
  2. Verify email address is correct
  3. Check Firebase usage limits (100 emails/day on free tier)
  4. Verify domain authentication

Emails Marked as Spam

  1. Authenticate your domain
  2. Avoid spam trigger words
  3. Include physical address in footer
  4. Use professional email design

Template Not Updating

  1. Clear browser cache
  2. Wait 5-10 minutes for changes to propagate
  3. Send a test email to verify

Professional Email Design Tips

1. Keep It Simple

  • Use clean, minimal design
  • Limit colors to 2-3
  • Use plenty of white space

2. Mobile-Friendly

  • Use responsive design
  • Test on mobile devices
  • Use readable font sizes (14px minimum)

3. Clear Call-to-Action

  • Make buttons stand out
  • Use action-oriented text
  • Place CTA prominently

4. Include Branding

  • Add logo
  • Use brand colors
  • Include company name

Resources

Next: API Reference →

Firebase React Template | Made with ❤️ | GitHub | Report Issues

📖 Documentation

Getting Started

Configuration

Advanced Topics

Deployment

🔗 Quick Links

⚡ Tech Stack

  • React 19
  • Vite
  • Firebase 12
  • Redux Toolkit
  • React Router

Clone this wiki locally