@xk2800/nextjs-template 0.5.3

package/components/auth/emailPasswordSignup.tsx

@@ -0,0 +1,178 @@
+'use client'
+
+import React, { useEffect, useMemo, useState } from 'react'
+import { z } from 'zod'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { PasswordInput } from '../ui/password-input'
+import { Label } from '../ui/label'
+import { authClient } from '../../lib/auth-client'
+import { getVisitorId } from '../../lib/device-fingerprint'
+import { LOGIN_REFERRER_COOKIE, DEVICE_FINGERPRINT_HEADER } from '../../lib/cookie-names'
+import { SignupSchema } from '../../types/auth/signupSchema'
+import { toast } from 'sonner'
+
+type Props = {
+  callbackUrl?: string
+}
+
+// Matches better-auth's own default minPasswordLength (server/auth.ts
+// doesn't override it) — the meter below is UX guidance, not the source of
+// truth for what the server will actually accept.
+const MIN_PASSWORD_LENGTH = 8
+
+function getPasswordStrength(password: string): number {
+  if (password.length === 0) return 0
+  let score = 0
+  if (password.length >= MIN_PASSWORD_LENGTH) score++
+  if (password.length >= 12) score++
+  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score++
+  if (/[0-9]/.test(password) || /[^A-Za-z0-9]/.test(password)) score++
+  return score
+}
+
+const STRENGTH_LABEL = ['', 'Weak', 'Weak', 'Good', 'Strong']
+const STRENGTH_COLOR = ['bg-muted', 'bg-red-500', 'bg-red-500', 'bg-amber-500', 'bg-green-500']
+
+// Derived from the schema (not hand-typed) so a field rename/add/remove
+// there can't silently drift out of sync with the error state's shape here.
+type FieldErrors = Partial<Record<keyof z.infer<typeof SignupSchema>, string>>
+
+const EmailPasswordSignup = ({ callbackUrl }: Props) => {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors>({})
+  const strength = useMemo(() => getPasswordStrength(password), [password])
+
+  // Warm the fingerprint cache so the first submit doesn't wait on it.
+  useEffect(() => {
+    void getVisitorId()
+  }, [])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    const result = SignupSchema.safeParse({ name, email, password })
+    if (!result.success) {
+      const formatted = z.flattenError(result.error).fieldErrors
+      setFieldErrors({
+        name: formatted.name?.[0],
+        email: formatted.email?.[0],
+        password: formatted.password?.[0],
+      })
+      return
+    }
+    setFieldErrors({})
+
+    setIsSubmitting(true)
+
+    // See emailPasswordLogin.tsx — keeps this cookie fresh for this flow so
+    // the login-activity log doesn't pick up a stale value from an
+    // abandoned social sign-in attempt.
+    document.cookie = `${LOGIN_REFERRER_COOKIE}=${encodeURIComponent(window.location.href)}; path=/; max-age=300; samesite=lax`
+
+    try {
+      const visitorId = await getVisitorId()
+      const { error } = await authClient.signUp.email({
+        name,
+        email,
+        password,
+        callbackURL: callbackUrl || '/dashboard',
+        fetchOptions: visitorId
+          ? { headers: { [DEVICE_FINGERPRINT_HEADER]: visitorId } }
+          : undefined,
+      })
+
+      if (error) {
+        toast.error(error.message || 'Failed to sign up')
+      }
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Failed to sign up')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="name" className={fieldErrors.name ? 'text-destructive' : undefined}>
+          Name
+        </Label>
+        <Input
+          id="name"
+          type="text"
+          autoComplete="name"
+          placeholder="Ada Lovelace"
+          aria-invalid={!!fieldErrors.name}
+          aria-describedby={fieldErrors.name ? 'name-error' : undefined}
+          value={name}
+          onChange={(e) => {
+            setName(e.target.value)
+            if (fieldErrors.name) setFieldErrors((prev) => ({ ...prev, name: undefined }))
+          }}
+        />
+        {fieldErrors.name && <p id="name-error" className="text-sm text-destructive">{fieldErrors.name}</p>}
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="email" className={fieldErrors.email ? 'text-destructive' : undefined}>
+          Email
+        </Label>
+        <Input
+          id="email"
+          type="email"
+          autoComplete="email"
+          placeholder="you@company.com"
+          aria-invalid={!!fieldErrors.email}
+          aria-describedby={fieldErrors.email ? 'email-error' : undefined}
+          value={email}
+          onChange={(e) => {
+            setEmail(e.target.value)
+            if (fieldErrors.email) setFieldErrors((prev) => ({ ...prev, email: undefined }))
+          }}
+        />
+        {fieldErrors.email && <p id="email-error" className="text-sm text-destructive">{fieldErrors.email}</p>}
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="password" className={fieldErrors.password ? 'text-destructive' : undefined}>
+          Password
+        </Label>
+        <PasswordInput
+          id="password"
+          autoComplete="new-password"
+          placeholder={`At least ${MIN_PASSWORD_LENGTH} characters`}
+          aria-invalid={!!fieldErrors.password}
+          aria-describedby={[fieldErrors.password && 'password-error', 'password-hint'].filter(Boolean).join(' ')}
+          value={password}
+          onChange={(e) => {
+            setPassword(e.target.value)
+            if (fieldErrors.password) setFieldErrors((prev) => ({ ...prev, password: undefined }))
+          }}
+        />
+        {fieldErrors.password && <p id="password-error" className="text-sm text-destructive">{fieldErrors.password}</p>}
+        <div className="flex items-center gap-2">
+          <div className="flex flex-1 gap-1">
+            {[1, 2, 3, 4].map((segment) => (
+              <span
+                key={segment}
+                className={`h-1 flex-1 rounded-full transition-colors ${
+                  segment <= strength ? STRENGTH_COLOR[strength] : 'bg-muted'
+                }`}
+              />
+            ))}
+          </div>
+          <span id="password-hint" className="text-xs text-muted-foreground">
+            {password.length < MIN_PASSWORD_LENGTH ? `Use ${MIN_PASSWORD_LENGTH}+ characters` : STRENGTH_LABEL[strength]}
+          </span>
+        </div>
+      </div>
+      <Button type="submit" className="w-full" disabled={isSubmitting}>
+        {isSubmitting ? 'Creating account...' : 'Create account'}
+      </Button>
+    </form>
+  )
+}
+
+export default EmailPasswordSignup

