How to Implement Email Verification in Supabase

Go to the Supabase Dashboard, navigate to Authentication > Providers, and click on the Email provider. Toggle on the Confirm email setting. When this is enabled, new signups will receive a confirmation email and their session will be null until they click the link. Also check the URL Configuration section under Authentication — set your Site URL to your production domain and add your app's callback URL to the Redirect URLs allowlist. The callback URL is where Supabase redirects users after they click the confirmation link.

When you call signUp with Confirm email enabled, the user receives a confirmation email but the session will be null. Your UI should display a message telling the user to check their inbox. The emailRedirectTo option in the signUp call specifies where the user is sent after clicking the confirmation link. This URL must be in the Redirect URLs allowlist in the Dashboard.

1import { createClient } from '@supabase/supabase-js'
2
3const supabase = createClient(
4  process.env.NEXT_PUBLIC_SUPABASE_URL!,
5  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
6)
7
8async function signUp(email: string, password: string) {
9  const { data, error } = await supabase.auth.signUp({
10    email,
11    password,
12    options: {
13      emailRedirectTo: `${window.location.origin}/auth/callback`,
14    },
15  })
16
17  if (error) {
18    console.error('Signup error:', error.message)
19    return
20  }
21
22  // data.session is null when email confirmation is required
23  if (data.user && !data.session) {
24    console.log('Confirmation email sent. Check your inbox.')
25  }
26}

When the user clicks the confirmation link in their email, Supabase redirects them to your emailRedirectTo URL with authentication parameters in the URL hash. You need a callback route in your app that extracts these parameters and exchanges them for a session. For Next.js App Router, create a route handler. For React with React Router, create a callback page component. The key is to call supabase.auth.exchangeCodeForSession() if using PKCE flow, or let the client auto-detect the hash parameters.

1// For Next.js App Router: app/auth/callback/route.ts
2import { createClient } from '@/lib/supabase/server'
3import { NextResponse } from 'next/server'
4
5export async function GET(request: Request) {
6  const { searchParams } = new URL(request.url)
7  const code = searchParams.get('code')
8  const redirectTo = new URL('/', request.url)
9
10  if (code) {
11    const supabase = await createClient()
12    const { error } = await supabase.auth.exchangeCodeForSession(code)
13    if (!error) {
14      return NextResponse.redirect(redirectTo)
15    }
16  }
17
18  // If there is no code or an error, redirect to an error page
19  return NextResponse.redirect(new URL('/auth/error', request.url))
20}

After a user is authenticated, check the email_confirmed_at field on the user object to determine if they have verified their email. If this field is null, the user has not yet confirmed their email. Use this to conditionally show verification reminders, restrict access to certain features, or block certain actions until the email is confirmed.

1async function isEmailVerified(): Promise<boolean> {
2  const { data: { user }, error } = await supabase.auth.getUser()
3
4  if (error || !user) return false
5
6  return user.email_confirmed_at !== null
7}
8
9// Usage in a component
10const verified = await isEmailVerified()
11if (!verified) {
12  console.log('Please verify your email to continue.')
13}

Set up an onAuthStateChange listener to detect when a user confirms their email. The SIGNED_IN event fires when the user completes verification (either by clicking the link or entering an OTP). Use this to update your UI in real-time without requiring a page refresh. The USER_UPDATED event may also fire when email confirmation status changes.

1supabase.auth.onAuthStateChange((event, session) => {
2  if (event === 'SIGNED_IN' && session?.user.email_confirmed_at) {
3    console.log('Email verified! User is now fully authenticated.')
4    // Redirect to the main app or update UI state
5  }
6})