Custom Settings

The default authentication components provided by better-auth-ui include built-in settings pages accessible under the same base path as your account views (e.g., /account/settings, /account/security, etc.).

However, for advanced use cases, you may want to:

1. Move the built-in settings views to a different base path (using account.basePath)
2. Replace the settings with a completely custom implementation (using account.url)
3. Build your own settings page using individual components

Overview

You have three primary ways to customize the settings experience:

1. Move settings to a different path: Use account.basePath to relocate all built-in settings views while keeping their functionality
2. Build custom layouts: Import individual settings components to create your own layouts
3. Use AccountView for full dashboard: Use the high-level <AccountView /> component for a complete settings experience

Quick Comparison

Option 1: Moving Settings to a Different Base Path

If you want to keep the built-in settings functionality but move it to a different location (e.g., from /account/settings to /dashboard/settings), use the account.basePath option:

"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()}
      account={{
        basePath: "/dashboard", // Settings views will be at /dashboard/settings, /dashboard/security, etc.
      }}
      Link={Link}
    >
      {children}
    </AuthUIProvider>
  );
}

With this configuration:

• Auth views remain at their default (or configured) paths
• Settings views move to: /dashboard/settings, /dashboard/security, /dashboard/api-keys, /dashboard/organizations, etc.
• The <UserButton /> and <AccountView /> components automatically use the new base path

Option 2: Building Custom Settings Layouts

For maximum control, you can build your own settings page layouts using individual components.

Using AccountView

The easiest way to get started is using the <AccountView /> component, which automatically handles navigation between all enabled settings sections.

import { AccountView } from "@/components/account/account-view";

export default function UserSettingsPage() {
  return (
    <div className="mx-auto max-w-4xl py-12 px-4">
      <AccountView />
    </div>
  );
}

Individually Using Settings Components

For finer-grained control, selectively import the components you want:

Handling Authentication for Settings Page

It's essential that your custom settings page is protected and accessible only by authenticated users. You can use <SignedIn /> and <RedirectToSignIn /> to ensure your settings pages are secured:

Example:

import { RedirectToSignIn, SignedIn } from "better-auth-ui";
import { AccountView } from "@/components/account/account-view";

export default function CustomSettingsPage() {
  return (
    <>
      <RedirectToSignIn />

      <SignedIn>
        <div className="max-w-4xl mx-auto py-12">
          <AccountView />
        </div>
      </SignedIn>
    </>
  );
}