From 47ce26cb0e460c5fe80ccd8bc4b5bc365b4523c2 Mon Sep 17 00:00:00 2001
From: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>
Date: Fri, 9 Feb 2024 15:30:51 +0530
Subject: [PATCH] fix(ui): #15109 okta keep loading infinitly (#15116)

(cherry picked from commit be0a9c86b34a7cdd8ffca5ff218bd5ad991796b9)
---
 .../AppAuthenticators/OktaAuthenticator.tsx   | 18 +------
 .../Auth/AuthProviders/OktaAuthProvider.tsx   | 50 +++++++++++--------
 2 files changed, 31 insertions(+), 37 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Auth/AppAuthenticators/OktaAuthenticator.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Auth/AppAuthenticators/OktaAuthenticator.tsx
index 877fabd1cfc3..d82cfab153ad 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Auth/AppAuthenticators/OktaAuthenticator.tsx
+++ b/openmetadata-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
index 71158726dbf2..57b5d00a73dc 100644
--- 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();