fix(web): route guard to use the new better auth implementation

Author: AlkenD

apps/api/src/lib/auth.ts

@@ -24,6 +24,11 @@ export const auth = betterAuth({
         required: true,
         unique: true,
       },
+      role: {
+        type: "string",
+        required: false,
+        defaultValue: "USER",
+      },
     },
   },
   session: {
@@ -36,6 +41,17 @@ export const auth = betterAuth({
     "http://localhost:3000",
     env.APP_URL || "http://localhost:3000",
   ],
+  onAfterSignUp: async (user: { user: { id: string } }) => {
+    // Check if this is the first user - make them admin
+    const userCount = await prisma.user.count();
+    if (userCount === 1) {
+      // This is the first user
+      await prisma.user.update({
+        where: { id: user.user.id },
+        data: { role: "ADMIN" },
+      });
+    }
+  },
 });
 
 export const authHandler = async (req: Request, res: Response) => {

apps/web/src/contexts/AuthContext.tsx

@@ -12,8 +12,13 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const { data: session, isPending } = useSession();
 
   const login = async (credentials: LoginCredentials) => {
+    // Convert username to email format if it doesn't contain @
+    const emailOrUsername = credentials.username.includes("@")
+      ? credentials.username
+      : `${credentials.username}@dester.local`;
+
     const result = await signIn.email({
-      email: credentials.username,
+      email: emailOrUsername,
       password: credentials.password || credentials.pin || "",
       fetchOptions: {
         onSuccess: () => {
@@ -73,7 +78,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
           id: session.user.id,
           username: session.user.name || session.user.email || "",
           email: session.user.email || "",
-          role: "USER", // Better-auth uses different role system
+          role:
+            ((session.user as unknown as { role?: string }).role as
+              | "USER"
+              | "ADMIN"
+              | "GUEST") || "USER",
           createdAt:
             session.user.createdAt?.toString() || new Date().toISOString(),
           updatedAt:

apps/web/src/routes/settings/route.tsx

@@ -3,20 +3,15 @@ import {
   Link,
   Outlet,
   redirect,
+  useNavigate,
 } from "@tanstack/react-router";
 import { CogIcon, LibraryIcon, VideoIcon, ActivityIcon } from "lucide-react";
 import { useAuth } from "@/hooks/useAuth";
+import { useEffect } from "react";
 
 export const Route = createFileRoute("/settings")({
   component: RouteComponent,
-  beforeLoad: ({ location, context }) => {
-    // Block unauthenticated users and guests from accessing settings
-    const user = (context as { auth?: { user?: { role?: string } } })?.auth
-      ?.user;
-    if (!user || user?.role === "GUEST") {
-      throw redirect({ to: "/login" });
-    }
-
+  beforeLoad: ({ location }) => {
     // If we're at the exact settings route, redirect to libraries
     if (location.pathname === "/settings") {
       throw redirect({ to: "/settings/libraries" });
@@ -25,9 +20,17 @@ export const Route = createFileRoute("/settings")({
 });
 
 function RouteComponent() {
-  const { user } = useAuth();
+  const { user, isAuthenticated, isLoading } = useAuth();
+  const navigate = useNavigate();
   const isAdmin = user?.role === "ADMIN";
 
+  // Redirect unauthenticated users or guests
+  useEffect(() => {
+    if (!isLoading && (!isAuthenticated || user?.role === "GUEST")) {
+      navigate({ to: "/" });
+    }
+  }, [isAuthenticated, user?.role, isLoading, navigate]);
+
   return (
     <div className="pt-[138px] px-4 max-w-7xl mx-auto flex gap-4 h-[calc(100vh-138px)]">
       <nav className="max-w-sm w-full bg-white/10 backdrop-blur-lg rounded-xl p-2 space-y-2">