meet-hub/otp-testing-guide.md

OTP Email Verification Testing Guide

Current Status

✅ Backend Working: Edge functions tested with curl and working ✅ Database Setup: Migrations applied, tables created ⚠️ Frontend Integration: Need to test and debug

What Should Happen

Registration Flow

1. User fills registration form (name, email, password)
2. Clicks "Daftar" (Register) button
3. Supabase Auth creates user account
4. Frontend calls send-auth-otp edge function
5. Edge function:
   • Generates 6-digit OTP
   • Stores in auth_otps table (15 min expiry)
   • Fetches email template from notification_templates
   • Sends email via Mailketing API
6. Frontend shows OTP input form
7. User receives email with 6-digit code
8. User enters OTP code
9. Frontend calls verify-auth-otp edge function
10. Edge function:
    • Validates OTP (not expired, not used)
    • Marks OTP as used
    • Confirms email in Supabase Auth
11. User can now login

Testing Checklist

1. Backend Verification (Already Done ✅)

Test edge function with curl:

curl -X POST https://lovable.backoffice.biz.id/functions/v1/send-auth-otp \
  -H "Authorization: Bearer YOUR_SERVICE_ROLE_KEY" \
  -H "Content-Type: application/json" \
  -d '{"user_id":"USER_UUID","email":"test@example.com"}'

Expected: {"success":true,"message":"OTP sent successfully"}

2. Frontend Testing (Do This Now)

Step 1: Open Browser DevTools

1. Open your browser
2. Press F12 (or Cmd+Option+I on Mac)
3. Go to Console tab
4. Go to Network tab

Step 2: Attempt Registration

1. Navigate to /auth page
2. Click "Belum punya akun? Daftar" (switch to registration)
3. Fill in:
   • Nama: Test User
   • Email: Your real email address
   • Password: Any password (6+ characters)
4. Click "Daftar" button

Step 3: Check Console Logs

You should see these logs in order:

Log 1:

SignUp result: {
  error: null,
  data: { user: {...}, session: null },
  hasUser: true,
  hasSession: false
}

If you see this → User creation succeeded ✅

Log 2:

User created successfully: {
  userId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  email: "your@email.com",
  session: null
}

If you see this → Proceeding to OTP sending ✅

Log 3:

Sending OTP request: {
  userId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  email: "your@email.com",
  hasSession: false
}

If you see this → OTP function is being called ✅

Log 4:

OTP response status: 200

If you see this → Edge function responded successfully ✅

Log 5:

OTP send result: { success: true, message: "OTP sent successfully" }

If you see this → Everything worked! 🎉

Step 4: Check Network Tab

1. In DevTools Network tab
2. Look for request to /functions/v1/send-auth-otp
3. Click on it
4. Check:
   • Status: Should be 200
   • Payload: Should contain {"user_id":"...", "email":"..."}
   • Response: Should be {"success":true,"message":"OTP sent successfully"}

3. Database Verification

After registration, check the database:

-- Check if OTP was created
SELECT * FROM auth_otps ORDER BY created_at DESC LIMIT 1;

-- Check if user was created
SELECT id, email, email_confirmed_at, created_at
FROM auth.users
WHERE email = 'your@email.com';

Expected:

• auth_otps table has 1 new row with your email
• auth.users table has your user with email_confirmed_at = NULL

4. Email Verification

1. Check your email inbox (and spam folder)
2. Look for email with subject like "Kode Verifikasi Email Anda"
3. Open email and find 6-digit code (e.g., "123456")
4. Go back to browser
5. Enter the 6-digit code in OTP form
6. Click "Verifikasi" button

Expected:

• Toast notification: "Verifikasi Berhasil - Email Anda telah terverifikasi"
• Form switches back to login mode

Debugging Common Issues

Issue 1: No Console Logs Appear

Symptoms: Submit form but nothing shows in console

Possible Causes:

1. Dev server not running → Run npm run dev
2. Code not reloaded → Refresh browser (Cmd+R / F5)
3. JavaScript error → Check Console for red error messages

