Implement OTP-based email verification system

Add custom email verification using 6-digit OTP codes via Mailketing API:

Database:
- Create auth_otps table with 15-minute expiry
- Add indexes and RLS policies for security
- Add cleanup function for expired tokens
- Insert default auth_email_verification template

Edge Functions:
- send-auth-otp: Generate OTP, store in DB, send via Mailketing
- verify-auth-otp: Validate OTP, confirm email in Supabase Auth

Frontend:
- Add OTP input state to auth page
- Implement send/verify OTP in useAuth hook
- Add resend countdown timer (60 seconds)
- Update auth flow: signup → OTP verification → login

Features:
- Instant email delivery (no queue/cron)
- 6-digit OTP with 15-minute expiry
- Resend OTP with cooldown
- Admin-configurable email templates
- Indonesian UI text

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/hooks/useAuth.tsx

@@ -8,8 +8,10 @@ interface AuthContextType {
   loading: boolean;
   isAdmin: boolean;
   signIn: (email: string, password: string) => Promise<{ error: Error | null }>;
-  signUp: (email: string, password: string, name: string) => Promise<{ error: Error | null }>;
+  signUp: (email: string, password: string, name: string) => Promise<{ error: Error | null; data?: { user?: User; session?: Session } }>;
   signOut: () => Promise<void>;
+  sendAuthOTP: (userId: string, email: string) => Promise<{ success: boolean; message: string }>;
+  verifyAuthOTP: (userId: string, otpCode: string) => Promise<{ success: boolean; message: string }>;
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
@@ -87,7 +89,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
   const signUp = async (email: string, password: string, name: string) => {
     const redirectUrl = `${window.location.origin}/`;
-    const { error } = await supabase.auth.signUp({
+    const { data, error } = await supabase.auth.signUp({
       email,
       password,
       options: {
@@ -95,15 +97,69 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         data: { name }
       }
     });
-    return { error };
+    return { error, data };
   };
 
   const signOut = async () => {
     await supabase.auth.signOut();
   };
 
+  const sendAuthOTP = async (userId: string, email: string) => {
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+
+      const response = await fetch(
+        `${import.meta.env.VITE_SUPABASE_URL}/functions/v1/send-auth-otp`,
+        {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${session?.access_token || import.meta.env.VITE_SUPABASE_ANON_KEY}`,
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ user_id: userId, email }),
+        }
+      );
+
+      const result = await response.json();
+      return result;
+    } catch (error: any) {
+      console.error('Error sending OTP:', error);
+      return {
+        success: false,
+        message: error.message || 'Failed to send OTP'
+      };
+    }
+  };
+
+  const verifyAuthOTP = async (userId: string, otpCode: string) => {
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+
+      const response = await fetch(
+        `${import.meta.env.VITE_SUPABASE_URL}/functions/v1/verify-auth-otp`,
+        {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${session?.access_token || import.meta.env.VITE_SUPABASE_ANON_KEY}`,
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ user_id: userId, otp_code: otpCode }),
+        }
+      );
+
+      const result = await response.json();
+      return result;
+    } catch (error: any) {
+      console.error('Error verifying OTP:', error);
+      return {
+        success: false,
+        message: error.message || 'Failed to verify OTP'
+      };
+    }
+  };
+
   return (
-    <AuthContext.Provider value={{ user, session, loading, isAdmin, signIn, signUp, signOut }}>
+    <AuthContext.Provider value={{ user, session, loading, isAdmin, signIn, signUp, signOut, sendAuthOTP, verifyAuthOTP }}>
       {children}
     </AuthContext.Provider>
   );

supabase/functions/send-auth-otp/index.ts

