diff --git a/otp-testing-guide.md b/otp-testing-guide.md new file mode 100644 index 0000000..a2c2208 --- /dev/null +++ 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