fix(ui): #15109 okta keep loading infinitly (#15116)

(cherry picked from commit be0a9c8)
open-metadata · Feb 12, 2024 · 47ce26c · 47ce26c
1 parent 4451113
commit 47ce26c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 37 deletions.
diff --git a/...data-ui/src/main/resources/ui/src/components/Auth/AppAuthenticators/OktaAuthenticator.tsx b/...data-ui/src/main/resources/ui/src/components/Auth/AppAuthenticators/OktaAuthenticator.tsx
@@ -18,8 +18,6 @@ import React, {
   ReactNode,
   useImperativeHandle,
 } from 'react';
-import { useHistory } from 'react-router-dom';
-import { ROUTES } from '../../../constants/constants';
 import localState from '../../../utils/LocalStorageUtils';
 import { useAuthContext } from '../AuthProviders/AuthProvider';
 import { AuthenticatorRef } from '../AuthProviders/AuthProvider.interface';
@@ -33,27 +31,15 @@ const OktaAuthenticator = forwardRef<AuthenticatorRef, Props>(
   ({ children, onLogoutSuccess }: Props, ref) => {
     const { oktaAuth } = useOktaAuth();
     const { setIsAuthenticated } = useAuthContext();
-    const history = useHistory();
 
     const login = async () => {
       oktaAuth.signInWithRedirect();
     };
 
     const logout = async () => {
-      const basename =
-        window.location.origin +
-        history.createHref({ pathname: ROUTES.SIGNIN });
       setIsAuthenticated(false);
-      try {
-        if (localStorage.getItem('okta-token-storage')) {
-          await oktaAuth.signOut({ postLogoutRedirectUri: basename });
-        }
-        localStorage.removeItem('okta-token-storage');
-        onLogoutSuccess();
-      } catch (err) {
-        // eslint-disable-next-line no-console
-        console.log(err);
-      }
+      oktaAuth.tokenManager.clear();
+      onLogoutSuccess();
     };
 
     useImperativeHandle(ref, () => ({

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Auth/AuthProviders/OktaAuthProvider.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Auth/AuthProviders/OktaAuthProvider.tsx
@@ -13,7 +13,12 @@
 
 import { OktaAuth, OktaAuthOptions } from '@okta/okta-auth-js';
 import { Security } from '@okta/okta-react';
-import React, { FunctionComponent, ReactNode } from 'react';
+import React, {
+  FunctionComponent,
+  ReactNode,
+  useCallback,
+  useMemo,
+} from 'react';
 import localState from '../../../utils/LocalStorageUtils';
 import { useAuthContext } from './AuthProvider';
 import { OidcUser } from './AuthProvider.interface';
@@ -30,25 +35,30 @@ export const OktaAuthProvider: FunctionComponent<Props> = ({
   const { authConfig, setIsAuthenticated } = useAuthContext();
   const { clientId, issuer, redirectUri, scopes, pkce } =
     authConfig as OktaAuthOptions;
-  const oktaAuth = new OktaAuth({
-    clientId,
-    issuer,
-    redirectUri,
-    scopes,
-    pkce,
-    tokenManager: {
-      autoRenew: false,
-    },
-  });
+
+  const oktaAuth = useMemo(
+    () =>
+      new OktaAuth({
+        clientId,
+        issuer,
+        redirectUri,
+        scopes,
+        pkce,
+        tokenManager: {
+          autoRenew: false,
+        },
+      }),
+    [clientId, issuer, redirectUri, scopes, pkce]
+  );
 
   const triggerLogin = async () => {
     await oktaAuth.signInWithRedirect();
   };
 
-  const restoreOriginalUri = async (_oktaAuth: OktaAuth) => {
-    const idToken = _oktaAuth.getIdToken() || '';
+  const restoreOriginalUri = useCallback(async (_oktaAuth: OktaAuth) => {
+    const idToken = _oktaAuth.getIdToken() ?? '';
     const scopes =
-      _oktaAuth.authStateManager.getAuthState()?.idToken?.scopes.join() || '';
+      _oktaAuth.authStateManager.getAuthState()?.idToken?.scopes.join() ?? '';
     localState.setOidcToken(idToken);
     _oktaAuth
       .getUser()
@@ -58,11 +68,11 @@ export const OktaAuthProvider: FunctionComponent<Props> = ({
           id_token: idToken,
           scope: scopes,
           profile: {
-            email: info.email || '',
-            name: info.name || '',
+            email: info.email ?? '',
+            name: info.name ?? '',
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            picture: (info as any).imageUrl || '',
-            locale: info.locale || '',
+            picture: (info as any).imageUrl ?? '',
+            locale: info.locale ?? '',
             sub: info.sub,
           },
         };
@@ -72,9 +82,7 @@ export const OktaAuthProvider: FunctionComponent<Props> = ({
         // eslint-disable-next-line no-console
         console.error(err);
       });
-
-    return;
-  };
+  }, []);
 
   const customAuthHandler = async () => {
     const previousAuthState = oktaAuth.authStateManager.getPreviousAuthState();