@@ -0,0 +1,203 @@
+import { serve } from "https://deno.land/std@0.190.0/http/server.ts";
+import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
+
+const corsHeaders = {
+  "Access-Control-Allow-Origin": "*",
+  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
+};
+
+interface SendOTPRequest {
+  user_id: string;
+  email: string;
+}
+
+// Generate 6-digit OTP code
+function generateOTP(): string {
+  return Math.floor(100000 + Math.random() * 900000).toString();
+}
+
+serve(async (req: Request) => {
+  if (req.method === "OPTIONS") {
+    return new Response(null, { headers: corsHeaders });
+  }
+
+  try {
+    const { user_id, email }: SendOTPRequest = await req.json();
+
+    // Validate required fields
+    if (!user_id || !email) {
+      return new Response(
+        JSON.stringify({ success: false, message: "Missing required fields: user_id, email" }),
+        { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+      );
+    }
+
+    // Basic email validation
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+      return new Response(
+        JSON.stringify({ success: false, message: "Invalid email format" }),
+        { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+      );
+    }
+
+    // Initialize Supabase client with service role
+    const supabaseUrl = Deno.env.get('SUPABASE_URL')!;
+    const supabaseServiceKey = Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!;
+    const supabase = createClient(supabaseUrl, supabaseServiceKey);
+
+    // Generate OTP code
+    const otpCode = generateOTP();
+    const expiresAt = new Date(Date.now() + 15 * 60 * 1000); // 15 minutes from now
+
+    console.log(`Generating OTP for user ${user_id}, email ${email}`);
+
+    // Store OTP in database
+    const { error: otpError } = await supabase
+      .from('auth_otps')
+      .insert({
+        user_id,
+        email,
+        otp_code: otpCode,
+        expires_at: expiresAt.toISOString(),
+      });
+
+    if (otpError) {
+      console.error('Error storing OTP:', otpError);
+      throw new Error(`Failed to store OTP: ${otpError.message}`);
+    }
+
+    // Get notification settings
+    const { data: settings, error: settingsError } = await supabase
+      .from('notification_settings')
+      .select('*')
+      .single();
+
+    if (settingsError || !settings) {
+      console.error('Error fetching notification settings:', settingsError);
+      throw new Error('Notification settings not configured');
+    }
+
+    // Get email template
+    const { data: template, error: templateError } = await supabase
+      .from('notification_templates')
+      .select('*')
+      .eq('template_key', 'auth_email_verification')
+      .single();
+
+    if (templateError || !template) {
+      console.error('Error fetching email template:', templateError);
+      throw new Error('Email template not found. Please create template with key: auth_email_verification');
+    }
+
+    // Get user data from auth.users
+    const { data: { user }, error: userError } = await supabase.auth.admin.getUserById(user_id);
+
+    if (userError || !user) {
+      console.error('Error fetching user:', userError);
+      throw new Error('User not found');
+    }
+
+    // Prepare template variables
+    const templateVars = {
+      platform_name: settings.platform_name || 'Platform',
+      nama: user.user_metadata?.name || user.email || 'Pengguna',
+      email: email,
+      otp_code: otpCode,
+      expiry_minutes: '15',
+      confirmation_link: '', // Not used for OTP
+      year: new Date().getFullYear().toString(),
+    };
+
+    // Process shortcodes in subject
+    let subject = template.subject;
+    Object.entries(templateVars).forEach(([key, value]) => {
+      subject = subject.replace(new RegExp(`{${key}}`, 'g'), value);
+    });
+
+    // Process shortcodes in HTML body
+    let htmlBody = template.html_content;
+    Object.entries(templateVars).forEach(([key, value]) => {
+      htmlBody = htmlBody.replace(new RegExp(`{${key}}`, 'g'), value);
+    });
+
+    // Send email via send-email-v2
+    console.log(`Sending OTP email to ${email}`);
+
+    const emailResponse = await fetch(`${supabaseUrl}/functions/v1/send-email-v2`, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${supabaseServiceKey}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        to: email,
+        api_token: settings.mailketing_api_token,
+        from_name: settings.from_name,
+        from_email: settings.from_email,
+        subject: subject,
+        html_body: htmlBody,
+      }),
+    });
+
+    if (!emailResponse.ok) {
+      const errorText = await emailResponse.text();
+      console.error('Email send error:', emailResponse.status, errorText);
+      throw new Error(`Failed to send email: ${emailResponse.status} ${errorText}`);
+    }
+
+    const emailResult = await emailResponse.json();
+    console.log('Email sent successfully:', emailResult);
+
+    // Log notification
+    await supabase
+      .from('notification_logs')
+      .insert({
+        user_id,
+        email: email,
+        notification_type: 'auth_email_verification',
+        status: 'sent',
+        provider: 'mailketing',
+        error_message: null,
+      });
+
+    return new Response(
+      JSON.stringify({
+        success: true,
+        message: 'OTP sent successfully'
+      }),
+      { status: 200, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+    );
+
+  } catch (error: any) {
+    console.error("Error sending OTP:", error);
+
+    // Try to log error notification
+    try {
+      const supabaseUrl = Deno.env.get('SUPABASE_URL')!;
+      const supabaseServiceKey = Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!;
+      const supabase = createClient(supabaseUrl, supabaseServiceKey);
+
+      await supabase
+        .from('notification_logs')
+        .insert({
+          user_id: null,
+          email: null,
+          notification_type: 'auth_email_verification',
+          status: 'failed',
+          provider: 'mailketing',
+          error_message: error.message || 'Unknown error',
+        });
+    } catch (logError) {
+      console.error('Failed to log error:', logError);
+    }
+
+    return new Response(
+      JSON.stringify({
+        success: false,
+        message: error.message || "Failed to send OTP"
+      }),
+      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+    );
+  }
+});

