Auth

1"use client"
2 
3import type { AuthView } from "@better-auth-ui/core"
4import { useAuth } from "@better-auth-ui/react"
5import { type ComponentType, useEffect } from "react"
6 
7import { AuthRedirect } from "./auth-redirect"
8import { ForgotPassword } from "./forgot-password"
9import type { SocialLayout } from "./provider-buttons"
10import { ResetLinkSent } from "./reset-link-sent"
11import { ResetPassword } from "./reset-password"
12import { SignIn } from "./sign-in"
13import { SignOut } from "./sign-out"
14import { SignUp } from "./sign-up"
15import { VerifyEmail } from "./verify-email"
16 
17export type AuthProps = {
18  className?: string
19  path?: string
20  socialLayout?: SocialLayout
21  socialPosition?: "top" | "bottom"
22  /** @remarks `AuthView` */
23  view?: AuthView
24}
25 
26/**
27 * Built-in views that only make sense when email + password auth is enabled.
28 * When it's disabled, the `<Auth>` router redirects these to `signIn` so a
29 * plugin's `fallbackViews.auth.signIn` (e.g. magic link) takes over.
30 */
31const PASSWORD_ONLY_VIEWS = [
32  "signUp",
33  "forgotPassword",
34  "resetPassword",
35  "resetLinkSent"
36]
37 
38const AUTH_VIEWS: Partial<Record<AuthView, ComponentType<AuthProps>>> = {
39  redirect: AuthRedirect,
40  signIn: SignIn,
41  signOut: SignOut,
42  signUp: SignUp,
43  forgotPassword: ForgotPassword,
44  resetPassword: ResetPassword,
45  resetLinkSent: ResetLinkSent,
46  verifyEmail: VerifyEmail
47}
48 
49/**
50 * Render the appropriate authentication view based on the provided `view` or `path`.
51 *
52 * Resolution order:
53 *   1. Plugin overrides (`plugin.views.auth[currentView]`) — first registered wins.
54 *   2. Plugin fallbacks (`plugin.fallbackViews.auth.signIn`) when password auth is off.
55 *   3. Built-in views.
56 *
57 * @param path - Route path used to resolve an auth view when `view` is not provided
58 * @param socialLayout - Social layout to apply to sign-in/sign-up/magic-link views
59 * @param socialPosition - Position for social buttons (`"top"` or `"bottom"`)
60 * @param view - Explicit auth view to render (e.g., `"signIn"`, `"signUp"`)
61 * @returns The React element for the resolved authentication view
62 */
63export function Auth({
64  className,
65  path,
66  socialLayout,
67  socialPosition,
68  view
69}: AuthProps) {
70  const { basePaths, emailAndPassword, plugins, viewPaths, navigate } =
71    useAuth()
72 
73  if (!view && !path) {
74    throw new Error("[Better Auth UI] Either `view` or `path` must be provided")
75  }
76 
77  const authView =
78    view ||
79    (Object.keys(viewPaths.auth) as AuthView[]).find(
80// … truncated