package/components/auth/forgotPasswordForm.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import React, { useState } from 'react'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { authClient } from '../../lib/auth-client'
+import { toast } from 'sonner'
+
+const ForgotPasswordForm = () => {
+  const [email, setEmail] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [sent, setSent] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+
+    try {
+      const { error } = await authClient.forgetPassword({
+        email,
+        redirectTo: '/reset-password',
+      })
+
+      if (error) {
+        toast.error(error.message || 'Failed to send reset email')
+      } else {
+        setSent(true)
+      }
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Failed to send reset email')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  if (sent) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        If an account exists for <span className="font-medium text-foreground">{email}</span>, we&apos;ve
+        sent a link to reset your password. It expires in an hour.
+      </p>
+    )
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="email">Email</Label>
+        <Input
+          id="email"
+          type="email"
+          autoComplete="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        // required
+        />
+      </div>
+      <Button type="submit" className="w-full" disabled={isSubmitting}>
+        {isSubmitting ? 'Sending...' : 'Send reset link'}
+      </Button>
+    </form>
+  )
+}
+
+export default ForgotPasswordForm

package/components/auth/loginErrorRecovery.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { authClient } from '../../lib/auth-client'
+
+type Props = {
+  /** The `?error=` code better-auth redirected to /login with. */
+  error: string
+  /** Already normalized server-side (lib/auth-helpers is server-only). */
+  callbackUrl: string
+}
+
+// better-auth throws these from parseState when the one-time OAuth `state` row
+// is missing at callback time — almost always because the callback URL got hit
+// twice (browser Back after Google's no-consent redirect, bfcache replay,
+// prefetch, double-nav — better-auth#5658 / #6544). The first hit logs the user
+// in; the second lands here. Recoverable: wait for the winning request's
+// session cookie to land, then continue — or restart the flow once.
+const TRANSIENT = new Set([
+  'please_restart_the_process',
+  'state_mismatch',
+  'state_not_found',
+])
+
+// Only one auto-restart per tab session, so a genuinely broken OAuth config
+// can't bounce the user login → Google → login forever.
+const RETRY_GUARD_KEY = 'login-oauth-retried'
+
+const FRIENDLY: Record<string, string> = {
+  account_banned: 'This account has been suspended.',
+  account_not_linked:
+    'An account with this email already exists. Sign in with your original method, then link Google from settings.',
+}
+
+export default function LoginErrorRecovery({ error, callbackUrl }: Props) {
+  const router = useRouter()
+  const [message, setMessage] = useState<string | null>(null)
+  const [recovering, setRecovering] = useState(TRANSIENT.has(error))
+
+  useEffect(() => {
+    if (!TRANSIENT.has(error)) {
+      setMessage(FRIENDLY[error] ?? 'Sign-in was interrupted. Please try again.')
+      return
+    }
+
+    let cancelled = false
+
+    const hasSession = async () => {
+      const { data } = await authClient.getSession()
+      return Boolean(data?.user)
+    }
+
+    const run = async () => {
+      // The losing request usually beats the winning request's Set-Cookie to
+      // the browser — give it a moment, then re-check.
+      let authed = await hasSession()
+      if (!authed) {
+        await new Promise((r) => setTimeout(r, 1200))
+        authed = await hasSession()
+      }
+      if (cancelled) return
+
+      if (authed) {
+        try {
+          sessionStorage.removeItem(RETRY_GUARD_KEY)
+        } catch {
+          // no sessionStorage (private mode) — nothing to clear
+        }
+        router.replace(callbackUrl)
+        return
+      }
+
+      let alreadyRetried = false
+      try {
+        alreadyRetried = sessionStorage.getItem(RETRY_GUARD_KEY) === '1'
+        sessionStorage.setItem(RETRY_GUARD_KEY, '1')
+      } catch {
+        // no sessionStorage — fall through and allow the single retry
+      }
+      if (cancelled) return
+
+      if (alreadyRetried) {
+        setRecovering(false)
+        setMessage("Sign-in didn't complete. Please try again.")
+        return
+      }
+
+      // Fresh flow, fresh `state` row.
+      await authClient.signIn.social({ provider: 'google', callbackURL: callbackUrl })
+    }
+
+    run().catch(() => {
+      if (cancelled) return
+      setRecovering(false)
+      setMessage("Sign-in didn't complete. Please try again.")
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [error, callbackUrl, router])
+
+  if (recovering) {
+    return (
+      <p className="mb-4 text-sm text-muted-foreground" role="status">
+        Reconnecting your session…
+      </p>
+    )
+  }
+
+  if (message) {
+    return <p className="mb-4 text-sm text-destructive">{message}</p>
+  }
+
+  return null
+}

package/components/auth/logoutButtons.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import React from 'react'
+import { authClient } from "../../lib/auth-client";
+import { Button } from '../ui/button';
+
+
+const LogoutButtons = () => {
+  const handleSignOut = async () => {
+    await authClient.signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          window.location.href = "/"
+        }
+      }
+    })
+  }
+
+  return (
+    <div>
+      <Button onClick={handleSignOut}>Logout</Button>
+    </div>
+  )
+}
+
+export default LogoutButtons

package/components/auth/oneTap.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { authClient, useSession } from '../../lib/auth-client'
+import { useRouter } from 'next/navigation'
+import React, { useEffect, useState } from 'react'
+
+type OneTapProps = {
+  /**
+   * Where Better-Auth redirects after a successful One Tap sign-in.
+   * @default "/dashboard"
+   */
+  callbackURL?: string
+}
+
+const OneTap = ({ callbackURL = '/dashboard' }: OneTapProps) => {
+  const { data: session, isPending } = useSession()
+  const router = useRouter()
+  // NEXT_PUBLIC_AUTH_ENABLE_ONE_TAP (build-time) decides whether the plugin
+  // exists in the bundle at all — unchanged. This is the separate, live
+  // on/off switch from the System Settings page: null while unknown, so we
+  // never fire the prompt before we've actually heard back.
+  const [oneTapOffered, setOneTapOffered] = useState<boolean | null>(null)
+
+  useEffect(() => {
+    if (process.env.NEXT_PUBLIC_AUTH_ENABLE_ONE_TAP !== 'true') return
+
+    fetch('/api/settings/public')
+      .then((res) => res.json())
+      .then((data) => setOneTapOffered(Boolean(data.oneTapEnabled)))
+      // Fail closed — never nag a user with a prompt an admin just disabled.
+      .catch(() => setOneTapOffered(false))
+  }, [])
+
+  useEffect(() => {
+    if (process.env.NEXT_PUBLIC_AUTH_ENABLE_ONE_TAP !== 'true') return
+    if (isPending || session) return
+    if (oneTapOffered !== true) return
+
+    authClient.oneTap({
+      callbackURL,
+      onPromptNotification: (notification) => {
+        console.log('One Tap prompt notification:', notification)
+      }
+    })
+  }, [session, isPending, callbackURL, oneTapOffered])
+
+  return null
+}
+
+export default OneTap

