BETTER-AUTH. UI
Advanced

Custom Auth Paths

Here's a complete guide on how to customize view paths using the AuthUIProvider component. This example will show you how to change the auth routes from /auth/sign-in and /auth/sign-out to use custom paths such as /auth/login and /auth/logout, respectively.

Step 1: Customize Auth View Paths

First, customize the default built-in paths by providing your custom routes through the viewPaths prop on the <AuthUIProvider /> component.

"use client";

import { AuthUIProvider } from "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}
      viewPaths={{
        SIGN_IN: "login",
        SIGN_OUT: "logout",
        SIGN_UP: "register",
        FORGOT_PASSWORD: "forgot",
        RESET_PASSWORD: "reset",
        MAGIC_LINK: "magic",
        SETTINGS: "config",
      }}
    >
      {children}
    </AuthUIProvider>
  );
}

Now your newly configured viewPaths object is as follows:

Default PathCustom Path
/auth/sign-in/auth/login
/auth/sign-out/auth/logout
/auth/sign-up/auth/register
/auth/forgot-password/auth/forgot
/auth/reset-password/auth/reset
/auth/magic-link/auth/magic
/auth/settings/auth/config

Adjusting Dynamic Auth Route

Next, your authentication page route can dynamically handle these paths. Set up your dynamic authentication page based on these custom routes.

Using Next.js App Router (app router):

import { AuthCard } from "@/components/auth/auth-card";
import { authViewPaths } from "better-auth-ui";

export function generateStaticParams() {
  return Object.values({
    ...authViewPaths,
    SIGN_IN: "login",
    SIGN_OUT: "logout",
    SIGN_UP: "register",
    FORGOT_PASSWORD: "forgot",
    RESET_PASSWORD: "reset",
    MAGIC_LINK: "magic",
    SETTINGS: "config",
  }).map((pathname) => ({ pathname }));
}

export default async function AuthPage({
  params,
}: {
  params: Promise<{ pathname: string }>;
}) {
  const { pathname } = await params;

  return (
    <div className="flex flex-col grow size-full items-center justify-center gap-3">
      <AuthCard pathname={pathname} />
    </div>
  );
}

Example usage across your app:

Linking to new auth views:

import Link from "next/link";

export default function Navbar() {
  return (
    <nav className="flex gap-4">
      <Link href="/auth/login">Login</Link>
      <Link href="/auth/register">Register</Link>
      <Link href="/auth/forgot">Forgot Password</Link>
      <Link href="/auth/config">Config</Link>
    </nav>
  );
}

Summary of Steps (Recap):

  • Defined custom view paths within AuthUIProvider.
  • Updated dynamic auth page to handle correct paths within generateStaticParams.
  • Revised links/apps accordingly to use your newly specified paths.

You have now successfully customized all your authentication URLs using the shipped customization options while preserving all the other features and integrations seamlessly.

Localization

Previous Page

Custom Settings

Next Page