Improve auth flows

web/context/AuthContext.js

@@ -19,6 +19,28 @@ export function AuthProvider({ children }) {
   const [token, setToken] = useState(null);
   const [loading, setLoading] = useState(true);
 
+  const refreshUser = useCallback(async (providedToken) => {
+    const activeToken = providedToken ?? token;
+    if (!activeToken) {
+      setUser(null);
+      return null;
+    }
+
+    const userInfo = await fetchCurrentUser(activeToken);
+    if (!userInfo) {
+      localStorage.removeItem(TOKEN_KEY);
+      setToken(null);
+      setUser(null);
+      return null;
+    }
+
+    if (!token) {
+      setToken(activeToken);
+    }
+    setUser(userInfo);
+    return userInfo;
+  }, [token]);
+
   useEffect(() => {
     const stored = localStorage.getItem(TOKEN_KEY);
     if (!stored) {
@@ -26,17 +48,14 @@ export function AuthProvider({ children }) {
 
       return;
     }
-    fetchCurrentUser(stored)
-      .then((data) => {
-        if (data) {
-          setToken(stored);
-          setUser(data);
-        } 
-        
-        else {
-          localStorage.removeItem(TOKEN_KEY);
-        }
-      }).catch(() => localStorage.removeItem(TOKEN_KEY)).finally(() => setLoading(false));}, []);
+    refreshUser(stored)
+      .catch(() => {
+        localStorage.removeItem(TOKEN_KEY);
+        setToken(null);
+        setUser(null);
+      })
+      .finally(() => setLoading(false));
+  }, [refreshUser]);
 
   const login = useCallback(async (username, password) => {
     const res = await fetch("/api/v1/auth/login", {
@@ -55,12 +74,10 @@ export function AuthProvider({ children }) {
     localStorage.setItem(TOKEN_KEY, jwt);
     setToken(jwt);
 
-    const userInfo = await fetchCurrentUser(jwt);
-
-    setUser(userInfo);
+    const userInfo = await refreshUser(jwt);
 
     return userInfo;
-  }, []);
+  }, [refreshUser]);
 
   const register = useCallback(async ({ username, password, email, fullName, phone }) => {
     const res = await fetch("/api/v1/auth/register", {
@@ -79,11 +96,10 @@ export function AuthProvider({ children }) {
     localStorage.setItem(TOKEN_KEY, jwt);
     setToken(jwt);
 
-    const userInfo = await fetchCurrentUser(jwt);
-    setUser(userInfo);
+    const userInfo = await refreshUser(jwt);
 
     return userInfo;
-  }, []);
+  }, [refreshUser]);
 
   const logout = useCallback(() => {
     localStorage.removeItem(TOKEN_KEY);
@@ -91,7 +107,7 @@ export function AuthProvider({ children }) {
     setUser(null);}, []);
 
   return (
-    <AuthContext.Provider value={{ user, token, loading, login, logout, register }}>
+    <AuthContext.Provider value={{ user, token, loading, login, logout, register, refreshUser }}>
       {children}
     </AuthContext.Provider>
   );