package/components/auth/passkeyLogin.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { KeyRound } from 'lucide-react'
+import { Button } from '../ui/button'
+import { authClient } from '../../lib/auth-client'
+import { toast } from 'sonner'
+
+type Props = {
+  callbackUrl?: string
+}
+
+// Passwordless sign-in with a passkey registered from the Settings page.
+const PasskeyLogin = ({ callbackUrl }: Props) => {
+  const router = useRouter()
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const handleClick = async () => {
+    setIsSubmitting(true)
+    try {
+      const { error } = await authClient.signIn.passkey()
+      if (error) {
+        toast.error(error.message || 'Passkey sign-in failed')
+        return
+      }
+      router.push(callbackUrl || '/dashboard')
+      router.refresh()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Passkey sign-in failed')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      className="w-full"
+      onClick={handleClick}
+      disabled={isSubmitting}
+    >
+      <KeyRound className="size-4" />
+      {isSubmitting ? 'Waiting for passkey...' : 'Sign in with a passkey'}
+    </Button>
+  )
+}
+
+export default PasskeyLogin

package/components/auth/resetPasswordForm.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { Button } from '../ui/button'
+import { PasswordInput } from '../ui/password-input'
+import { Label } from '../ui/label'
+import { authClient } from '../../lib/auth-client'
+import { toast } from 'sonner'
+
+type Props = {
+  token: string
+}
+
+type FieldErrors = {
+  password?: string
+  confirmPassword?: string
+}
+
+const ResetPasswordForm = ({ token }: Props) => {
+  const router = useRouter()
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors>({})
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    // Matches better-auth's own default minPasswordLength (emailAndPassword
+    // config doesn't override it in server/auth.ts) — kept in sync here so
+    // the client doesn't accept something the server then rejects.
+    const errors: FieldErrors = {}
+    if (password.length < 8) {
+      errors.password = 'Password must be at least 8 characters'
+    }
+    if (password !== confirmPassword) {
+      errors.confirmPassword = 'Passwords do not match'
+    }
+    if (errors.password || errors.confirmPassword) {
+      setFieldErrors(errors)
+      return
+    }
+    setFieldErrors({})
+
+    setIsSubmitting(true)
+
+    try {
+      const { error } = await authClient.resetPassword({
+        newPassword: password,
+        token,
+      })
+
+      if (error) {
+        toast.error(error.message || 'Failed to reset password')
+      } else {
+        toast.success('Password reset — log in with your new password')
+        router.push('/login')
+      }
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Failed to reset password')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="password" className={fieldErrors.password ? 'text-destructive' : undefined}>
+          New password
+        </Label>
+        <PasswordInput
+          id="password"
+          autoComplete="new-password"
+          aria-invalid={!!fieldErrors.password}
+          aria-describedby={fieldErrors.password ? 'password-error' : undefined}
+          value={password}
+          onChange={(e) => {
+            setPassword(e.target.value)
+            if (fieldErrors.password || fieldErrors.confirmPassword) {
+              setFieldErrors((prev) => ({ ...prev, password: undefined, confirmPassword: undefined }))
+            }
+          }}
+        />
+        {fieldErrors.password && <p id="password-error" className="text-sm text-destructive">{fieldErrors.password}</p>}
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="confirmPassword" className={fieldErrors.confirmPassword ? 'text-destructive' : undefined}>
+          Confirm password
+        </Label>
+        <PasswordInput
+          id="confirmPassword"
+          autoComplete="new-password"
+          aria-invalid={!!fieldErrors.confirmPassword}
+          aria-describedby={fieldErrors.confirmPassword ? 'confirm-password-error' : undefined}
+          value={confirmPassword}
+          onChange={(e) => {
+            setConfirmPassword(e.target.value)
+            if (fieldErrors.confirmPassword) setFieldErrors((prev) => ({ ...prev, confirmPassword: undefined }))
+          }}
+        />
+        {fieldErrors.confirmPassword && <p id="confirm-password-error" className="text-sm text-destructive">{fieldErrors.confirmPassword}</p>}
+      </div>
+      <Button type="submit" className="w-full" disabled={isSubmitting}>
+        {isSubmitting ? 'Resetting...' : 'Reset password'}
+      </Button>
+    </form>
+  )
+}
+
+export default ResetPasswordForm

package/components/auth/socialLogin.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { Button } from '../ui/button'
+import { FcGoogle } from "react-icons/fc";
+import React from 'react'
+import { authClient } from "../../lib/auth-client";
+import { LOGIN_REFERRER_COOKIE } from "../../lib/cookie-names";
+import { toast } from 'sonner'
+
+type Props = {
+  callbackUrl?: string
+  label?: string
+}
+
+const SocialLogin = ({ callbackUrl, label = 'Sign in with Google' }: Props) => {
+  const handleGoogleSignIn = async () => {
+    // The OAuth round trip through Google means the server only sees
+    // accounts.google.com as the referer on the callback request — stash
+    // the actual page here, before we redirect away, so the login-activity
+    // log can show where the user really came from (read back via
+    // getCookie in server/auth.ts's session.create hook).
+    document.cookie = `${LOGIN_REFERRER_COOKIE}=${encodeURIComponent(window.location.href)}; path=/; max-age=300; samesite=lax`
+
+    try {
+      const { error } = await authClient.signIn.social({
+        provider: "google",
+        callbackURL: callbackUrl || "/dashboard"
+      })
+
+      if (error) {
+        toast.error(error.message || 'Failed to sign in with Google')
+      }
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Failed to sign in with Google')
+    }
+  }
+
+  return (
+    <div>
+      <Button
+        variant="outline"
+        className="w-full"
+        onClick={handleGoogleSignIn}
+      >
+        <div className="flex items-center gap-1"><FcGoogle /> {label}</div>
+      </Button>
+    </div>
+  )
+}
+
+export default SocialLogin