Transactional & Marketing Emails

All email communications sent by the MTC platform, including authentication emails managed through Supabase Auth and future marketing/engagement emails sent via a dedicated email service.

Overview

MTC uses Supabase Auth's built-in email system for all transactional authentication emails. Six custom HTML templates have been created to match the MTC brand identity, featuring a dark theme with the platform's cyan-to-teal gradient CTA buttons, the MTC logo, and consistent footer branding. All templates use table-based layouts for maximum email client compatibility.

Each email template includes: a branded header with the MTC logo and wordmark, a centered card container with an icon, heading, descriptive text, a gradient CTA button, expiry notice, a divider, and a fallback plain-text link. The recovery and email-change templates additionally include a large monospaced verification code display. All links expire after 1 hour.

Future phases will introduce marketing emails (welcome series, engagement re-activation, program announcements) and trainer notification emails (new lead alerts, session reminders, payment confirmations). These will require integration with a dedicated email delivery service such as Resend or SendGrid, along with unsubscribe management and CAN-SPAM compliance.

User Stories

All Users

As a new user, I want to receive a confirmation email after signup so that I can verify my email address and access the platform.

As a user who forgot their password, I want to receive a reset email with a verification code and link so that I can regain access to my account.

As a user, I want to sign in via a magic link so that I can access my account without remembering a password.

As a user changing my email, I want to receive a confirmation at the new address so that my email is verified before the change takes effect.

As a user performing a sensitive action, I want to receive a reauthentication code so that my identity is confirmed before the action proceeds.

As an invited user, I want to receive a branded invitation email so that I can accept and create my account seamlessly.

Trainers (Future)

As a trainer, I want to receive email alerts for new leads so that I can respond quickly and convert potential clients.

As a trainer, I want to receive payment confirmation emails so that I have records of program purchases and subscription billing.

Email Templates

Template File Subject Line CTA Button Redirect Auth Code
Email Confirmation confirmation.html Confirm your signup Verify Email Address /dashboard —
Password Recovery recovery.html Reset your password Reset Password /reset-password Yes
Magic Link magic-link.html Your magic link Sign In /dashboard —
Invitation invite.html You've been invited Accept Invitation /dashboard —
Email Change email-change.html Confirm email change Confirm Email Change /settings Yes
Reauthentication reauthentication.html Confirm reauthentication — (code only) — Yes

Template Design Specifications

Layout

  • Table-based for email client compat
  • Max-width: 480px centered
  • 40px horizontal padding
  • Dark background: #09090B

Card Container

  • Background: #18181B
  • Border: 1px solid #27272A
  • Border-radius: 12px
  • Padding: 40px 32px

CTA Button

  • Gradient: #06B6D4 → #14B8A6
  • Padding: 12px 32px
  • Border-radius: 8px
  • Font: 14px, weight 600

Verification Code

  • Font: monospace, 32px, weight 700
  • Letter-spacing: 0.3em
  • Dark inset background with border
  • Used by recovery, email-change, reauth

Icon Badges

  • 48px circle, cyan background (10% opacity)
  • Confirmation: checkmark
  • Recovery: lock icon
  • Magic link: sparkles
  • Invite: wave, Reauth: key

Template Variables

  • {{ .SiteURL }} — base URL
  • {{ .TokenHash }} — auth token
  • {{ .Token }} — OTP code
  • {{ .Email }} — target email

Screens & Routes

/callback Auth callback handler — processes token_hash from email links
/reset-password Password reset form — target of recovery email
/login Login page with email/password and magic link options
/signup Registration page — triggers confirmation email
/settings Account settings — email change triggers email-change template

Acceptance Criteria

  • All 6 Supabase Auth email templates use custom branded HTML matching the MTC design system
  • Emails render correctly in major email clients (Gmail, Outlook, Apple Mail)
  • CTA buttons link to correct callback URLs with proper token_hash and type parameters
  • Fallback plain-text links are provided below every CTA button
  • Verification code display is large, monospaced, and easy to copy for recovery/email-change/reauth
  • Marketing email templates (welcome series, engagement re-activation) are planned but not yet built
  • Trainer notification emails (new leads, payment confirmations) are planned but not yet built
  • Dedicated email service integration (Resend/SendGrid) is planned for post-MVP

API Surface

Supabase Auth (Built-in)

POST supabase.auth.signUp() Triggers confirmation.html
POST supabase.auth.resetPasswordForEmail() Triggers recovery.html
POST supabase.auth.signInWithOtp() Triggers magic-link.html
POST supabase.auth.updateUser({ email }) Triggers email-change.html
POST supabase.auth.admin.inviteUserByEmail() Triggers invite.html

Server Functions

FN signupFn src/api/auth/functions.ts
FN forgotPasswordFn src/api/auth/functions.ts
FN resetPasswordFn src/api/auth/functions.ts

React Query Hooks

HOOK useSignup() src/api/auth/hooks.ts
HOOK useForgotPassword() src/api/auth/hooks.ts
HOOK useResetPassword() src/api/auth/hooks.ts

Current Status

Built

Auth Email Templates

All 6 Supabase Auth templates are implemented with custom MTC branding: confirmation, recovery, magic-link, invite, email-change, reauthentication.

Built

Callback Handler

Auth callback route processes token_hash parameters from email links and redirects to the appropriate page.

Built

Password Reset Flow

Full forgot-password to reset-password flow with verification code support.

Planned

Marketing Emails

Welcome series, engagement re-activation, program announcements, and newsletter functionality.

Planned

Notification Emails

Trainer lead alerts, session reminders, payment receipts, and client milestone notifications.

Not Started

Email Service Provider

Integration with Resend or SendGrid for non-auth emails, unsubscribe management, and CAN-SPAM compliance.