diff --git a/frontend/src/components/FirstTimeAdminSetup.jsx b/frontend/src/components/FirstTimeAdminSetup.jsx index 5d34624..09e1f97 100644 --- a/frontend/src/components/FirstTimeAdminSetup.jsx +++ b/frontend/src/components/FirstTimeAdminSetup.jsx @@ -1,9 +1,11 @@ import { AlertCircle, CheckCircle, Shield, UserPlus } from "lucide-react"; import { useId, useState } from "react"; +import { useNavigate } from "react-router-dom"; import { useAuth } from "../contexts/AuthContext"; const FirstTimeAdminSetup = () => { const { login, setAuthState } = useAuth(); + const navigate = useNavigate(); const firstNameId = useId(); const lastNameId = useId(); const usernameId = useId(); @@ -98,13 +100,24 @@ const FirstTimeAdminSetup = () => { // If the response includes a token, use it to automatically log in if (data.token && data.user) { - // Auto-login using the token from the setup response + // Set the authentication state immediately setAuthState(data.token, data.user); - setTimeout(() => {}, 2000); + // Navigate to dashboard after successful setup + setTimeout(() => { + navigate("/", { replace: true }); + }, 100); // Small delay to ensure auth state is set } else { // Fallback to manual login if no token provided - setTimeout(() => { - login(formData.username.trim(), formData.password); + setTimeout(async () => { + try { + await login(formData.username.trim(), formData.password); + } catch (error) { + console.error("Auto-login failed:", error); + setError( + "Account created but auto-login failed. Please login manually.", + ); + setSuccess(false); + } }, 2000); } } else { @@ -132,8 +145,8 @@ const FirstTimeAdminSetup = () => { Admin Account Created!

- Your admin account has been successfully created. You will be - automatically logged in shortly. + Your admin account has been successfully created and you are now + logged in. Redirecting to the dashboard...

diff --git a/frontend/src/contexts/AuthContext.jsx b/frontend/src/contexts/AuthContext.jsx index bf2cf87..cc86e6e 100644 --- a/frontend/src/contexts/AuthContext.jsx +++ b/frontend/src/contexts/AuthContext.jsx @@ -5,6 +5,7 @@ import { useEffect, useState, } from "react"; +import { flushSync } from "react-dom"; import { AUTH_PHASES, isAuthPhase } from "../constants/authPhases"; const AuthContext = createContext(); @@ -268,11 +269,20 @@ export const AuthProvider = ({ children }) => { }, [authPhase, checkAdminUsersExist]); const setAuthState = (authToken, authUser) => { - setToken(authToken); - setUser(authUser); + // Use flushSync to ensure all state updates are applied synchronously + flushSync(() => { + setToken(authToken); + setUser(authUser); + setNeedsFirstTimeSetup(false); + setAuthPhase(AUTH_PHASES.READY); + }); + + // Store in localStorage after state is updated localStorage.setItem("token", authToken); localStorage.setItem("user", JSON.stringify(authUser)); - setAuthPhase(AUTH_PHASES.READY); // Authentication complete, move to ready phase + + // Fetch permissions immediately for the new authenticated user + fetchPermissions(authToken); }; // Computed loading state based on phase and permissions state