Skip to content

Resolve Port issue in client and ensure auth state sync properly #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hasaRanger merged 2 commits into from
Mar 21, 2026
Merged

Resolve Port issue in client and ensure auth state sync properly #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a9473a7
fix: properly pass VITE_BACKEND_URL to Vite build in Dockerfile
vidun-upek Mar 21, 2026
e206add
ensured auth state syncs immediately after login with token change li…
vidun-upek Mar 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions crackcode/client/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ RUN npm install

COPY . .

ARG VITE_API_URL=http://localhost:5051
ENV VITE_API_URL=${VITE_API_URL}

# Accept backend URL as build argument, default to localhost:5051
ARG VITE_BACKEND_URL=http://localhost:5051
ENV VITE_BACKEND_URL=${VITE_BACKEND_URL}

# Create .env.production file with Vite variables
RUN echo "VITE_BACKEND_URL=${VITE_BACKEND_URL}" > .env.production

RUN npm run build

Expand Down
19 changes: 18 additions & 1 deletion crackcode/client/src/context/userauth/authenticationContext.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,24 @@ export const AppContextProvider = (props) => {
useEffect(() => {
setAuthHeader(); // First, restore auth header from localStorage
getAuthState(); // Then check auth status
}, [])
}, []);

// Listen for token changes in localStorage (e.g., login happens somewhere)
// This ensures all components immediately sync when login occurs
useEffect(() => {
if (typeof window === "undefined") return;

const handleStorageChange = (e) => {
if (e.key === "accessToken") {
console.log("🔄 Token changed, syncing auth state...");
setAuthHeader(); // Update axios header
getAuthState(); // Re-check auth status (will call getUserData if logged in)
}
};

window.addEventListener("storage", handleStorageChange);
return () => window.removeEventListener("storage", handleStorageChange);
}, []);

// Listen for solution submissions to refresh user data globally
useEffect(() => {
Expand Down
5 changes: 3 additions & 2 deletions crackcode/client/src/pages/userauth/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,8 @@ const Login = () => {
}

setIsLoggedIn(true);
await getUserData();
await getUserData(); // Wait for user data to load before navigating
console.log("✅ User logged in and data loaded");

// If the returned user isn't verified, prompt verification flow
if (data.user && !data.user.isAccountVerified) {
Expand All @@ -84,7 +85,7 @@ const Login = () => {
navigate("/verify-account");
} else {
toast.success("Welcome back!");
navigate("/home");
navigate("/home"); // Navigate AFTER auth state + user data are fully loaded
}
} else {
toast.error(data?.message || "Login failed.");
Expand Down
Loading