docs: Better Auth UI Upgrade Documentation

.env.example

@@ -16,11 +16,6 @@ AUTH_SECRET='<YOUR_AUTH_SECRET>'
 AUTH_GOOGLE_ID='<AUTH_GOOGLE_ID>'
 AUTH_GOOGLE_SECRET='<AUTH_GOOGLE_SECRET>'
 
-# Pre-configured Discord OAuth provider, works out-of-the-box.
-# @see https://www.better-auth.com/docs/authentication/discord
-AUTH_DISCORD_ID='<AUTH_DISCORD_ID>'
-AUTH_DISCORD_SECRET='<AUTH_DISCORD_SECRET>'
-
 # Pre-configured GitHub OAuth provider, works out-of-the-box.
 # @see https://www.better-auth.com/docs/authentication/github
 AUTH_GITHUB_ID='<AUTH_GITHUB_ID>'

apps/web/package.json

@@ -30,7 +30,7 @@
     "@blocknote/react": "~0.39.1",
     "@blocknote/server-util": "~0.39.1",
     "@blocknote/xl-ai": "~0.39.1",
-    "@daveyplate/better-auth-ui": "~2.1.11",
+    "@daveyplate/better-auth-ui": "~3.2.5",
     "@hookform/resolvers": "~5.0.1",
     "@mantine/core": "~8.1.3",
     "@mastra/core": "~0.15.2",

apps/web/src/app/(app)/@appSidebar/_components/app-sidebar-pages.tsx

@@ -3,7 +3,6 @@
 import type { Page } from "@acme/db/schema";
 import { useQuery } from "@tanstack/react-query";
 import { BookOpen, ChevronRight } from "lucide-react";
