Add comprehensive OTP testing guide

- Step-by-step frontend testing instructions - Console log examples for each step - Network tab debugging guide - Database verification queries - Common issues and solutions - Environment variables checklist
2026-01-02 14:34:41 +07:00
parent 079c0f947c
commit fa1adcf291
1 changed files with 341 additions and 0 deletions
--- a/otp-testing-guide.md
+++ b/otp-testing-guide.md
@@ -0,0 +1,341 @@
+# 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:
+```bash
+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:
+
+```sql
+-- 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**:
+```bash
+# 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**:
+```sql
+-- 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**:
+```bash
+# 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
+
+```bash
+# 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**:
+```sql
+-- 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**:
+```sql
+-- 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`:
+
+```bash
+VITE_SUPABASE_URL=https://lovable.backoffice.biz.id
+VITE_SUPABASE_ANON_KEY=your_anon_key_here
+```
+
+Check:
+```bash
+# View env vars (without showing secrets)
+grep VITE_SUPABASE .env
+```
+
+## Edge Functions Deployment Status
+
+Check if functions are deployed:
+
+```bash
+supabase functions list
+```
+
+Expected output:
+```
+send-auth-otp    ...
+verify-auth-otp  ...
+send-email-v2    ...
+```
+
+## Quick Test Script
+
+Save this as `test-otp.sh`:
+
+```bash
+#!/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