Skip to main content

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

Authentication Testing Guide

⚠️ CRITICAL WARNING: Email Bounce Issues​

NEVER use fake email addresses for testing! Your project is at risk of losing email sending privileges due to high bounce rates.

Safe Testing Emails​

  • Primary: ryan@goldfish.io
  • For multiple tests: ryan+test1@goldfish.io, ryan+test2@goldfish.io, etc.
  • The +suffix pattern delivers all emails to ryan@goldfish.io

Why This Matters​

  • Fake emails cause bounces
  • High bounce rates suspend email sending
  • Your app becomes unusable without email verification

Current Setup​

Common Issues & Solutions​

1. "Failed to fetch" Error​

This usually means:

  • Wrong Supabase URL or API key
  • CORS issues
  • Network connectivity problems

Fix:

# Check your .env file has correct values
cat .env | grep SUPABASE

2. Test the Supabase Connection​

Create a test file to verify connection:

// src/test-auth.ts
import { supabase } from './lib/supabase'

async function testAuth() {
  console.log('Testing Supabase connection...')

  // Test 1: Check if we can connect
  const {
    data: { session },
  } = await supabase.auth.getSession()
  console.log('Current session:', session)

  // Test 2: Try to sign up a test user
  const testEmail = `test-${Date.now()}@example.com`
  const { data, error } = await supabase.auth.signUp({
    email: testEmail,
    password: 'TestPassword123!',
  })

  if (error) {
    console.error('Signup error:', error)
  } else {
    console.log('Signup successful:', data)
  }
}

testAuth()

Run with: npx tsx src/test-auth.ts

3. Check Supabase Dashboard Settings​

  1. Go to https://supabase.com/dashboard/project/mgrdtn4/settings/api
  2. Verify your API keys match
  3. Check Authentication settings:

4. Enable Supabase Logs​

Add this to see detailed errors:

// src/lib/supabase.ts
export const supabase = createClient(env.supabase.url, env.supabase.anonKey, {
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: true,
    debug: true, // Add this
  },
})

5. Test Authentication Flow​

  1. Test Signup:

    • Go to http://localhost:3000
    • Fill in the form with a real email you can access
    • Check browser console for errors
    • Check Network tab for failed requests

  2. Check Email Settings:

    • In Supabase Dashboard > Authentication > Email Templates
    • Make sure email templates are configured
    • Check spam folder for verification emails

  3. Test with Supabase Auth UI (temporary):

    npm install @supabase/auth-ui-react @supabase/auth-ui-shared

    Create a test page to use Supabase's built-in auth UI to verify your setup works.

6. Common Error Messages​

  • "Invalid API key": Your anon key is wrong
  • "Failed to fetch": Network/CORS issue or wrong URL
  • "Email not confirmed": Need to verify email first
  • "User already registered": Email already exists

7. Debug Checklist​

  • Correct Supabase URL in .env
  • Correct Supabase anon key in .env
  • Site URL configured in Supabase dashboard
  • Redirect URLs configured in Supabase dashboard
  • Email templates enabled in Supabase
  • No typos in environment variable names
  • App is actually running (check with ps aux | grep vite)
  • Using correct port (3000, not 3001)

8. Test with cURL​

Test your Supabase instance directly:

curl -X POST https://mgrdtn4.supabase.co/auth/v1/signup \
  -H "apikey: YOUR_ANON_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "email": "test@example.com",
    "password": "testpassword123"
  }'

Replace YOUR_ANON_KEY with your actual key from .env