Feat/update login flow reload page (#467)

* update spacing event modal

* update spacing create calendar modal

* fix evenchip description color

* using variant instead of sx

* update login flow

* fix: add useEffect import back to Calendar.tsx

src/App.tsx

@@ -42,6 +42,7 @@ const isValidLanguage = (
 
 function App() {
   const error = useAppSelector((state) => state.user.error);
+  const appLoading = useAppSelector((state) => state.loading.isLoading);
   const userLanguage = useAppSelector(
     (state) => state.user.coreConfig.language
   );
@@ -80,6 +81,7 @@ function App() {
           </Router>
           <ErrorSnackbar error={error} type="user" />
         </Suspense>
+        {appLoading && <Loading />}
       </I18n>
     </TwakeMuiThemeProvider>
   );

src/app/loadingSlice.ts

@@ -0,0 +1,30 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface LoadingState {
+  isLoading: boolean;
+  message?: string;
+}
+
+const initialState: LoadingState = {
+  isLoading: false,
+  message: undefined,
+};
+
+const loadingSlice = createSlice({
+  name: "loading",
+  initialState,
+  reducers: {
+    setAppLoading: (state, action: PayloadAction<boolean>) => {
+      state.isLoading = action.payload;
+      if (!action.payload) {
+        state.message = undefined;
+      }
+    },
+    setLoadingMessage: (state, action: PayloadAction<string | undefined>) => {
+      state.message = action.payload;
+    },
+  },
+});
+
+export const { setAppLoading, setLoadingMessage } = loadingSlice.actions;
+export default loadingSlice.reducer;

src/app/store.ts

@@ -3,6 +3,7 @@ import searchResultReducer from "@/features/Search/SearchSlice";
 import settingsReducer from "@/features/Settings/SettingsSlice";
 import userReducer from "@/features/User/userSlice";
 import { combineReducers, configureStore } from "@reduxjs/toolkit";
+import loadingReducer from "./loadingSlice";
 import { createBrowserHistory } from "history";
 import { createReduxHistoryContext } from "redux-first-history";
 
@@ -15,6 +16,7 @@ const rootReducer = combineReducers({
   calendars: eventsCalendar,
   settings: settingsReducer,
   searchResult: searchResultReducer,
+  loading: loadingReducer,
 });
 
 export const setupStore = (preloadedState?: Partial<RootState>) => {

src/components/Calendar/Calendar.tsx

@@ -26,7 +26,6 @@ import timeGridPlugin from "@fullcalendar/timegrid";
 import { Box, Button, radius, useTheme } from "@linagora/twake-mui";
 import AddIcon from "@mui/icons-material/Add";
 import { MutableRefObject, useEffect, useMemo, useRef, useState } from "react";
-import { push } from "redux-first-history";
 import { useI18n } from "twake-i18n";
 import { User } from "../Attendees/PeopleSearch";
 import { EventErrorSnackbar } from "../Error/ErrorSnackbar";
@@ -67,16 +66,10 @@ export default function CalendarApp({
 }: CalendarAppProps) {
   const [selectedDate, setSelectedDate] = useState(new Date());
   const [selectedMiniDate, setSelectedMiniDate] = useState(new Date());
-  const tokens = useAppSelector((state) => state.user.tokens);
   const userId =
     useAppSelector((state) => state.user.userData?.openpaasId) ?? "";
   const dispatch = useAppDispatch();
   const theme = useTheme();
-  useEffect(() => {
-    if (!tokens || !userId) {
-      dispatch(push("/"));
-    }
-  }, [dispatch, tokens, userId]);
   const view = useAppSelector((state) => state.settings.view);
   const userData = useAppSelector((state) => state.user.userData);
   const hideDeclinedEvents = useAppSelector(

src/features/User/HandleLogin.tsx

@@ -1,26 +1,26 @@
 import { useAppDispatch, useAppSelector } from "@/app/hooks";
-import { Loading } from "@/components/Loading/Loading";
 import { redirectTo } from "@/utils/apiUtils";
 import { useEffect, useRef } from "react";
 import { push } from "redux-first-history";
 import { getCalendarsListAsync } from "../Calendars/services";
 import { Auth } from "./oidcAuth";
 import { getOpenPaasUserDataAsync, setTokens, setUserData } from "./userSlice";
+import { setAppLoading } from "@/app/loadingSlice";
 
 export function HandleLogin() {
   const userData = useAppSelector((state) => state.user);
   const calendars = useAppSelector((state) => state.calendars);
   const dispatch = useAppDispatch();
   const hasInitiatedRef = useRef(false);
-  const calendarsLoadingRef = useRef(false);
+  const hasNavigatedRef = useRef(false);
 
+  // Initiate login or load saved data
   useEffect(() => {
     if (hasInitiatedRef.current) return;
-    if (userData.userData) return;
-    if (Object.keys(calendars.list).length > 0) return;
-    if (calendarsLoadingRef.current) return;
+    if (userData.userData && !calendars.pending) return;
 
     hasInitiatedRef.current = true;
+
     const initiateLogin = async () => {
       const savedToken = sessionStorage.getItem("tokenSet")
         ? JSON.parse(sessionStorage.getItem("tokenSet")!)
@@ -30,13 +30,11 @@ export function HandleLogin() {
         : null;
 
       if (savedToken && savedUser) {
+        dispatch(setAppLoading(true));
         dispatch(setTokens(savedToken));
         dispatch(setUserData(savedUser));
         await dispatch(getOpenPaasUserDataAsync());
-        calendarsLoadingRef.current = true;
         await dispatch(getCalendarsListAsync());
-        calendarsLoadingRef.current = false;
-        dispatch(push("/calendar"));
         return;
       }
 
@@ -55,26 +53,34 @@ export function HandleLogin() {
 
     initiateLogin();
   }, [userData.userData, calendars.list, dispatch]);
+
+  // Navigate to /calendar only when all data is ready
   useEffect(() => {
-    if (userData.error) {
+    if (hasNavigatedRef.current) return;
+    if (userData.loading || calendars.pending) return;
+    if (userData.error || calendars.error) {
+      dispatch(setAppLoading(false));
       dispatch(push("/error"));
+      return;
     }
-    if (
-      !calendars.pending &&
-      !userData.loading &&
-      !userData.error &&
-      !calendars.error
-    ) {
-      dispatch(push("/calendar"));
-    }
+    if (!userData.userData || !userData.tokens) return;
+    // Calendars list can be empty, that's valid - just need to finish loading
+
+    // All data is ready, navigate to calendar
+    hasNavigatedRef.current = true;
+    dispatch(setAppLoading(false));
+    dispatch(push("/calendar"));
   }, [
-    calendars.pending,
     userData.loading,
+    userData.userData,
+    userData.tokens,
     userData.error,
+    calendars.pending,
     calendars.error,
     dispatch,
   ]);
-  return <Loading />;
+
+  return null;
 }
 
 export default HandleLogin;

src/features/User/LoginCallback.tsx

@@ -1,7 +1,6 @@
-import { useAppDispatch } from "@/app/hooks";
-import { Loading } from "@/components/Loading/Loading";
+import { useAppDispatch, useAppSelector } from "@/app/hooks";
 import { useEffect, useRef } from "react";
-import { push } from "redux-first-history";
+import { replace } from "redux-first-history";
 import { getCalendarsListAsync } from "../Calendars/services";
 import { Callback } from "./oidcAuth";
 import {
@@ -10,57 +9,113 @@ import {
   setUserData,
   setUserError,
 } from "./userSlice";
+import { setAppLoading } from "@/app/loadingSlice";
 
 export function CallbackResume() {
   const dispatch = useAppDispatch();
   const hasRun = useRef(false);
-  const calendarsLoadingRef = useRef(false);
-  const saved = sessionStorage.getItem("redirectState")
-    ? JSON.parse(sessionStorage.getItem("redirectState")!)
-    : null;
+  const hasNavigated = useRef(false);
+  const userData = useAppSelector((state) => state.user);
+  const calendars = useAppSelector((state) => state.calendars);
+
+  // Process callback and load data
   useEffect(() => {
     if (hasRun.current) {
       return;
     }
     hasRun.current = true;
+
     const runCallback = async () => {
+      // Read redirectState inside useEffect to avoid stale closures
+      const saved = sessionStorage.getItem("redirectState")
+        ? JSON.parse(sessionStorage.getItem("redirectState")!)
+        : null;
+
+      // Check if we have saved tokens (already logged in)
+      const savedToken = sessionStorage.getItem("tokenSet")
+        ? JSON.parse(sessionStorage.getItem("tokenSet")!)
+        : null;
+
+      // If no redirectState but we have saved session, just go home
+      // This can happen if user refreshes callback page or gets redirected here after already logged in
+      if (!saved?.code_verifier) {
+        if (savedToken) {
+          sessionStorage.removeItem("redirectState");
+          dispatch(replace("/"));
+          return;
+        }
+
+        console.warn("Missing redirectState");
+        sessionStorage.removeItem("redirectState");
+        dispatch(replace("/"));
+        return;
+      }
+
       try {
-        const data = await Callback(saved?.code_verifier, saved?.state);
+        dispatch(setAppLoading(true));
+
+        const data = await Callback(saved.code_verifier, saved.state);
+
         if (!data || !data.userinfo || !data.tokenSet) {
           throw new Error("OAuth callback failed");
         }
-        dispatch(setUserData(data?.userinfo));
-        dispatch(setTokens(data?.tokenSet));
+
+        // IMPORTANT: Save tokens to sessionStorage FIRST before making any API calls
+        // because API calls will read token from sessionStorage
+        sessionStorage.setItem("tokenSet", JSON.stringify(data.tokenSet));
+        sessionStorage.setItem("userData", JSON.stringify(data.userinfo));
+
+        dispatch(setUserData(data.userinfo));
+        dispatch(setTokens(data.tokenSet));
+
         await dispatch(getOpenPaasUserDataAsync());
-        if (!calendarsLoadingRef.current) {
-          calendarsLoadingRef.current = true;
-          await dispatch(getCalendarsListAsync());
-          calendarsLoadingRef.current = false;
-        }
+        await dispatch(getCalendarsListAsync());
 
         sessionStorage.removeItem("redirectState");
-        sessionStorage.setItem("tokenSet", JSON.stringify(data?.tokenSet));
-        sessionStorage.setItem("userData", JSON.stringify(data?.userinfo));
-        // Redirect to main page after successful callback
-        dispatch(push("/"));
       } catch (e) {
         console.error("OIDC callback error:", e);
-        // Redirect to error page after error
+        dispatch(setAppLoading(false));
         dispatch(
           setUserError(e instanceof Error ? e.message : "OAuth callback failed")
         );
-        dispatch(push("/error"));
+        dispatch(replace("/error"));
       }
     };
 
-    if (saved?.code_verifier) {
-      runCallback();
-    } else {
-      console.warn("Missing redirectState");
-      sessionStorage.removeItem("redirectState");
-      dispatch(push("/"));
-    }
-  }, [dispatch, saved]);
+    runCallback();
+  }, [dispatch]);
 
-  return <Loading />;
+  // Navigate to /calendar only when all data is ready
+  useEffect(() => {
+    if (hasNavigated.current) return;
+    if (userData.loading || calendars.pending) return;
+    if (userData.error || calendars.error) {
+      dispatch(setAppLoading(false));
+      dispatch(replace("/error"));
+      return;
+    }
+    if (!userData.userData || !userData.tokens) return;
+    // Calendars list can be empty, that's valid - just need to finish loading
+
+    // All data is ready, navigate to calendar
+    hasNavigated.current = true;
+    dispatch(setAppLoading(false));
+
+    // Clear any query params from URL first, then navigate
+    if (window.location.search) {
+      window.history.replaceState({}, "", window.location.pathname);
+    }
+
+    dispatch(replace("/calendar"));
+  }, [
+    userData.loading,
+    userData.userData,
+    userData.tokens,
+    userData.error,
+    calendars.pending,
+    calendars.error,
+    dispatch,
+  ]);
+
+  return null;
 }

src/utils/apiUtils.ts

@@ -50,7 +50,19 @@ export const api = ky.extend({
     afterResponse: [
       async (request, options, response) => {
         if (response.status === 401) {
-          // Attempt token refresh on unauthorized response
+          // Check if we're already on login flow to prevent redirect loop
+          const currentPath = window.location.pathname;
+          if (currentPath === "/" || currentPath === "/callback") {
+            return response;
+          }
+
+          // Check if we have a token in the request
+          const hasAuthHeader = request.headers.has("Authorization");
+          if (!hasAuthHeader) {
+            return response;
+          }
+
+          // Only redirect to SSO if we're sure token is invalid (not just missing)
           const loginurl = await Auth();
 
           sessionStorage.setItem(
@@ -62,6 +74,7 @@ export const api = ky.extend({
           );
           redirectTo(loginurl.redirectTo);
         }
+        return response;
       },
     ],
   },