Verify Email

1"use client"
2 
3import { useAuth, useSendVerificationEmail } from "@better-auth-ui/react"
4import { useEffect, useState } from "react"
5import { toast } from "sonner"
6 
7import { Button } from "@/components/ui/button"
8import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
9import { FieldDescription } from "@/components/ui/field"
10import { Spinner } from "@/components/ui/spinner"
11import { cn } from "@/lib/utils"
12import { OpenEmailButton } from "./open-email-button"
13import { useIsHydrated } from "./use-is-hydrated"
14 
15export type VerifyEmailProps = {
16  className?: string
17}
18 
19/** Seconds the resend button stays disabled to prevent spamming the endpoint. */
20const RESEND_COOLDOWN_SECONDS = 60
21 
22/**
23 * Render a card prompting the user to verify their email, with a resend button
24 * that is rate-limited by a cooldown timer.
25 *
26 * The target email is read from `sessionStorage` (set when sign-up or sign-in
27 * redirects here); the OpenEmail/Resend controls are only shown when an email
28 * is stored. The resend button is disabled while a cooldown is active and shows
29 * the remaining seconds.
30 *
31 * @param className - Additional CSS classes applied to the card
32 * @returns The verify-email card React element
33 */
34export function VerifyEmail({ className }: VerifyEmailProps) {
35  const {
36    authClient,
37    basePaths,
38    baseURL,
39    localization,
40    redirectTo,
41    viewPaths,
42    Link
43  } = useAuth()
44 
45  const isHydrated = useIsHydrated()
46  const [email, setEmail] = useState(
47    (isHydrated && sessionStorage.getItem("better-auth-ui.verify-email")) || ""
48  )
49  const [cooldown, setCooldown] = useState(RESEND_COOLDOWN_SECONDS)
50 
51  useEffect(() => {
52    setEmail(sessionStorage.getItem("better-auth-ui.verify-email") ?? "")
53  }, [])
54 
55  useEffect(() => {
56    if (cooldown <= 0 || !email) return
57 
58    const interval = setInterval(() => {
59      setCooldown((current) => (current > 0 ? current - 1 : 0))
60    }, 1000)
61 
62    return () => clearInterval(interval)
63  }, [cooldown, email])
64 
65  const { mutate: sendVerificationEmail, isPending } = useSendVerificationEmail(
66    authClient,
67    {
68      onSuccess: () => {
69        toast.success(localization.auth.verificationEmailSent)
70        setCooldown(RESEND_COOLDOWN_SECONDS)
71      }
72    }
73  )
74 
75  const isCoolingDown = cooldown > 0
76 
77  return (
78    <Card className={cn("w-full max-w-sm", className)}>
79      <CardHeader>
80        <CardTitle className="text-xl font-semibold">
81          {localization.auth.verifyEmail}
82        </CardTitle>
83// … truncated