Solution:

# Stop dev server (Cmd+C)
# Then restart
npm run dev

Issue 2: Console Shows "SignUp result: hasUser: false"

Symptoms: User creation fails

Possible Causes:

1. Email already registered
2. Supabase Auth configuration issue
3. Network error

Solution:

-- Check if user exists
SELECT id, email FROM auth.users WHERE email = 'your@email.com';

-- If exists, delete and try again
DELETE FROM auth.users WHERE email = 'your@email.com';

Issue 3: Log 3 Appears But No Log 4

Symptoms: OTP request sent but no response

Possible Causes:

1. CORS error
2. Edge function not deployed
3. Wrong Supabase URL in env variables

Solution:

# Check env variables
cat .env
# Should have VITE_SUPABASE_URL=https://lovable.backoffice.biz.id

Check Console for CORS errors (red text like "Access-Control-Allow-Origin")

Issue 4: Log 4 Shows Status != 200

Symptoms: Edge function returns error

Solution: Check the error message in Log 4 or Console

Common errors:

• 401 Unauthorized: Check authorization token
• 404 Not Found: Edge function not deployed
• 500 Server Error: Check edge function logs

# Check edge function logs
supabase functions logs send-auth-otp --tail

Issue 5: OTP Created But No Email Received

Symptoms:

• auth_otps table has new row
• Network request shows 200 OK
• But no email in inbox

Possible Causes:

1. Mailketing API issue
2. Wrong API token
3. Email in spam folder
4. Template not active

Solution:

-- Check notification_logs table
SELECT * FROM notification_logs
ORDER BY created_at DESC
LIMIT 1;

-- Check if template is active
SELECT * FROM notification_templates
WHERE key = 'auth_email_verification';

If status = 'failed', check error_message column.

Issue 6: Email Received But Wrong Code

Symptoms: Enter code from email but verification fails

Solution:

-- Check OTP in database
SELECT otp_code, expires_at, used_at
FROM auth_otps
WHERE email = 'your@email.com'
ORDER BY created_at DESC
LIMIT 1;

Compare otp_code in database with code in email. They should match.

Environment Variables Checklist

Make sure these are set in .env:

VITE_SUPABASE_URL=https://lovable.backoffice.biz.id
VITE_SUPABASE_ANON_KEY=your_anon_key_here

Check:

# View env vars (without showing secrets)
grep VITE_SUPABASE .env

Edge Functions Deployment Status

Check if functions are deployed:

supabase functions list

Expected output:

send-auth-otp    ...
verify-auth-otp  ...
send-email-v2    ...

Quick Test Script

Save this as test-otp.sh:

#!/bin/bash

echo "📧 OTP Email Verification Test Script"
echo "======================================"
echo ""

echo "1. Checking environment variables..."
if [ -z "$VITE_SUPABASE_URL" ]; then
  echo "❌ VITE_SUPABASE_URL not set"
else
  echo "✅ VITE_SUPABASE_URL=$VITE_SUPABASE_URL"
fi

echo ""
echo "2. Checking database connection..."
# Add your DB check here

echo ""
echo "3. Checking edge functions..."
supabase functions list

echo ""
echo "4. Next steps:"
echo "   - Open browser to http://localhost:5173/auth"
echo "   - Open DevTools (F12) → Console tab"
echo "   - Try to register"
echo "   - Check console logs"
echo "   - Check email inbox"

Success Criteria

✅ All 5 console logs appear in order ✅ Network request shows 200 OK ✅ auth_otps table has new row ✅ Email received with 6-digit code ✅ OTP code verifies successfully ✅ User email confirmed in auth.users

Need Help?

If you're still stuck, please provide:

1. Screenshot of Console tab (all logs)
2. Screenshot of Network tab (send-auth-otp request)
3. Output of: SELECT * FROM auth_otps ORDER BY created_at DESC LIMIT 1;
4. Output of: SELECT * FROM notification_logs ORDER BY created_at DESC LIMIT 1;
5. Any error messages shown in red in Console