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
`children`	`ReactNode`	-
`authClient`	`AuthClient`	`Required`
`hooks?`	`Partial<AuthHooks>`	-
`viewPaths?`	`AuthViewPaths`	`authViewPaths`
`toast?`	`RenderToast`	`Sonner`
`localization?`	`AuthLocalization`	`authLocalization`
`mutators?`	`Partial<AuthMutators>`	-
`additionalFields?`	`AdditionalFields`	-
`avatar?`	`boolean`	`false`
`avatarExtension?`	`string`	`"png"`
`avatarSize?`	`number`	`128 \| 256`
`basePath?`	`string`	`"/auth"`
`baseURL?`	`string`	-
`colorIcons?`	`boolean`	`false`
`confirmPassword?`	`boolean`	`false`
`credentials?`	`boolean`	`true`
`redirectTo?`	`string`	`"/"`
`deleteAccountVerification?`	`boolean`	`false`
`changeEmail?`	`boolean`	`true`
`deleteUser?`	`boolean`	`false`
`emailVerification?`	`boolean`	-
`forgotPassword?`	`boolean`	`true`
`freshAge?`	`number`	`60 * 60 * 24`
`magicLink?`	`boolean`	`false`
`multiSession?`	`boolean`	`false`
`nameRequired?`	`boolean`	`true`
`noColorIcons?`	`boolean`	`false`
`optimistic?`	`boolean`	`false`
`passkey?`	`boolean`	`false`
`persistClient?`	`boolean`	`false`
`providers?`	`SocialProvider[]`	-
`otherProviders?`	`Provider[]`	`false`
`rememberMe?`	`boolean`	`false`
`settingsFields?`	`string[]`	`["name"]`
`settingsURL?`	`string`	-
`signUp?`	`boolean`	`true`
`signUpFields?`	`string[]`	`["name"]`
`twoFactor?`	`("otp" \| "totp")[]`	`undefined`
`username?`	`boolean`	`false`
`navigate?`	`((href: string) => void)`	`window.location.href`
`onSessionChange?`	`(() => void \| Promise<void>)`	-
`replace?`	`((href: string) => void)`	`navigate`
`uploadAvatar?`	`(file: File) => Promise<string>`	-
`Link?`	`any`	`<a>`

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()}
          providers={["github", "google", "facebook", "apple"]}
          multiSession
          magicLink
          passkey
          avatar
          uploadAvatar={(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
          }}
          settingsURL="/dashboard/settings"
          twoFactor={["otp", "totp"]}
          Link={Link}
        >
          {children}
        </AuthUIProvider>
      </body>
    </html>
  )
}

<AuthUIProvider>

Usage

Reference

Example

On this page