[FE] Login calls on page refresh #3863

[ajitesh123]

On page refresh frontend makes unnecessary login requests

[autocoder-ai[bot]]

Understanding:

The issue here is that the frontend application is making unnecessary login requests on page refresh, which is causing performance and user experience problems. This could be due to the way the application is handling user authentication and session management.

Possible reasons for this behavior could be:

1. The frontend application is not properly managing the user's authentication state and login status.

2. The frontend application is not caching the user's login status or session information, leading to repeated login requests on page refresh.

3. The frontend application is not properly handling the response from the login endpoint, leading to repeated login attempts.

4. There could be an issue with the way the backend is handling user authentication and session management, leading to the frontend making unnecessary login requests.

   Action Plan:

   To address this issue, the junior developer should follow these steps:

5. Analyze the frontend application's authentication and session management logic:

   • Understand how the frontend application is handling user authentication and session management.
   • Identify the specific code paths and components responsible for handling login requests and user authentication.
   • Examine the application's state management and how it is used to track the user's login status.

6. Implement caching for user authentication and session information:

   • Ensure that the frontend application is caching the user's login status and session information (e.g., access tokens, refresh tokens) after a successful login.
   • Use appropriate caching mechanisms, such as browser storage (e.g., localStorage, sessionStorage) or a state management library (e.g., Redux, Vuex), to store and retrieve the cached user authentication and session data.

7. Optimize the login request handling:

   • Implement conditional logic to check the user's login status before making a login request.
   • Only make a login request if the user is not already logged in and the cached session information is not valid or available.
   • Handle the login response properly, updating the application's state and cached session information accordingly.

8. Coordinate with the backend team:

   • Communicate with the backend team to ensure that the backend is properly handling user authentication and session management.
   • Discuss any potential issues or inconsistencies in the way the frontend and backend are handling user authentication and session management.
   • Collaborate with the backend team to align the frontend and backend implementations and ensure a consistent and efficient user authentication and session management process.

9. Test and validate the changes:

   • Thoroughly test the updated frontend application to ensure that the unnecessary login requests on page refresh have been resolved.
   • Perform various user scenarios, including page refreshes, to verify the correct behavior.
   • Monitor the application's performance and user experience to ensure that the changes have improved the overall user experience.

     File Notes:

     path: ee/query-service/sso/saml/request.go objective: REFER instruction: - Review this file to understand how the backend is handling SAML authentication requests.

   • Identify any potential issues or inconsistencies in the way the backend is managing user authentication and session information.
   • Coordinate with the backend team to ensure that the frontend and backend implementations are aligned and consistent.

     File Notes:

     path: frontend/src/container/TopNav/DateTimeSelection/Refresh.tsx objective: REFER_AND_UPDATE instruction: - Review this file to understand how the frontend is handling the page refresh functionality and login requests.

   • Identify the code responsible for making the login requests on page refresh.
   • Implement conditional logic to check the user's login status before making a login request. Only make a login request if the user is not already logged in and the cached session information is not valid or available.
   • Update the code to properly cache the user's login status and session information (e.g., access tokens, refresh tokens) after a successful login, using appropriate caching mechanisms like browser storage or a state management library.
   • Handle the login response properly, updating the application's state and cached session information accordingly.

     File Notes:

     path: frontend/src/container/TopNav/DateTimeSelectionV2/Refresh.tsx objective: REFER_AND_UPDATE instruction: - Review this file to understand how the frontend is handling the page refresh functionality and login requests.

   • Identify the code responsible for making the login requests on page refresh.
   • Implement conditional logic to check the user's login status before making a login request. Only make a login request if the user is not already logged in and the cached session information is not valid or available.
   • Update the code to properly cache the user's login status and session information (e.g., access tokens, refresh tokens) after a successful login, using appropriate caching mechanisms like browser storage or a state management library.
   • Handle the login response properly, updating the application's state and cached session information accordingly.

     File Notes:

     path: frontend/src/api/browser/localstorage/get.ts objective: REFER_AND_UPDATE instruction: - Review this file to understand how the frontend is using the browser's localStorage to retrieve cached data.

   • Identify any existing logic for retrieving the user's login status or session information from the localStorage.
   • Update the code to ensure that the user's login status and session information are being properly retrieved from the localStorage and used to determine whether a login request is necessary.

     File Notes:

     path: frontend/src/api/browser/localstorage/set.ts objective: REFER_AND_UPDATE instruction: - Review this file to understand how the frontend is using the browser's localStorage to store cached data.

   • Identify any existing logic for storing the user's login status or session information in the localStorage.
   • Update the code to ensure that the user's login status and session information (e.g., access tokens, refresh tokens) are being properly stored in the localStorage after a successful login.

[autocoder-ai[bot]]

