# 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