Better Auth UI

This guide covers integrating @daveyplate/better-auth-ui into your React project.

Setting up AuthUIProvider

First, set up <AuthUIProvider> as it provides context and hooks required by all subsequent authentication components. Create a top-level provider to encapsulate your app:

src/providers.tsx

import { AuthUIProvider } from "@daveyplate/better-auth-ui"
import { authClient } from "@/lib/auth-client"
import { useNavigate, NavLink } from "react-router-dom"

export function Providers({ children }: { children: React.ReactNode }) {
  const navigate = useNavigate()

  return (
      <AuthUIProvider
        authClient={authClient}
        navigate={navigate}
        Link={NavLink}
      >
          {children}
      </AuthUIProvider>
    )
}

Wrap your root component with the newly created Providers component in your main app entry point, typically in src/main.tsx or src/index.tsx.

src/main.tsx

import ReactDOM from "react-dom/client"
import App from "./App.tsx"
import { BrowserRouter } from "react-router-dom"
import { Providers } from "./Providers"

ReactDOM.createRoot(document.getElementById("root")!).render(
  <BrowserRouter>
    <Providers>
      <App />
    </Providers>
  </BrowserRouter>
)

Creating Auth Pages

Configure routes to render <AuthCard> for authentication views using React Router.

Create a dynamic authentication route such as auth/[pathname].tsx inside your src directory. Here's a recommended setup:

src/pages/auth/AuthPage.tsx

import { useParams } from "react-router-dom"
import { AuthCard } from "@daveyplate/better-auth-ui"

export default function AuthPage() {
  const { pathname } = useParams()

  return (
    <main className="container flex grow flex-col items-center justify-center gap-3 self-center p-4 md:p-6">
      <AuthCard pathname={pathname} />
    </main>
  )
}

Use React Router to configure these dynamic authentication routes:

src/App.tsx

import { Routes, Route } from "react-router-dom"
import AuthPage from "./pages/auth/AuthPage"

function App() {
  return (
    <Routes>
      <Route path="/auth/:pathname" element={<AuthPage />} />
    </Routes>
  )
}

The dynamic segment [pathname] covers the following default authentication views:

/auth/sign-in – Sign in via email, password, social providers, or passkey (WebAuthn)
/auth/sign-up – New account registration, with additional fields supported
/auth/magic-link – Email login without password
/auth/forgot-password – Trigger password reset email
/auth/reset-password – Allow users to reset forgotten passwords
/auth/sign-out – Log out action
/auth/settings – User account management page (authentication required)
/auth/callback – Internal OAuth/Auth callback handler (do not use directly)

Your authentication flow is now completely set up and supporting full customization capabilities.

React

Setting up AuthUIProvider

Creating Auth Pages

On this page