BETTER-AUTH. UI
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.json

Props

Prop

Type

Last updated on

On this page