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 877fabd1cfc..d82cfab153a 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( ({ 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 71158726dbf..57b5d00a73d 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 = ({ 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 = ({ 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 = ({ // eslint-disable-next-line no-console console.error(err); }); - - return; - }; + }, []); const customAuthHandler = async () => { const previousAuthState = oktaAuth.authStateManager.getPreviousAuthState();