fix(ui): handle 401 for wrong password case (#19662)

* fix(ui): handle 401 for wrong password case

* fix refresh req on visibility change

* fix 302 issue

* clear localStorage upon logout

(cherry picked from commit 5bb8c5c)

openmetadata-ui/src/main/resources/ui/src/components/AppBar/Appbar.tsx

@@ -20,6 +20,7 @@ import { useTourProvider } from '../../context/TourProvider/TourProvider';
 import { CurrentTourPageType } from '../../enums/tour.enum';
 import { useApplicationStore } from '../../hooks/useApplicationStore';
 import useCustomLocation from '../../hooks/useCustomLocation/useCustomLocation';
+import TokenService from '../../utils/Auth/TokenService/TokenServiceUtil';
 import {
   extractDetailsFromToken,
   isProtectedRoute,
@@ -38,8 +39,7 @@ const Appbar: React.FC = (): JSX.Element => {
   const { isTourOpen, updateTourPage, updateTourSearch, tourSearchValue } =
     useTourProvider();
 
-  const { isAuthenticated, searchCriteria, trySilentSignIn } =
-    useApplicationStore();
+  const { isAuthenticated, searchCriteria } = useApplicationStore();
 
   const parsedQueryString = Qs.parse(
     location.search.startsWith('?')
@@ -126,7 +126,7 @@ const Appbar: React.FC = (): JSX.Element => {
       const { isExpired } = extractDetailsFromToken(getOidcToken());
       if (!document.hidden && isExpired) {
         // force logout
-        trySilentSignIn(true);
+        TokenService.getInstance().refreshToken();
       }
     };
 

openmetadata-ui/src/main/resources/ui/src/components/Auth/AuthProviders/AuthProvider.tsx

@@ -184,6 +184,9 @@ export const AuthProvider = ({
 
     setApplicationLoading(false);
 
+    // Clear the refresh flag (used after refresh is complete)
+    tokenService.current.clearRefreshInProgress();
+
     // Upon logout, redirect to the login page
     history.push(ROUTES.SIGNIN);
   }, [timeoutId]);
@@ -517,7 +520,9 @@ export const AuthProvider = ({
         if (error.response) {
           const { status } = error.response;
           if (status === ClientErrors.UNAUTHORIZED) {
-            if (error.config.url === '/users/refresh') {
+            // For login or refresh we don't want to fire another refresh req
+            // Hence rejecting it
+            if (['/users/refresh', '/users/login'].includes(error.config.url)) {
               return Promise.reject(error as Error);
             }
             handleStoreProtectedRedirectPath();

openmetadata-ui/src/main/resources/ui/src/interface/store.interface.ts

@@ -79,7 +79,6 @@ export interface ApplicationStore
     entityDetails: EntityUnion;
   }) => void;
   updateSearchCriteria: (criteria: ExploreSearchIndex | '') => void;
-  trySilentSignIn: (forceLogout?: boolean) => void;
   setApplicationsName: (applications: string[]) => void;
 }
 

openmetadata-ui/src/main/resources/ui/src/rest/LoginAPI.ts

@@ -10,7 +10,9 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
+import { HttpStatusCode } from 'axios';
 import axiosClient from '.';
+import { useApplicationStore } from '../hooks/useApplicationStore';
 
 const BASE_URL = '/auth';
 
@@ -23,12 +25,11 @@ interface RenewTokenResponse {
 }
 
 export const renewToken = async () => {
-  const data = await axiosClient.get<RenewTokenResponse>(
-    `${BASE_URL}/refresh`,
-    // Need to invalidate other status codes
-    // which help is user to force logout
-    { validateStatus: (status) => status === 200 }
-  );
+  const data = await axiosClient.get<RenewTokenResponse>(`${BASE_URL}/refresh`);
+
+  if (data.status === HttpStatusCode.Found) {
+    useApplicationStore.getState().onLoginHandler();
+  }
 
   return data.data;
 };

openmetadata-ui/src/main/resources/ui/src/utils/AuthProvider.util.ts

@@ -363,7 +363,6 @@ export const extractDetailsFromToken = (token: string) => {
   return {
     exp: 0,
     isExpired: true,
-
     timeoutExpiry: 0,
   };
 };