Better Auth UI

The <AuthUIProvider> wraps your application with authentication context, providing essential hooks, settings, and methods required by authentication-related components and hooks throughout your app.

Usage

providers.tsx

"use client"

import { AuthUIProvider } from '@daveyplate/better-auth-ui'
import { authClient } from '@/lib/auth-client'
import { useRouter } from 'next/navigation'
import Link from 'next/link'

export function Providers({ children }: { children: React.ReactNode }) {
  const router = useRouter()

  return (
    <AuthUIProvider
      authClient={authClient}
      navigate={router.push}
      replace={router.replace}
      onSessionChange={() => router.refresh()}
      Link={Link}
    >
      {children}
    </AuthUIProvider>
  )
}

Reference

The following props can be passed to the <AuthUIProvider> component:

Prop	Type	Default
`Link?`	`any`	`<a>`
`replace?`	`((href: string) => void)`	`navigate`
`onSessionChange?`	`(() => void \| Promise<void>)`	-
`navigate?`	`((href: string) => void)`	`window.location.href`
`twoFactor?`	`("otp" \| "totp")[]`	`undefined`
`social?`	`SocialOptions`	-
`persistClient?`	`boolean`	`false`
`passkey?`	`boolean`	`false`
`optimistic?`	`boolean`	`false`
`oneTap?`	`boolean`	`false`
`nameRequired?`	`boolean`	`true`
`multiSession?`	`boolean`	`false`
`emailOTP?`	`boolean`	`false`
`magicLink?`	`boolean`	`false`
`gravatar?`	`boolean \| GravatarOptions`	-
`genericOAuth?`	`GenericOAuthOptions`	-
`freshAge?`	`number`	`60 * 60 * 24`
`emailVerification?`	`boolean`	-
`changeEmail?`	`boolean`	`true`
`redirectTo?`	`string`	`"/"`
`colorIcons?`	`boolean`	`undefined`
`captcha?`	`CaptchaOptions`	-
`baseURL?`	`string`	-
`basePath?`	`string`	`"/auth"`
`apiKey?`	`boolean \| { prefix?: string \| undefined; metadata?: Record<string, unknown> \| undefined; }`	-
`additionalFields?`	`AdditionalFields`	-
`signUp?`	`boolean \| SignUpOptions`	`{ fields: ["name"] }`
`credentials?`	`boolean \| CredentialsOptions`	`{ forgotPassword: true }`
`organization?`	`boolean \| OrganizationOptions`	-
`mutators?`	`Partial<AuthMutators>`	-
`localization?`	`AuthLocalization`	`authLocalization`
`toast?`	`RenderToast`	`Sonner`
`viewPaths?`	`AuthViewPaths`	`authViewPaths`
`settings?`	`boolean \| Partial<SettingsOptions>`	`{ fields: ["image", "name"] }`
`hooks?`	`Partial<AuthHooks>`	-
`deleteUser?`	`boolean \| DeleteUserOptions`	`undefined`
`avatar?`	`boolean \| Partial<AvatarOptions>`	`undefined`
`authClient`	`AuthClient`	`Required`
`children`	`ReactNode`	-
`avatarExtension?`	`string`	-
`avatarSize?`	`number`	-
`deleteAccountVerification?`	`boolean`	-
`settingsFields?`	`string[]`	-
`settingsURL?`	`string`	-
`providers?`	`SocialProvider[]`	-
`otherProviders?`	`Provider[]`	-
`signInSocial?`	`((params: any) => Promise<unknown>)`	-
`confirmPassword?`	`boolean`	-
`forgotPassword?`	`boolean`	-
`noColorIcons?`	`boolean`	-
`passwordValidation?`	`PasswordValidation`	-
`rememberMe?`	`boolean`	-
`uploadAvatar?`	`((file: File) => Promise<string \| null \| undefined>)`	-
`username?`	`boolean`	-
`signUpFields?`	`string[]`	-

Example

A minimal Next.js layout file using the AuthUIProvider:

"use client"

import { AuthUIProvider } from "@daveyplate/better-auth-ui"
import { authClient } from "@/lib/auth-client"
import { useRouter } from "next/navigation"
import Link from "next/link"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter()

  return (
    <html lang="en">
      <body>
        <AuthUIProvider
          authClient={authClient}
          navigate={router.push}
          replace={router.replace}
          onSessionChange={() => router.refresh()}
          social={{
            providers: ["github", "google", "facebook", "apple"]
          }}
          multiSession
          magicLink
          passkey
          avatar={{
            upload: async (file) => {
              const formData = new FormData()
              formData.append("avatar", file)

              const res = await fetch("/api/uploadAvatar", { method: "POST", body: formData })
              const { data } = await res.json()

              return data.url
            }
          }}
          captcha={{
            provider: "google-recaptcha-v3",
            siteKey: "your-site-key",
          }}
          settings={{
            url: "/dashboard/settings"
          }}
          twoFactor={["otp", "totp"]}
          Link={Link}
        >
          {children}
        </AuthUIProvider>
      </body>
    </html>
  )
}

<AuthUIProvider>

Usage

Reference

Example

On this page