Magic Link Authentication

Magic link authentication provides passwordless login using email verification codes sent through Supabase Auth.

Preview

How It Works

The magic link system uses Supabase's OTP (One-Time Password) functionality to authenticate users without requiring passwords.

Flow Overview

1. User enters email - User provides their email address on the login or registration page
2. OTP request - System calls supabase.auth.signInWithOtp() with the email
3. Email sent - Supabase sends a verification code to the user's email
4. User enters code - User inputs the 6-digit code from their email
5. Verification - System calls supabase.auth.verifyOtp() to validate the code
6. Authentication - Upon successful verification, user is authenticated and redirected

Implementation

The magic link feature is implemented across several components:

Login/Register Pages - Provide magic link tabs alongside traditional email/password forms

// Trigger magic link flow
const { error } = await supabase.auth.signInWithOtp({
  email: userEmail,
  options: {
    emailRedirectTo: `${window.location.origin}/auth/callback`
  }
})

OTP Composable - Handles sending and verifying codes

// Send OTP
const sendEmailOTP = async (email: string) => {
  const { error } = await supabase.auth.signInWithOtp({
    email,
    options: {
      shouldCreateUser: true,
      emailRedirectTo: `${window.location.origin}/auth/callback`
    }
  })
}

// Verify OTP
const verifyEmailOTP = async (email: string, token: string) => {
  const { data, error } = await supabase.auth.verifyOtp({
    email,
    token,
    type: 'email'
  })
}

Callback Handler - Processes authentication after email link click

// Handle auth callback
const { data, error } = await supabase.auth.getSession()
if (data.session && data.session.user) {
  // User authenticated, redirect to dashboard
  navigateTo('/dashboard')
}

Key Features

• Passwordless - No password required, just email verification
• Auto-registration - Creates new accounts automatically if user doesn't exist
• Resend protection - 60-second cooldown prevents spam
• Error handling - Comprehensive error messages for failed attempts
• Mobile responsive - Works across all devices

Configuration

Magic link behavior is controlled through Supabase Auth settings:

• Email templates - Customize the OTP email design in Supabase dashboard
• Redirect URLs - Configure allowed callback URLs in Supabase settings
• Rate limiting - Supabase automatically rate limits OTP requests

Security

• Time-limited codes - OTP codes expire after a set time period
• Single use - Each code can only be used once
• Rate limiting - Built-in protection against abuse
• Secure delivery - Codes sent through Supabase's secure email service