Better Auth UI

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 auth paths by providing your custom routes through the viewPaths prop on the <AuthUIProvider /> component. The viewPaths prop controls authentication pages like sign-in, sign-up, forgot password, etc.

"use client"

import { AuthUIProvider } from "@daveyplate/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"
            }}
        >
            {children}
        </AuthUIProvider>
    )
}

Now your newly configured viewPaths object is as follows:

Default Path	Custom 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`

Customizing Account View Paths

Account settings paths (like settings, security, api-keys) are configured separately using the account.viewPaths prop:

<AuthUIProvider
    authClient={authClient}
    account={{
        viewPaths: {
            SETTINGS: "profile",
            SECURITY: "password",
            API_KEYS: "keys",
            ORGANIZATIONS: "orgs"
        }
    }}
>
    {children}
</AuthUIProvider>

This would change the paths from /account/settings to /account/profile, etc.

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 { AuthView } from "@daveyplate/better-auth-ui"
import { authViewPaths } from "@daveyplate/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"
    }).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">
            <AuthView pathname={pathname} />
        </div>
    )
}

Note: The authViewPaths object only includes authentication pages, not account settings pages. Account pages are handled separately via the account prop configuration.

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>
        </nav>
    )
}

Summary of Steps (Recap):

Defined custom auth view paths within AuthUIProvider using the viewPaths prop
Optionally defined custom account view paths using account.viewPaths
Updated dynamic auth page to handle correct paths within generateStaticParams
Revised links throughout your app to use the newly specified paths

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

Custom Auth Paths