Better Auth UI

This guide covers integrating 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 "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 "@/components/auth/auth-card";

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