auth pattern

Verify email

Token-driven email verification target.

When to use it

After clicking the verification link from email. Three states: pending / success / error.

  • Verify in zero user actions
  • Auto-redirect on success

Layout regions

  • header
  • card

States

  • loading
  • success
  • error

Example

'use client'
export default function VerifyEmail() {
  const [state, setState] = useState<'pending'|'success'|'error'>('pending')
  useEffect(() => { authClient.verifyEmail({ token }).then(...) }, [])
  return state === 'pending' ? <Spinner /> : ...
}

The full Verify email pattern specifies 4 exact microcopy strings, 1 motion spec, 3 composition rules — all gated behind the full recipe. Get the full recipe.

Build the Verify email pattern in your project.