--- frontend/src/container/TopNav/DateTimeSelection/Refresh.tsx
+++ frontend/src/container/TopNav/DateTimeSelection/Refresh.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';

+import { getFromLocalStorage, setToLocalStorage } from '../../../api/browser/localstorage';
 import { RefreshTextContainer, Typography } from './styles';

 function RefreshText({
@@ -7,6 +9,16 @@ function RefreshText({
     refreshButtonHidden,
 }: RefreshTextProps): JSX.Element {
     const [refreshText, setRefreshText] = useState<string>('');
+    const isLoggedIn = useSelector((state: any) => state.auth.isLoggedIn);
+
+    useEffect(() => {
+        // Check if user is already logged in and session is valid
+        const cachedSessionInfo = getFromLocalStorage('sessionInfo');
+        if (!isLoggedIn && !cachedSessionInfo) {
+            // Make login request if user is not logged in and session is not valid
+            handleLogin();
+        }
+    }, [isLoggedIn]);

     // this is to update the refresh text
     useEffect(() => {
@@ -20,6 +32,18 @@ function RefreshText({
         };
     }, [onLastRefreshHandler, refreshText]);

+    const handleLogin = async () => {
+        try {
+            // Make login request and get session information
+            const sessionInfo = await loginRequest();
+            // Cache the session information in localStorage
+            setToLocalStorage('sessionInfo', JSON.stringify(sessionInfo));
+            // Update the application state with the logged in status and session information
+        } catch (error) {
+            // Handle login error
+        }
+    };
+
     return (
         <RefreshTextContainer refreshButtonHidden={refreshButtonHidden}>
             <Typography>{refreshText}</Typography>
@@ -31,4 +55,4 @@ interface RefreshTextProps {
     refreshButtonHidden: boolean;
 }

 export default RefreshText;

--- frontend/src/container/TopNav/DateTimeSelectionV2/Refresh.tsx
+++ frontend/src/container/TopNav/DateTimeSelectionV2/Refresh.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';

+import { getFromLocalStorage, setToLocalStorage } from '../../../api/browser/localstorage';
 import { RefreshTextContainer, Typography } from './styles';

 function RefreshText({
@@ -7,6 +9,16 @@ function RefreshText({
     refreshButtonHidden,
 }: RefreshTextProps): JSX.Element {
     const [refreshText, setRefreshText] = useState<string>('');
+    const isLoggedIn = useSelector((state: any) => state.auth.isLoggedIn);
+
+    useEffect(() => {
+        // Check if user is already logged in and session is valid
+        const cachedSessionInfo = getFromLocalStorage('sessionInfo');
+        if (!isLoggedIn && !cachedSessionInfo) {
+            // Make login request if user is not logged in and session is not valid
+            handleLogin();
+        }
+    }, [isLoggedIn]);

     // this is to update the refresh text
     useEffect(() => {
@@ -20,6 +32,18 @@ function RefreshText({
         };
     }, [onLastRefreshHandler, refreshText]);

+    const handleLogin = async () => {
+        try {
+            // Make login request and get session information
+            const sessionInfo = await loginRequest();
+            // Cache the session information in localStorage
+            setToLocalStorage('sessionInfo', JSON.stringify(sessionInfo));
+            // Update the application state with the logged in status and session information
+        } catch (error) {
+            // Handle login error
+        }
+    };
+
     return (
         <RefreshTextContainer refreshButtonHidden={refreshButtonHidden}>
             <Typography>{refreshText}</Typography>
@@ -31,4 +55,4 @@ interface RefreshTextProps {
     refreshButtonHidden: boolean;
 }

 export default RefreshText;

--- frontend/src/api/browser/localstorage/get.ts
+++ frontend/src/api/browser/localstorage/get.ts
@@ -1,9 +1,14 @@
-const get = (key: string): string | null => {
+const getFromLocalStorage = (key: string): any => {
     try {
-        return localStorage.getItem(key);
+        const value = localStorage.getItem(key);
+        if (value) {
+            return JSON.parse(value);
+        }
+        return null;
     } catch (e) {
-        return '';
+        console.error('Error getting data from localStorage:', e);
+        return null;
     }
 };

-export default get;
+export default getFromLocalStorage;

--- frontend/src/api/browser/localstorage/set.ts
+++ frontend/src/api/browser/localstorage/set.ts
@@ -1,10 +1,13 @@
-const set = (key: string, value: string): boolean => {
+const setToLocalStorage = (key: string, value: string): boolean => {
     try {
-        localStorage.setItem(key, value);
+        localStorage.setItem(key, JSON.stringify(value));
         return true;
     } catch (e) {
+        console.error('Error setting data in localStorage:', e);
         return false;
     }
 };

-export default set;
+export {
+    setToLocalStorage,
+};