Components
<AuthProvider>
Provides AuthConfig to descendant components.
Usage
"use client"
import { AuthProvider } from "@better-auth-ui/react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useTheme } from "next-themes"
import type { ReactNode } from "react"
import { authClient } from "@/lib/auth-client"
import { Toaster } from "./ui/sonner"
export function Providers({ children }: { children: ReactNode }) {
const router = useRouter()
const { theme, setTheme } = useTheme()
return (
<AuthProvider
authClient={authClient}
socialProviders={["google", "github"]}
deleteUser={{ enabled: true }}
magicLink
multiSession
redirectTo="/dashboard"
navigate={({ to, replace }) =>
replace ? router.replace(to) : router.push(to)
}
settings={{
appearance: { theme, setTheme }
}}
Link={Link}
>
{children}
<Toaster />
</AuthProvider>
)
}"use client"
import { AuthProvider } from "@better-auth-ui/shadcn/react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useTheme } from "next-themes"
import type { ReactNode } from "react"
import { authClient } from "@/lib/auth-client"
import { Toaster } from "./ui/sonner"
export function Providers({ children }: { children: ReactNode }) {
const router = useRouter()
const { theme, setTheme } = useTheme()
return (
<AuthProvider
authClient={authClient}
socialProviders={["google", "github"]}
deleteUser={{ enabled: true }}
magicLink
multiSession
redirectTo="/dashboard"
navigate={({ to, replace }) =>
replace ? router.replace(to) : router.push(to)
}
settings={{
appearance: { theme, setTheme }
}}
Link={Link}
>
{children}
<Toaster />
</AuthProvider>
)
}Installation
npx shadcn@latest add https://better-auth-ui.com/r/auth-provider.jsonProps
Prop
Type
Last updated on