avoid displaying too much alert "Login verification has expired, please log in again."

src/auth/index.js

@@ -13,6 +13,7 @@ export const windowCount = 'windowCount'
 import {useNavigate} from "react-router-dom";
 import {useDispatch} from "react-redux";
 import { REFRESH_TOKEN } from 'utils/ApiPathConst';
+import { getMessage } from 'utils/getI18nMessage';
 
 // ** Handle User Login
 export const handleLogin = data => {
@@ -156,9 +157,13 @@ export const SetupAxiosInterceptors = () => {
                       }
                     })
                     .catch((refreshError) => {
+                      isRefreshToken = false;
+                      if (localStorage.getItem("expiredAlertShown") === null) {
+                        localStorage.setItem("expiredAlertShown", "true");
+                        alert(getMessage("autoLogout"));
+                      }
                       dispatch(handleLogoutFunction());
                       navigate('/login');
-                      isRefreshToken = false;
                       window.location.reload();
                       throw refreshError;
                     });
@@ -166,7 +171,7 @@ export const SetupAxiosInterceptors = () => {
                 if (error.response.status === 401) {
                     if (localStorage.getItem("expiredAlertShown") === null) {
                         localStorage.setItem("expiredAlertShown", true)
-                        alert("登入驗證已過期，請重新登入。")
+                        alert(getMessage("autoLogout"))
                     }
                 }
     

src/components/AutoLogoutProvider.js

@@ -1,8 +1,9 @@
-import React, { createContext, useState, useEffect } from 'react';
+import React, { createContext, useState, useEffect, useRef } from 'react';
 import {useNavigate} from "react-router-dom";
 import {useIdleTimer} from "react-idle-timer";
 import { handleLogoutFunction } from 'auth/index';
 import { useDispatch } from "react-redux";
+import { useIntl } from "react-intl";
 import { 
     isUserLoggedIn, 
     isGLDLoggedIn,
@@ -12,9 +13,11 @@ import {
 const TimerContext = createContext();
 
 const AutoLogoutProvider = ({ children }) => {
+    const intl = useIntl();
     const [lastRequestTime, setLastRequestTime] = useState(Date.now());
     const navigate = useNavigate();
     const [logoutInterval, setLogoutInterval] = useState(1);
+    const idleLogoutTriggeredRef = useRef(false);
     // const [remainingInterval] = useState(5);
     const [state, setState] = useState('Active');
     const dispatch = useDispatch()
@@ -93,8 +96,9 @@ const AutoLogoutProvider = ({ children }) => {
                 // console.log(remainingInterval * 60);
                 // console.log(logoutInterval * 60 * 1000 - timeElapsed)
                 if (timeElapsed >= logoutInterval * 60 * 1000) {
-                    if(isUserLoggedIn()){
-                        alert("登入驗證已過期，請重新登入。")
+                    if (isUserLoggedIn() && !idleLogoutTriggeredRef.current) {
+                        idleLogoutTriggeredRef.current = true;
+                        alert(intl.formatMessage({ id: "autoLogout" }));
                         dispatch(handleLogoutFunction());
                         navigate('/login');
                         window.location.reload();

src/utils/getI18nMessage.js

@@ -0,0 +1,20 @@
+/**
+ * Get a message by i18n id outside React (e.g. in axios interceptors, thunks).
+ * Uses the same locale as I18nProvider (localStorage 'locale').
+ */
+import en from '../translations/en.json';
+import zhHK from '../translations/zh-HK.json';
+import zhCN from '../translations/zh-CN.json';
+
+const messages = {
+  en,
+  'zh-HK': zhHK,
+  zh: zhHK,
+  'zh-CN': zhCN
+};
+
+export function getMessage(id) {
+  const locale = localStorage.getItem('locale') || 'en';
+  const m = messages[locale] || messages.en;
+  return m[id] ?? messages.en[id] ?? id;
+}