supabase/functions/verify-auth-otp/index.ts

@@ -0,0 +1,122 @@
+import { serve } from "https://deno.land/std@0.190.0/http/server.ts";
+import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
+
+const corsHeaders = {
+  "Access-Control-Allow-Origin": "*",
+  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
+};
+
+interface VerifyOTPRequest {
+  user_id: string;
+  otp_code: string;
+}
+
+serve(async (req: Request) => {
+  if (req.method === "OPTIONS") {
+    return new Response(null, { headers: corsHeaders });
+  }
+
+  try {
+    const { user_id, otp_code }: VerifyOTPRequest = await req.json();
+
+    // Validate required fields
+    if (!user_id || !otp_code) {
+      return new Response(
+        JSON.stringify({ success: false, message: "Missing required fields: user_id, otp_code" }),
+        { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+      );
+    }
+
+    // Validate OTP format (6 digits)
+    if (!/^\d{6}$/.test(otp_code)) {
+      return new Response(
+        JSON.stringify({ success: false, message: "Invalid OTP format. Must be 6 digits." }),
+        { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+      );
+    }
+
+    // Initialize Supabase client with service role
+    const supabaseUrl = Deno.env.get('SUPABASE_URL')!;
+    const supabaseServiceKey = Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!;
+    const supabase = createClient(supabaseUrl, supabaseServiceKey);
+
+    console.log(`Verifying OTP for user ${user_id}`);
+
+    // Find valid OTP (not expired, not used)
+    const { data: otpRecord, error: otpError } = await supabase
+      .from('auth_otps')
+      .select('*')
+      .eq('user_id', user_id)
+      .eq('otp_code', otp_code)
+      .is('used_at', null)
+      .gt('expires_at', new Date().toISOString())
+      .order('created_at', { ascending: false })
+      .limit(1)
+      .maybeSingle();
+
+    if (otpError) {
+      console.error('Error fetching OTP:', otpError);
+      throw new Error(`Failed to verify OTP: ${otpError.message}`);
+    }
+
+    if (!otpRecord) {
+      console.log('Invalid or expired OTP');
+
+      // Clean up expired OTPs
+      await supabase.rpc('cleanup_expired_otps');
+
+      return new Response(
+        JSON.stringify({
+          success: false,
+          message: "Invalid or expired OTP code"
+        }),
+        { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+      );
+    }
+
+    // Mark OTP as used
+    const { error: updateError } = await supabase
+      .from('auth_otps')
+      .update({ used_at: new Date().toISOString() })
+      .eq('id', otpRecord.id);
+
+    if (updateError) {
+      console.error('Error marking OTP as used:', updateError);
+      throw new Error(`Failed to mark OTP as used: ${updateError.message}`);
+    }
+
+    // Confirm email in Supabase Auth
+    const { error: confirmError } = await supabase.auth.admin.updateUserById(
+      user_id,
+      { email_confirm: true }
+    );
+
+    if (confirmError) {
+      console.error('Error confirming email:', confirmError);
+      throw new Error(`Failed to confirm email: ${confirmError.message}`);
+    }
+
+    console.log(`Email confirmed successfully for user ${user_id}`);
+
+    // Clean up expired OTPs
+    await supabase.rpc('cleanup_expired_otps');
+
+    return new Response(
+      JSON.stringify({
+        success: true,
+        message: "Email verified successfully"
+      }),
+      { status: 200, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+    );
+
+  } catch (error: any) {
+    console.error("Error verifying OTP:", error);
+    return new Response(
+      JSON.stringify({
+        success: false,
+        message: error.message || "Failed to verify OTP"
+      }),
+      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+    );
+  }
+});

supabase/migrations/20250102000001_auth_otp.sql

@@ -0,0 +1,68 @@
+-- ============================================================================
+-- Auth OTP System - Email Verification with One-Time Passwords
+-- ============================================================================
+
+-- Create auth_otps table to store OTP codes for email verification
+CREATE TABLE IF NOT EXISTS auth_otps (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+  email TEXT NOT NULL,
+  otp_code TEXT NOT NULL,
+  expires_at TIMESTAMP WITH TIME ZONE NOT NULL,
+  used_at TIMESTAMP WITH TIME ZONE,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Create indexes for performance
+CREATE INDEX IF NOT EXISTS idx_auth_otps_user_otp ON auth_otps(user_id, otp_code);
+CREATE INDEX IF NOT EXISTS idx_auth_otps_expires_at ON auth_otps(expires_at);
+CREATE INDEX IF NOT EXISTS idx_auth_otps_email ON auth_otps(email);
+
+-- Enable RLS
+ALTER TABLE auth_otps ENABLE ROW LEVEL SECURITY;
+
+-- RLS Policies
+-- Service role has full access
+CREATE POLICY "Service role can do everything" ON auth_otps
+  FOR ALL
+  TO service_role
+  USING (true)
+  WITH CHECK (true);
+
+-- Authenticated users can query their own OTPs
+CREATE POLICY "Users can view own OTPs" ON auth_otps
+  FOR SELECT
+  TO authenticated
+  USING (auth.uid() = user_id);
+
+-- Edge functions (via service role) can insert OTPs
+CREATE POLICY "Service role can insert OTPs" ON auth_otps
+  FOR INSERT
+  TO service_role
+  WITH CHECK (true);
+
+-- Edge functions (via service role) can update OTPs (mark as used)
+CREATE POLICY "Service role can update OTPs" ON auth_otps
+  FOR UPDATE
+  TO service_role
+  USING (true)
+  WITH CHECK (true);
+
+-- Function to clean up expired OTPs
+CREATE OR REPLACE FUNCTION cleanup_expired_otps()
+RETURNS void AS $$
+BEGIN
+  DELETE FROM auth_otps
+  WHERE expires_at < NOW();
+END;
+$$ LANGUAGE plpgsql;
+
+-- Comment on table
+COMMENT ON TABLE auth_otps IS 'Stores OTP codes for email verification. Generated when users register, used to confirm email addresses.';
+
+-- Comment on columns
+COMMENT ON COLUMN auth_otps.user_id IS 'Reference to auth.users.id';
+COMMENT ON COLUMN auth_otps.email IS 'Email address being verified (for redundancy)';
+COMMENT ON COLUMN auth_otps.otp_code IS '6-digit OTP code';
+COMMENT ON COLUMN auth_otps.expires_at IS 'OTP expiration time (typically 15 minutes)';
+COMMENT ON COLUMN auth_otps.used_at IS 'When OTP was used (NULL if unused)';

supabase/migrations/20250102000002_auth_email_template.sql

@@ -0,0 +1,162 @@
+-- ============================================================================
+-- Auth Email Verification Template
+-- ============================================================================
+
+-- Insert default auth email verification template
+INSERT INTO notification_templates (
+  template_key,
+  template_name,
+  description,
+  subject,
+  html_content,
+  is_active,
+  created_at,
+  updated_at
+) VALUES (
+  'auth_email_verification',
+  'Verifikasi Email - OTP',
+  'Template untuk mengirim kode OTP verifikasi email saat pendaftaran',
+  'Kode Verifikasi Email Anda - {platform_name}',
+  '---
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Verifikasi Email</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            background-color: #f5f5f5;
+            margin: 0;
+            padding: 20px;
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 600px;
+            margin: 0 auto;
+            background: white;
+            border: 3px solid #000;
+            box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
+        }
+        .header {
+            background: #000;
+            color: #fff;
+            padding: 30px;
+            text-align: center;
+        }
+        .header h1 {
+            margin: 0;
+            font-size: 24px;
+            font-weight: 700;
+        }
+        .content {
+            padding: 30px;
+        }
+        .greeting {
+            font-size: 18px;
+            margin-bottom: 20px;
+        }
+        .message {
+            margin-bottom: 30px;
+            color: #333;
+        }
+        .otp-container {
+            background: #f9f9f9;
+            border: 2px dashed #000;
+            padding: 30px;
+            text-align: center;
+            margin: 30px 0;
+        }
+        .otp-code {
+            font-size: 36px;
+            font-weight: 700;
+            letter-spacing: 8px;
+            color: #000;
+            font-family: "Courier New", monospace;
+            margin: 20px 0;
+        }
+        .expiry {
+            font-size: 14px;
+            color: #666;
+            margin-top: 10px;
+        }
+        .instructions {
+            background: #fffbeb;
+            border-left: 4px solid #f59e0b;
+            padding: 15px;
+            margin: 20px 0;
+            font-size: 14px;
+        }
+        .footer {
+            background: #f9f9f9;
+            padding: 20px;
+            text-align: center;
+            font-size: 12px;
+            color: #666;
+            border-top: 2px solid #000;
+        }
+        .button {
+            display: inline-block;
+            background: #000;
+            color: #fff;
+            padding: 12px 24px;
+            text-decoration: none;
+            font-weight: 600;
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🔐 Verifikasi Email</h1>
+        </div>
+
+        <div class="content">
+            <p class="greeting">Halo {nama},</p>
+
+            <p class="message">
+                Terima kasih telah mendaftar di <strong>{platform_name}</strong>!
+                Gunakan kode OTP berikut untuk memverifikasi alamat email Anda:
+            </p>
+
+            <div class="otp-container">
+                <div class="otp-code">{otp_code}</div>
+                <div class="expiry">⏰ Berlaku selama {expiry_minutes} menit</div>
+            </div>
+
+            <div class="instructions">
+                <strong>Cara menggunakan:</strong><br>
+                1. Salin kode 6 digit di atas<br>
+                2. Kembali ke halaman pendaftaran<br>
+                3. Masukkan kode tersebut pada form verifikasi
+            </div>
+
+            <p class="message" style="margin-top: 30px;">
+                Jika Anda tidak merasa mendaftar di {platform_name},
+                abaikan email ini dengan aman.
+            </p>
+        </div>
+
+        <div class="footer">
+            <p>Email ini dikirim ke {email}</p>
+            <p>© {year} {platform_name}. Semua hak dilindungi.</p>
+        </div>
+    </div>
+</body>
+</html>
+---',
+  true,
+  NOW(),
+  NOW()
+) ON CONFLICT (template_key) DO NOTHING;
+
+-- Add comment
+COMMENT ON TABLE notification_templates IS 'Contains email templates for various notifications including auth emails';
+
+-- Return success message
+DO $$
+BEGIN
+  RAISE NOTICE 'Auth email verification template inserted successfully';
+END $$;