-import { usePathname } from "next/navigation";
 import { useState } from "react";
 import {
   Collapsible,
@@ -20,20 +19,22 @@ import { AppSidebarPageItem } from "./app-sidebar-page-item";
 import { CreatePageButton } from "./create-page-button";
 
 type AppSidebarPagesProps = {
-  pages: Page[];
+  initialPages: Page[];
+  defaultOpen?: boolean;
 };
 
-export const AppSidebarPages = (props: AppSidebarPagesProps) => {
+export const AppSidebarPages = ({
+  initialPages,
+  defaultOpen = true,
+}: AppSidebarPagesProps) => {
   const trpc = useTRPC();
-  const pathname = usePathname();
   const { state, setOpen } = useSidebar();
 
   const { data: pages } = useQuery({
     ...trpc.pages.getByUser.queryOptions(),
-    initialData: props.pages,
+    initialData: initialPages,
   });
 
-  const defaultOpen = pathname.includes("/pages/");
   const [isOpen, setIsOpen] = useState(defaultOpen);
 
   const handlePagesClick = (e: React.MouseEvent) => {

apps/web/src/app/(app)/@appSidebar/_components/app-sidebar-user-settings.tsx

@@ -15,7 +15,7 @@ export function AppSidebarUserSettings() {
 
     // Add a small delay to allow the dropdown to close before navigation
     requestAnimationFrame(() => {
-      router.push("/auth/settings");
+      router.push("/account/settings");
     });
   };
 

apps/web/src/app/(app)/@appSidebar/default.tsx

@@ -21,7 +21,7 @@ import { AppSidebarUserSkeleton } from "./_components/app-sidebar-user-skeleton"
 
 async function SuspendedAppSidebarPages() {
   const pages = await api.pages.getByUser();
-  return <AppSidebarPages pages={pages} />;
+  return <AppSidebarPages initialPages={pages} />;
 }
 
 export default function AppSidebar() {

apps/web/src/app/(app)/@billingModal/(.)subscription/page.tsx → apps/web/src/app/(app)/@subscriptionModal/(.)subscription/page.tsx

@@ -6,9 +6,9 @@ import {
 } from "~/components/ui/dialog";
 import { api } from "~/trpc/server";
 import { SubscriptionView } from "../../../(dashboard)/subscription/_components/subscription-view";
-import { SubscriptionModal } from "./_components/subscription-modal";
+import { SubscriptionModal } from "../_components/subscription-modal";
 
-export default async function SubscriptionBillingModalPage() {
+export default async function SubscriptionModalPage() {
   const subscription = await api.subscription.getSubscription();
   if (!subscription) {
     return redirect("/journal");

apps/web/src/app/(app)/@billingModal/(.)subscription/_components/subscription-modal.tsx → apps/web/src/app/(app)/@subscriptionModal/_components/subscription-modal.tsx

@@ -4,24 +4,20 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Dialog } from "~/components/ui/dialog";
 
-export const SubscriptionModal = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
+export function SubscriptionModal({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   const [isOpen, setIsOpen] = useState(true);
 
-  const handleOpenChange = (open: boolean) => {
+  function handleOpenChange(open: boolean) {
     if (!open) {
       setIsOpen(false);
       router.back();
     }
-  };
+  }
 
   return (
     <Dialog open={isOpen} onOpenChange={handleOpenChange}>
       {children}
     </Dialog>
   );
-};
+}

apps/web/src/app/(app)/@subscriptionModal/default.tsx

@@ -0,0 +1,3 @@
+export default function DefaultSubscriptionModalPage() {
+  return null;
+}

apps/web/src/app/(app)/@billingModal/error.tsx → apps/web/src/app/(app)/@subscriptionModal/error.tsx

@@ -10,26 +10,26 @@ import {
   DialogTitle,
 } from "~/components/ui/dialog";
 
-export default function BillingModalError({
+export default function SubscriptionModalError({
   error,
   reset,
 }: {
   error: Error & { digest?: string };
   reset: () => void;
 }) {
   useEffect(() => {
-    console.error("Billing modal error:", error);
+    console.error("Subscription modal error:", error);
   }, [error]);
 
   return (
     <Dialog open={true}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Billing Error</DialogTitle>
+          <DialogTitle>Subscription Error</DialogTitle>
         </DialogHeader>
         <div className="space-y-4">
           <p className="text-muted-foreground">
-            We encountered an error while loading your billing information.
+            We encountered an error while loading your subscription information.
           </p>
           <div className="flex justify-end space-x-2">
             <Button asChild>

apps/web/src/app/(app)/layout.tsx

@@ -12,7 +12,7 @@ type AppLayoutProps = {
   chatDrawer: React.ReactNode;
   chatSidebar: React.ReactNode;
   header: React.ReactNode;
-  billingModal: React.ReactNode;
+  subscriptionModal: React.ReactNode;
 };
 
 function AppLayout({
@@ -21,7 +21,7 @@ function AppLayout({
   chatDrawer,
   chatSidebar,
   header,
-  billingModal,
+  subscriptionModal,
 }: AppLayoutProps) {
   return (
     <AppProviders>
@@ -39,7 +39,7 @@ function AppLayout({
           <ChatSidebarTrigger />
         </div>
       </SidebarProvider>
-      {billingModal}
+      {subscriptionModal}
       <Toaster />
     </AppProviders>
   );

apps/web/src/app/(dashboard)/_components/dashboard-header.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { SignedIn, SignedOut } from "@daveyplate/better-auth-ui";
 import { ArrowLeft, LogOut } from "lucide-react";
 import Link from "next/link";
@@ -25,7 +27,7 @@ export function DashboardHeader({ className }: UserHeaderProps) {
         className,
       )}
     >
-      <div className="hidden flex-row items-center sm:flex">
+      <div className="flex flex-row items-center">
         <div className="flex flex-row items-center gap-x-2">
           <span className="font-bold text-xl">Dashboard</span>
         </div>
@@ -34,7 +36,7 @@ export function DashboardHeader({ className }: UserHeaderProps) {
         className="mx-auto flex max-w-svw flex-1 justify-between [&>div]:w-full"
         viewport={false}
       >
-        <NavigationMenuList className="w-full justify-between gap-x-2 sm:justify-end">
+        <NavigationMenuList className="w-full justify-end gap-x-2">
           <SignedOut>
             <NavigationMenuItem>
               <NavigationMenuLink

apps/web/src/app/(dashboard)/_components/dashboard-providers.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { ThemeProvider } from "next-themes";
 import type { ComponentProps } from "react";
 import { TRPCReactProvider } from "~/trpc/react";
@@ -10,13 +11,18 @@ function AuthLink({
   href,
   ...rest
 }: Omit<ComponentProps<typeof Link>, "onNavigate">) {
+  const pathname = usePathname();
+  const isAuthView = pathname.startsWith("/auth");
   return (
     <Link
       {...rest}
       href={href}
       onNavigate={(e) => {
-        e.preventDefault();
-        window.location.href = href.toString();
+        // Prevent a self-interception of the auth views (otherwise the modal is mounted again - weird Next.js quirks)
+        if (isAuthView) {
+          e.preventDefault();
+          window.location.href = href.toString();
+        }
       }}
     />
   );

apps/web/src/app/(dashboard)/account/[pathname]/_components/account-view.tsx

@@ -0,0 +1,34 @@
+import { AccountView as PrimitiveAccountView } from "@daveyplate/better-auth-ui";
+import { redirect } from "next/navigation";
+
+const ACCOUNT_VIEWS = new Set(["settings", "security"]);
+
+export async function AuthView({ pathname }: { pathname: string }) {
+  if (!ACCOUNT_VIEWS.has(pathname)) {
+    redirect("/");
+  }
+
+  return (
+    <PrimitiveAccountView
+      className="z-10 w-full flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm"
+      classNames={{
+        base: "bg-transparent border-none shadow-none",
+        card: {
+          base: "pt-6 gap-6",
+          cell: "bg-card text-card-foreground flex rounded-xl border shadow-sm flex-row items-center gap-3 px-4 py-3 [&>button]:!ms-auto",
+          footer: "bg-transparent [&:not(:empty)]:py-4 [&:empty]:py-0",
+        },
+        drawer: {
+          menuItem: "bg-sidebar my-1",
+        },
+        sidebar: {
+          base: "gap-y-2",
+          button: "cursor-pointer text-primary",
+          buttonActive:
+            "cursor-pointer border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        },
+      }}
+      pathname={pathname}
+    />
+  );
+}

apps/web/src/app/(dashboard)/account/[pathname]/page.tsx

@@ -0,0 +1,20 @@
+import { authViewPaths } from "@daveyplate/better-auth-ui/server";
+import { withAuth } from "~/auth/guards";
+import { AuthView } from "./_components/account-view";
+
+export function generateStaticParams() {
+  return Object.values(authViewPaths).map((pathname) => ({ pathname }));
+}
+
+async function AccountPage({
+  params,
+}: {
+  params: Promise<{ pathname: string }>;
+}) {
+  const { pathname } = await params;
+  return <AuthView pathname={pathname} />;
+}
+
+export default withAuth(AccountPage, {
+  redirectTo: "/auth/sign-in",
+});