diff --git a/src/platform/src/core/utils/protectedRoute.js b/src/platform/src/core/utils/protectedRoute.js index cc2bbf2469..dd574f155f 100644 --- a/src/platform/src/core/utils/protectedRoute.js +++ b/src/platform/src/core/utils/protectedRoute.js @@ -1,12 +1,12 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { useRouter } from 'next/router'; import { useSelector, useDispatch } from 'react-redux'; -import LogoutUser from '@/core/utils/LogoutUser'; import Cookies from 'js-cookie'; import jwt_decode from 'jwt-decode'; import { setUserInfo, setSuccess, + resetStore, } from '@/lib/store/services/account/LoginSlice'; import { getIndividualUserPreferences } from '@/lib/store/services/account/UserDefaultsSlice'; import { getUserDetails } from '@/core/apis/Account'; @@ -14,15 +14,18 @@ import Spinner from '../../common/components/Spinner'; const MAX_RETRIES = 3; const RETRY_DELAY = 1000; +const LOGIN_ROUTE = '/account/login'; export default function withAuth(Component) { return function WithAuthComponent(props) { const dispatch = useDispatch(); const router = useRouter(); const userCredentials = useSelector((state) => state.login); - const [isRedirecting, setIsRedirecting] = React.useState( + const [isRedirecting, setIsRedirecting] = useState( router.query.success === 'google', ); + const [redirectToLogin, setRedirectToLogin] = useState(false); + const [isMounted, setIsMounted] = useState(false); const retryWithDelay = async (fn, retries = MAX_RETRIES) => { try { @@ -58,47 +61,78 @@ export default function withAuth(Component) { dispatch(setUserInfo(user)); dispatch(setSuccess(true)); + setIsRedirecting(false); // Clear redirecting state after success }; useEffect(() => { - if (typeof window !== 'undefined') { - // Handle Google redirect first + // Mark as mounted only once + if (!isMounted) { + setIsMounted(true); + } + + if (typeof window === 'undefined') return; + + const handleAuth = async () => { + // Handle Google redirect if (router.query.success === 'google') { - const token = Cookies.get('access_token'); - if (token) { + try { + const token = Cookies.get('temp_access_token'); + if (!token) { + throw new Error('No access_token cookie found'); + } + localStorage.setItem('token', token); const decoded = jwt_decode(token); - retryWithDelay(() => getUserDetails(decoded._id, token)) - .then((response) => setupUserSession(response.users[0])) - .catch((error) => { - console.error('Google auth error:', error); - setIsRedirecting(false); - router.push('/account/login'); - }); - } else { + const response = await retryWithDelay(() => + getUserDetails(decoded._id, token), + ); + await setupUserSession(response.users[0]); + } catch (error) { + console.error('Google auth error:', error); setIsRedirecting(false); - router.push('/account/login'); + setRedirectToLogin(true); } - return; // Exit early to prevent further checks until redirect is resolved + return; } + // Handle authentication checks const storedUserGroup = localStorage.getItem('activeGroup'); if (!userCredentials.success) { - router.push('/account/login'); + setRedirectToLogin(true); + return; } if (!storedUserGroup) { - LogoutUser(dispatch, router); + dispatch(resetStore()); + if (typeof window !== 'undefined') { + localStorage.clear(); + } + const store = router.store || window.__NEXT_REDUX_STORE__; + if (store?.__persistor) { + await store.__persistor.purge(); + } + setRedirectToLogin(true); } + }; + + handleAuth(); + }, [ + userCredentials.success, + dispatch, + router.query.success, + retryWithDelay, + ]); + + useEffect(() => { + if (isMounted && redirectToLogin) { + router.push(LOGIN_ROUTE); } - }, [userCredentials, dispatch, router, retryWithDelay, isRedirecting]); + }, [isMounted, redirectToLogin, router]); - // Block rendering until redirect is handled if (isRedirecting) { return ; } - // Render the component if the user is authenticated return userCredentials.success ? : null; }; } diff --git a/src/platform/src/pages/Home/index.jsx b/src/platform/src/pages/Home/index.jsx index d2457eb2cf..d03f1abf6f 100644 --- a/src/platform/src/pages/Home/index.jsx +++ b/src/platform/src/pages/Home/index.jsx @@ -1,4 +1,4 @@ -// Import statements +import dynamic from 'next/dynamic'; import withAuth from '@/core/utils/protectedRoute'; import React, { useState, useEffect, useCallback, useMemo } from 'react'; import Layout from '@/components/Layout'; @@ -302,4 +302,4 @@ const Home = () => { ); }; -export default withAuth(Home); +export default dynamic(() => Promise.resolve(withAuth(Home)), { ssr: false });