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

This commit is contained in:
Chirag Madlani 2024-02-09 15:30:51 +05:30 committed by GitHub
parent 847b2d8bc9
commit be0a9c86b3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 31 additions and 37 deletions

View File

@ -18,8 +18,6 @@ import React, {
ReactNode, ReactNode,
useImperativeHandle, useImperativeHandle,
} from 'react'; } from 'react';
import { useHistory } from 'react-router-dom';
import { ROUTES } from '../../../constants/constants';
import localState from '../../../utils/LocalStorageUtils'; import localState from '../../../utils/LocalStorageUtils';
import { useAuthContext } from '../AuthProviders/AuthProvider'; import { useAuthContext } from '../AuthProviders/AuthProvider';
import { AuthenticatorRef } from '../AuthProviders/AuthProvider.interface'; import { AuthenticatorRef } from '../AuthProviders/AuthProvider.interface';
@ -33,27 +31,15 @@ const OktaAuthenticator = forwardRef<AuthenticatorRef, Props>(
({ children, onLogoutSuccess }: Props, ref) => { ({ children, onLogoutSuccess }: Props, ref) => {
const { oktaAuth } = useOktaAuth(); const { oktaAuth } = useOktaAuth();
const { setIsAuthenticated } = useAuthContext(); const { setIsAuthenticated } = useAuthContext();
const history = useHistory();
const login = async () => { const login = async () => {
oktaAuth.signInWithRedirect(); oktaAuth.signInWithRedirect();
}; };
const logout = async () => { const logout = async () => {
const basename =
window.location.origin +
history.createHref({ pathname: ROUTES.SIGNIN });
setIsAuthenticated(false); setIsAuthenticated(false);
try { oktaAuth.tokenManager.clear();
if (localStorage.getItem('okta-token-storage')) { onLogoutSuccess();
await oktaAuth.signOut({ postLogoutRedirectUri: basename });
}
localStorage.removeItem('okta-token-storage');
onLogoutSuccess();
} catch (err) {
// eslint-disable-next-line no-console
console.log(err);
}
}; };
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({

View File

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