fix auth

Author: Alfagun74

src/components/Login.tsx

@@ -11,7 +11,7 @@ import { useLocation, useNavigate } from "react-router";
 import ThemeSwitch from "./ThemeSwitch";
 
 export function Login() {
-  const { loginBasic, loading, error, setAuth, setUser } = useAuth();
+  const { loginBasic, loading, error, setAuth, setUser, authFetch } = useAuth();
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -20,18 +20,72 @@ export function Login() {
   const [password, setPassword] = useState("");
   const [useSso, setUseSso] = useState(false);
 
-  // Refs for focus trap
   const serverRef = useRef<HTMLInputElement | null>(null);
   const userRef = useRef<HTMLInputElement | null>(null);
   const passRef = useRef<HTMLInputElement | null>(null);
   const submitRef = useRef<HTMLButtonElement | null>(null);
 
+  // Ref for next token refresh; if needed, can alternatively export/set via context
+  const nextTokenRefreshRef = useRef<Date | null>(null);
+
   useEffect(() => {
-    // Auto-focus server field on mount
     serverRef.current?.focus();
   }, []);
 
-  // Effect to check query params for tokens and log in if found
+  const normalizeServer = useCallback((raw: string) => {
+    if (!raw) return raw;
+    let s = raw.trim();
+    if (!/^https?:\/\//i.test(s)) s = `https://${s}`;
+    s = s.replace(/\/+$/, "");
+    return s;
+  }, []);
+
+  // Helper to compute next token refresh (same as in AuthContext)
+  function base64UrlDecode(segment: string): string {
+    try {
+      let s = segment.replace(/-/g, "+").replace(/_/g, "/");
+      const pad = s.length % 4;
+      if (pad) s += "=".repeat(4 - pad);
+      if (typeof atob === "function") return atob(s);
+      if (typeof window === "undefined") return "";
+      // @ts-ignore
+      return atob(s);
+    } catch {
+      return "";
+    }
+  }
+  function parseJwt(token: string) {
+    const parts = token.split(".");
+    if (parts.length !== 3) return null;
+    try {
+      const json = base64UrlDecode(parts[1]);
+      return JSON.parse(json);
+    } catch {
+      return null;
+    }
+  }
+  function computeNextTokenRefresh(token: string): Date {
+    const payload = parseJwt(token);
+    if (!payload) return new Date();
+    const exp = payload.Exp ?? payload.exp;
+    const creation =
+      payload.Creation ?? payload.creation ?? payload.iat ?? payload.Iat;
+    const now = Date.now();
+    if (
+      typeof exp === "number" &&
+      typeof creation === "number" &&
+      exp > creation
+    ) {
+      const lifetimeSec = exp - creation;
+      return new Date(now + lifetimeSec * 1000);
+    }
+    if (typeof exp === "number") {
+      return new Date(exp * 1000);
+    }
+    return new Date();
+  }
+
+  // Effect to handle login via tokens in URL query params
   useEffect(() => {
     const params = new URLSearchParams(location.search);
     const accessToken = params.get("access_token");
@@ -43,46 +97,40 @@ export function Login() {
           const normalizedServer =
             normalizeServer(server) || window.location.origin;
 
-          // Set tokens in auth context and localStorage
+          setServer(normalizedServer);
+          localStorage.setItem("app_server_url", normalizedServer);
+
           setAuth({ access_token: accessToken, refresh_token: refreshToken });
           localStorage.setItem("app_refresh_token", refreshToken);
 
-          // Fetch current user
-          const meResponse = await fetch(`${normalizedServer}/api/users/me`, {
-            headers: {
-              Authorization: `Bearer ${accessToken}`,
-              Accept: "application/json",
-            },
-          });
-
-          if (!meResponse.ok) {
-            throw new Error("Failed to fetch user data");
-          }
+          nextTokenRefreshRef.current = computeNextTokenRefresh(accessToken);
 
+          // Use authFetch from context to support token refresh etc.
+          const meResponse = await authFetch(
+            `${normalizedServer}/api/users/me`,
+          );
+          if (!meResponse.ok) throw new Error("Failed to fetch user");
           const me = await meResponse.json();
           setUser(me);
 
-          // Redirect to library page
           navigate("/library", { replace: true });
 
-          // Clear query params from URL to prevent reuse
+          // Clear query parameters from URL
           window.history.replaceState({}, document.title, location.pathname);
-        } catch (err) {
-          // Could optionally handle errors here
+        } catch {
+          // Optionally handle error: e.g. clearing tokens, showing message
         }
       })();
     }
-  }, [location.search, navigate, server, setAuth, setUser]);
-
-  const normalizeServer = useCallback((raw: string) => {
-    if (!raw) return raw;
-    let s = raw.trim();
-    if (!/^https?:\/\//i.test(s)) {
-      s = `https://${s}`;
-    }
-    s = s.replace(/\/+$/, "");
-    return s;
-  }, []);
+  }, [
+    location.search,
+    navigate,
+    server,
+    setAuth,
+    setUser,
+    authFetch,
+    normalizeServer,
+  ]);
 
   const onSubmit = async (e: FormEvent) => {
     e.preventDefault();
@@ -108,10 +156,7 @@ export function Login() {
       submitRef.current,
     ].filter(
       (el): el is HTMLInputElement | HTMLButtonElement =>
-        !!el &&
-        (typeof (el as any).disabled === "boolean"
-          ? !(el as any).disabled
-          : true),
+        !!el && (!(el as any).disabled ?? true),
     );
     if (elems.length === 0) return;
     const active = document.activeElement as HTMLElement | null;

src/context/AuthContext.tsx

@@ -30,26 +30,17 @@ interface AuthContextValue {
   authFetch: (input: string, init?: RequestInit) => Promise<Response>;
   refreshCurrentUser: () => Promise<GamevaultUser | null>;
 
-  // New setters exposed for external updates
   setAuth: (auth: AuthTokens | null) => void;
   setUser: (user: GamevaultUser | null) => void;
+
+  nextTokenRefreshRef: React.MutableRefObject<Date | null>;
 }
 
 const AuthContext = createContext<AuthContextValue | null>(null);
 
 const REFRESH_KEY = "app_refresh_token";
 const SERVER_KEY = "app_server_url";
 
-interface InternalJwtPayload {
-  exp?: number;
-  Exp?: number;
-  iat?: number;
-  Iat?: number;
-  creation?: number;
-  Creation?: number;
-  [k: string]: any;
-}
-
 function base64UrlDecode(segment: string): string {
   try {
     let s = segment.replace(/-/g, "+").replace(/_/g, "/");
@@ -63,7 +54,8 @@ function base64UrlDecode(segment: string): string {
     return "";
   }
 }
-function parseJwt(token: string): InternalJwtPayload | null {
+
+function parseJwt(token: string) {
   const parts = token.split(".");
   if (parts.length !== 3) return null;
   try {
@@ -73,6 +65,7 @@ function parseJwt(token: string): InternalJwtPayload | null {
     return null;
   }
 }
+
 function computeNextTokenRefresh(token: string): Date {
   const payload = parseJwt(token);
   if (!payload) return new Date();
@@ -106,7 +99,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const nextTokenRefreshRef = useRef<Date | null>(null);
   const refreshInFlightRef = useRef<Promise<void> | null>(null);
 
-  // Maintain refs and state sync
+  // Sync React state and refs
   const setAuth = useCallback((newAuth: AuthTokens | null) => {
     authRef.current = newAuth;
     _setAuth(newAuth);
@@ -220,7 +213,6 @@ export function AuthProvider({ children }: { children: ReactNode }) {
       serverRef.current = (server || "").replace(/\/+$/, "");
       setServerUrl(serverRef.current);
       localStorage.setItem(SERVER_KEY, serverRef.current);
-
       try {
         if (!server || !username || !password)
           throw new Error("All fields are required.");
@@ -309,11 +301,10 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     logout,
     authFetch,
     refreshCurrentUser,
-
     setAuth,
     setUser,
+    nextTokenRefreshRef,
   };
-
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }