Skip to main content

Source: ocean/docs/SUPABASE_AUTH_CONFIGURATION.md | ✏️ Edit on GitHub

Supabase Authentication Configuration Guide

Current Issue​

The application is designed to use OTP (One-Time Password) codes, but Supabase is sending magic links by default. This causes a mismatch where:

  1. User signs up/logs in
  2. App redirects to /verify page expecting a 6-digit code
  3. Supabase sends a magic link via email
  4. User clicks the link and gets an error

Two Solutions​

Since the app is built for OTP flow, configure Supabase to send codes instead of links:

  1. Go to Supabase Dashboard

    • Navigate to: Authentication → Email Templates
    • Or direct link: https://supabase.com/dashboard/project/[YOUR_PROJECT_REF]/auth/email-templates

  2. Update ALL Email Templates

    For each template (Confirm signup, Magic Link, etc.), replace the email body with:

    <h2>Your verification code</h2>
    <p>Enter this code to continue:</p>
    <div
      style="background-color: #f4f4f5; border-radius: 6px; padding: 24px; margin: 20px 0; text-align: center;"
    >
      <p style="margin: 0; font-size: 32px; font-weight: bold; letter-spacing: 8px; color: #18181b;">
        {{ .Token }}
      </p>
    </div>
    <p style="color: #71717a; font-size: 14px;">This code expires in 5 minutes.</p>

  3. Important: Use {{ .Token }} NOT {{ .ConfirmationURL }}

If you want to support both flows:

  1. Update the Verify Page to detect if user came from a magic link:

    // Check if user was redirected from magic link
    const hashParams = new URLSearchParams(window.location.hash.substring(1))
    if (hashParams.get('access_token')) {
      // Handle magic link flow
      navigate({ to: '/auth/callback' })
    }

  2. Update Auth Service (already done) to include redirect URL:

    emailRedirectTo: `${window.location.origin}/auth/callback`

Testing​

Local Testing with Supabase CLI​

# Start Supabase locally
supabase start

# Access Inbucket for email testing
open http://localhost:54324

Production Testing​

  1. Sign up with a real email
  2. Check email (including spam folder)
  3. If using OTP: Enter the 6-digit code on /verify page
  4. If using magic link: Click the link in email

Common Issues​

  • Links expire in 5 minutes by default
  • Each link can only be used once
  • Check that the redirect URL matches your site URL in Supabase dashboard

Wrong Flow​

  • If app expects OTP but gets magic link: Update email templates
  • If app expects magic link but shows code input: Update the verify page logic

Supabase Dashboard Settings​

  1. Authentication → URL Configuration

    • Site URL: https://ocean-goldfish.vercel.app (production)
    • Redirect URLs: Add https://ocean-goldfish.vercel.app/auth/callback

  2. Authentication → Email Templates

    • Update all templates to use {{ .Token }} for OTP
    • Or keep {{ .ConfirmationURL }} for magic links

  3. Authentication → Providers → Email

    • Enable "Email provider"
    • Confirm email is enabled
    • Double opt-in can be disabled for easier testing

Environment Variables​

Ensure these are set correctly:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_anon_key

Quick Fix for Current Users​

If users are stuck with expired links:

  1. Have them request a new code/link from the login page
  2. Or manually confirm their email in Supabase dashboard:
    • Authentication → Users → Select user → Confirm email