dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add comprehensive OTP testing guide

Browse Source 
- 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
This commit is contained in:
dwindown
2026-01-02 14:34:41 +07:00
parent 079c0f947c
commit fa1adcf291
1 changed files with 341 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

341
otp-testing-guide.md Normal file
View File

@@ -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