set admin behind a cookie and check role on profile

context/AuthContext.tsx

@@ -49,6 +49,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const [user, setUser] = useState<AuthUser>(null);
   const [loading, setLoading] = useState<boolean>(true);
 
+  /**
+   * Persist auth to localStorage
+   */
   const persistAuth = useCallback(
     (nextToken: string | null, nextUser: AuthUser) => {
       if (typeof window === "undefined") return;
@@ -68,19 +71,34 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     []
   );
 
-  // Hydrate from localStorage on first load
+  /**
+   * ✅ Hydrate from localStorage ONCE
+   * IMPORTANT: loading only flips false AFTER user/token are set (if present)
+   */
   useEffect(() => {
     if (typeof window === "undefined") return;
 
     const storedToken = window.localStorage.getItem(TOKEN_KEY);
     const storedUser = window.localStorage.getItem(USER_KEY);
 
-    if (storedToken) setToken(storedToken);
-
-    if (storedUser) {
+    if (storedToken && storedUser) {
       try {
-        setUser(JSON.parse(storedUser));
+        const parsedUser = JSON.parse(storedUser);
+
+        setToken(storedToken);
+        setUser(parsedUser);
+
+        // ✅ Re-sync cookie so middleware can allow /admin on hard refresh / direct nav
+        fetch("/api/auth/session", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            token: storedToken,
+            role: parsedUser?.role,
+          }),
+        }).catch(() => {});
       } catch {
+        window.localStorage.removeItem(TOKEN_KEY);
         window.localStorage.removeItem(USER_KEY);
       }
     }
@@ -88,11 +106,24 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     setLoading(false);
   }, []);
 
+  /**
+   * Used by login/register/magic-link
+   */
   const setSession = useCallback(
     (nextToken: string, nextUser: NonNullable<AuthUser>) => {
       setToken(nextToken);
       setUser(nextUser);
       persistAuth(nextToken, nextUser);
+
+      // ✅ Make middleware / server aware of the session
+      fetch("/api/auth/session", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          token: nextToken,
+          role: nextUser.role,
+        }),
+      }).catch(() => {});
     },
     [persistAuth]
   );
@@ -118,6 +149,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         const nextUser: AuthUser =
           data.user ??
           ({
+            uuid: data.uuid,
             email: data.email ?? email,
             displayName: data.displayName ?? null,
             role: data.role ?? "USER",
@@ -160,6 +192,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         const nextUser: AuthUser =
           data.user ??
           ({
+            uuid: data.uuid,
             email: data.email ?? email,
             displayName: data.displayName ?? displayName ?? null,
             role: data.role ?? "USER",
@@ -177,6 +210,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     setToken(null);
     setUser(null);
     persistAuth(null, null);
+
+    // Clear server session cookies
+    fetch("/api/auth/session", { method: "DELETE" }).catch(() => {});
   }, [persistAuth]);
 
   const getAuthHeaders = useCallback((): HeadersInit => {
@@ -191,7 +227,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     register,
     logout,
     getAuthHeaders,
-    setSession, // ✅ important
+    setSession,
   };
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
@@ -203,4 +239,4 @@ export function useAuth(): AuthContextValue {
     throw new Error("useAuth must be used within an AuthProvider");
   }
   return ctx;
-}
+}