Integrate organization management with better-auth

Replaced custom auth client with better-auth, updated API routes to /api/v6/auth, and added organization management UI and logic. Users can now create, switch, and manage organizations and members. Updated navigation and context to support organization-aware sessions. Adjusted Vite proxy target for API.

Author: hotlong

package-lock.json

@@ -14,7 +14,8 @@ export const getAuth = async () => {
         });
         authInstance = betterAuth({
             database: pool,
-            trustedOrigins: ["http://localhost:5173", "http://localhost:3000"],
+            baseURL: process.env.BETTER_AUTH_URL || "http://localhost:3100/api/v6/auth",
+            trustedOrigins: ["http://localhost:5173", "http://localhost:3000", "http://localhost:3100"],
             emailAndPassword: {
                 enabled: true
             },

packages/api/src/auth/auth.client.ts

@@ -1,12 +1,17 @@
 import { Controller, All, Req, Res } from '@nestjs/common';
 import { getAuth } from './auth.client';
 
-@Controller('api/auth')
+@Controller('api/v6/auth')
 export class AuthController {
     @All('*')
     async handleAuth(@Req() req, @Res() res) {
-        const auth = await getAuth();
-        const { toNodeHandler } = await import('better-auth/node');
-        return toNodeHandler(auth)(req, res);
+        try {
+            const auth = await getAuth();
+            const { toNodeHandler } = await import('better-auth/node');
+            return toNodeHandler(auth)(req, res);
+        } catch (error) {
+            console.error('Auth Error:', error);
+            res.status(500).json({ error: 'Internal Server Error', details: error.message });
+        }
     }
 }

packages/api/src/auth/auth.controller.ts

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@objectql/ui": "*",
+    "better-auth": "^1.4.10",
     "clsx": "^2.1.0",
     "lucide-react": "^0.344.0",
     "react": "^18.3.1",

packages/client/package.json

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import Login from './pages/Login';
 import Dashboard from './pages/Dashboard';
 import Settings from './pages/Settings';
+import Organization from './pages/Organization';
 import { AuthProvider, useAuth } from './context/AuthContext';
 import { AppSidebar } from './components/app-sidebar';
 import { SidebarProvider, SidebarInset, SidebarTrigger, Separator, Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage } from '@objectql/ui';
@@ -90,7 +91,8 @@ function AppContent() {
                 </Breadcrumb>
             </header>
             <div className="flex flex-1 flex-col gap-4 p-4">
-                {currentPath === '/settings' ? <Settings /> : <Dashboard />}
+                {currentPath === '/settings' ? <Settings /> : 
+                 currentPath === '/organization' ? <Organization /> : <Dashboard />}
             </div>
           </SidebarInset>
       </SidebarProvider>

packages/client/src/App.tsx

@@ -78,13 +78,19 @@ export function NavUser({
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuGroup>
-              <DropdownMenuItem>
+              <DropdownMenuItem onClick={() => {
+                window.history.pushState({}, '', '/settings');
+                window.dispatchEvent(new Event('pushstate'));
+              }}>
                 <BadgeCheck className="mr-2 h-4 w-4" />
                 Account
               </DropdownMenuItem>
-              <DropdownMenuItem>
+              <DropdownMenuItem onClick={() => {
+                window.history.pushState({}, '', '/organization');
+                window.dispatchEvent(new Event('pushstate'));
+              }}>
                 <CreditCard className="mr-2 h-4 w-4" />
-                Billing
+                Organization
               </DropdownMenuItem>
               <DropdownMenuItem>
                 <Bell className="mr-2 h-4 w-4" />