Supabase "Error sending confirmation email" (500): 5 fixes

AuthApiError: Error sending confirmation mail
status: 500

## Check Supabase logs
## Go to: Dashboard > Logs > Auth Logs
## Look for: "user_confirmation_requested" or error codes such as
## email_address_not_authorized / over_email_send_rate_limit
 
## Check user status in database
SELECT email, email_confirmed_at, confirmation_token 
FROM auth.users 
WHERE email = 'user@example.com';
 
## Verify SMTP settings
## Go to: Dashboard > Authentication > Emails > SMTP Settings
## Check: "Enable custom SMTP" is switched on

// 1. Go to Supabase Dashboard > Authentication > Emails
// 2. Open the "SMTP Settings" tab
// 3. Switch on "Enable custom SMTP"
 
// Example SendGrid Configuration:
Host: smtp.sendgrid.net
Port: 587
Username: apikey
Password: YOUR_SENDGRID_API_KEY
Sender email: noreply@iloveblogs.blog
Sender name: Your App Name

// The dashboard has no "send test email" button for SMTP.
// Test with a real flow instead:
// Authentication > Users > Add user > Send invitation
// (use an address that is NOT a member of your Supabase team)
// Check: Email arrives in inbox (not spam), and no
// email_address_not_authorized error is returned

## .env.local
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
 
## Only if your own app code sends mail (e.g. Nodemailer).
## Supabase Auth never reads these: its SMTP settings live in the dashboard.
SMTP_HOST=smtp.sendgrid.net
SMTP_PORT=587
SMTP_USER=apikey
SMTP_PASS=your-api-key

// Supabase Dashboard > Authentication > URL Configuration
// Site URL: https://www.iloveblogs.blog
// Redirect URLs: https://www.iloveblogs.blog/auth/callback
 
// With @supabase/ssr (PKCE flow) and the route below, the template
// must send the token hash to your own route:
//   {{ .SiteURL }}/auth/callback?token_hash={{ .TokenHash }}&type=email
// NOT {{ .ConfirmationURL }}: it verifies on Supabase, then redirects
//   with ?code=..., which this route never reads
// NOT {{ .Token }}: that is the 6-digit OTP, not a link token

<!-- Go to: Dashboard > Authentication > Emails > Templates > Confirm sign up -->
<h2>Confirm your signup</h2>
<p>Follow this link to confirm your account:</p>
<p><a href="{{ .SiteURL }}/auth/callback?token_hash={{ .TokenHash }}&type=email">Confirm your email</a></p>
<p>Or copy and paste this URL into your browser:</p>
<p>{{ .SiteURL }}/auth/callback?token_hash={{ .TokenHash }}&type=email</p>

// app/auth/callback/route.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'
 
export async function GET(request: Request) {
  const requestUrl = new URL(request.url)
  const token_hash = requestUrl.searchParams.get('token_hash')
  const type = requestUrl.searchParams.get('type')
  const next = requestUrl.searchParams.get('next') ?? '/'
 
  if (token_hash && type) {
    const cookieStore = await cookies()
    const supabase = createServerClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
      {
        cookies: {
          getAll() {
            return cookieStore.getAll()
          },
          setAll(cookiesToSet) {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            )
          },
        },
      }
    )
 
    const { error } = await supabase.auth.verifyOtp({
      type: type as any,
      token_hash,
    })
 
    if (!error) {
      return NextResponse.redirect(new URL(next, request.url))
    }
  }
 
  // Return error page
  return NextResponse.redirect(new URL('/auth/error', request.url))
}

## Add TXT record to your domain:
Type: TXT
Name: @
Value: v=spf1 include:sendgrid.net ~all
 
## For SendGrid, check their documentation for exact value

## SendGrid provides DKIM records in their dashboard
## Add 3 CNAME records they provide
## Example:
Type: CNAME
Name: s1._domainkey
Value: s1.domainkey.u12345.wl.sendgrid.net

## Check SPF record
nslookup -type=TXT iloveblogs.blog
 
## Check DKIM record
nslookup -type=CNAME s1._domainkey.iloveblogs.blog
 
## Test email deliverability
## Use: mail-tester.com

// Detect the email rate limit instead of retrying (client component)
import { createBrowserClient } from '@supabase/ssr'
 
async function sendConfirmationEmail(email: string) {
  const supabase = createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
 
  try {
    const { error } = await supabase.auth.signUp({
      email,
      password: 'user-password',
      options: {
        emailRedirectTo: `${window.location.origin}/auth/callback`,
      },
    })
 
    if (error) {
      // 429 over_email_send_rate_limit: the project's hourly email cap or
      // the 60-second per-user window. Retrying in a loop cannot beat either.
      if (error.code === 'over_email_send_rate_limit') {
        return {
          success: false,
          error: 'Too many confirmation emails. Please wait before trying again.',
        }
      }
      throw error
    }
 
    return { success: true }
  } catch (error) {
    console.error('Email send failed:', error)
    return { success: false, error }
  }
}

// app/api/resend-confirmation/route.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'
 
export async function POST(request: Request) {
  const { email } = await request.json()
  const cookieStore = await cookies()
  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options)
          )
        },
      },
    }
  )
 
  const { error } = await supabase.auth.resend({
    type: 'signup',
    email,
    options: {
      emailRedirectTo: `${process.env.NEXT_PUBLIC_SITE_URL}/auth/callback`,
    },
  })
 
  if (error) {
    return NextResponse.json({ error: error.message }, { status: 400 })
  }
 
  return NextResponse.json({ message: 'Confirmation email sent' })
}

'use client'
 
import { useState } from 'react'
 
export function ResendConfirmation({ email }: { email: string }) {
  const [loading, setLoading] = useState(false)
  const [message, setMessage] = useState('')
 
  async function handleResend() {
    setLoading(true)
    
    const response = await fetch('/api/resend-confirmation', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email }),
    })
 
    const data = await response.json()
    setMessage(data.message || data.error)
    setLoading(false)
  }
 
  return (
    <div>
      <p>Didn't receive the email?</p>
      <button onClick={handleResend} disabled={loading}>
        {loading ? 'Sending...' : 'Resend confirmation email'}
      </button>
      {message && <p>{message}</p>}
    </div>
  )
}