How to Resend Email Confirmation in Supabase

1import { useState, useEffect } from 'react'
2import { createClient } from '@supabase/supabase-js'
3
4const supabase = createClient(
5  process.env.NEXT_PUBLIC_SUPABASE_URL!,
6  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
7)
8
9// Resend confirmation email with error handling
10async function resendConfirmationEmail(email: string): Promise<{ success: boolean; error?: string }> {
11  const { error } = await supabase.auth.resend({
12    type: 'signup',
13    email,
14    options: {
15      emailRedirectTo: `${window.location.origin}/auth/callback`,
16    },
17  })
18
19  if (error) {
20    if (error.message.includes('rate')) {
21      return { success: false, error: 'Too many requests. Please wait before trying again.' }
22    }
23    return { success: false, error: error.message }
24  }
25
26  return { success: true }
27}
28
29// React component with cooldown timer
30function ResendConfirmationPage({ email }: { email: string }) {
31  const [cooldown, setCooldown] = useState(0)
32  const [message, setMessage] = useState('')
33  const [isError, setIsError] = useState(false)
34
35  useEffect(() => {
36    if (cooldown <= 0) return
37    const timer = setTimeout(() => setCooldown((c) => c - 1), 1000)
38    return () => clearTimeout(timer)
39  }, [cooldown])
40
41  const maskedEmail = email.replace(
42    /(.{2})(.*)(@.*)/,
43    (_, a, b, c) => a + '*'.repeat(b.length) + c
44  )
45
46  async function handleResend() {
47    setMessage('')
48    const result = await resendConfirmationEmail(email)
49
50    if (result.success) {
51      setMessage('Confirmation email sent! Check your inbox.')
52      setIsError(false)
53      setCooldown(60)
54    } else {
55      setMessage(result.error || 'Failed to resend email.')
56      setIsError(true)
57    }
58  }
59
60  return (
61    <div style={{ maxWidth: 420, margin: '80px auto', textAlign: 'center', padding: 24 }}>
62      <h2>Verify your email</h2>
63      <p>We sent a confirmation link to <strong>{maskedEmail}</strong></p>
64      <p>Click the link in the email to activate your account.</p>
65      <button
66        onClick={handleResend}
67        disabled={cooldown > 0}
68        style={{ padding: '10px 20px', marginTop: 16, cursor: cooldown > 0 ? 'not-allowed' : 'pointer' }}
69      >
70        {cooldown > 0 ? `Resend in ${cooldown}s` : 'Resend confirmation email'}
71      </button>
72      {message && (
73        <p style={{ color: isError ? '#ef4444' : '#22c55e', marginTop: 12 }}>{message}</p>
74      )}
75      <p style={{ marginTop: 24, fontSize: 14, color: '#888' }}>
76        Check your spam folder if you don't see the email.
77      </p>
78    </div>
79  )
80}
81
82export default ResendConfirmationPage