chore(deps): react-oidc v4

package.json

@@ -20,7 +20,7 @@
     }
   },
   "dependencies": {
-    "@axa-fr/react-oidc-context": "3.1.6",
+    "@axa-fr/react-oidc-context": "4.0.0",
     "@axa-fr/react-toolkit-all": "1.4.0",
     "@axa-fr/react-toolkit-core": "1.4.0",
     "@axa-fr/react-toolkit-modal-default": "1.3.23",

public/environment.development.json

@@ -14,12 +14,7 @@
     "isEnabled": true,
     "client_id": "interactive.public",
     "redirect_uri": "http://localhost:9999/authentication/callback",
-    "response_type": "code",
-    "post_logout_redirect_uri": "http://localhost:9999/",
     "scope": "openid profile email api offline_access",
-    "authority": "https://demo.identityserver.io",
-    "silent_redirect_uri": "http://localhost:9999/authentication/silent_callback",
-    "automaticSilentRenew": true,
-    "loadUserInfo": true
+    "authority": "https://demo.identityserver.io"
   }
 }

src/App/App.js

@@ -1,23 +1,40 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { AuthenticationProvider, oidcLog, InMemoryWebStorage } from '@axa-fr/react-oidc-context';
+import { OidcProvider, useOidcUser, useOidcAccessToken, OidcSecure } from '@axa-fr/react-oidc-context';
 import Routes from 'Layout/Routes';
 import UserProvider from 'App/UserProvider';
 import FetchProvider from 'App/FetchProvider';
 import NotificationProvider from 'App/NotificationProvider';
+import { PropTypes } from 'prop-types';
 
-const App = ({ oidc, fetchConfig, apiUrl, baseUrl }) => (
-  <AuthenticationProvider loggerLevel={oidcLog.NONE} configuration={oidc} isEnabled={oidc.isEnabled} InMemoryWebStorage={InMemoryWebStorage}>
-    <UserProvider>
-      <FetchProvider apiUrl={apiUrl} fetchConfig={fetchConfig}>
-        <NotificationProvider>
-          <Router basename={baseUrl}>
-            <Routes />
-          </Router>
-        </NotificationProvider>
-      </FetchProvider>
+const App = ({ oidc, fetchConfig, apiUrl, baseUrl, OidcProviderCmpt, OidcSecureCmpt, useOidcUserFn, useOidcAccessTokenFn }) => (
+  <OidcProviderCmpt configuration={oidc}>
+    <UserProvider useOidcUser={useOidcUserFn}>
+      <OidcSecureCmpt>
+        <FetchProvider apiUrl={apiUrl} fetchConfig={fetchConfig} useOidcAccessToken={useOidcAccessTokenFn}>
+          <NotificationProvider>
+            <Router basename={baseUrl}>
+              <Routes />
+            </Router>
+          </NotificationProvider>
+        </FetchProvider>
+      </OidcSecureCmpt>
     </UserProvider>
-  </AuthenticationProvider>
+  </OidcProviderCmpt>
 );
 
+App.propTypes = {
+  OidcProviderCmpt: PropTypes.func,
+  OidcSecureCmpt: PropTypes.func,
+  useOidcUserFn: PropTypes.func,
+  useOidcAccessTokenFn: PropTypes.func,
+};
+
+App.defaultProps = {
+  OidcProviderCmpt: OidcProvider,
+  OidcSecureCmpt: OidcSecure,
+  useOidcUserFn: useOidcUser,
+  useOidcAccessTokenFn: useOidcAccessToken,
+};
+
 export default App;

src/App/App.test.js

@@ -1,36 +1,26 @@
-import React from 'react';
+import React, { createContext } from 'react';
 import { WrapperStaticRouter } from 'shared/testsUtils';
-import { render, act } from '@testing-library/react';
+import { render, act, waitFor } from '@testing-library/react';
 import App from './App';
 
+const useOidcUserMock = jest.fn().mockReturnValue({
+  oidcUser: {
+    name: 'Samuel Gomez',
+  },
+});
+const useOidcAccessTokenMock = jest.fn().mockReturnValue({
+  accessToken: 'accessTokenfdsfdsqgvqvsqfs',
+});
+
 const envMock = {
   baseUrl: '/',
-  oidc: {
-    client_id: 'interactive.public',
-    redirect_uri: 'http://localhost:3000/authentication/callback',
-    response_type: 'code',
-    post_logout_redirect_uri: 'http://localhost:3000/',
-    scope: 'openid profile email api offline_access',
-    authority: 'https://demo.identityserver.io',
-    silent_redirect_uri: 'http://localhost:3000/authentication/silent_callback',
-    automaticSilentRenew: true,
-    loadUserInfo: true,
-    isEnabled: false,
-    client_name: 'client_name',
-    grant_types: [''],
-    application_type: 'application_type',
-    response_types: ['response_type', 'response_type'],
-    redirect_uris: ['redirect_uri/callback', 'redirect_uri/authentification/callback', 'redirect_uri/authentication/silent_callback'],
-    subject_type: 'public',
-    id_token_signed_response_alg: 'id_token_signed_response_alg',
-    token_type: 'Bearer',
-    iam_reference: 'iam_reference',
-    triggerAuthFlow: true,
-  },
+  OidcProviderCmpt: ({ children }) => <>{children}</>,
+  OidcSecureCmpt: ({ children }) => <>{children}</>,
+  useOidcUserFn: useOidcUserMock,
+  useOidcAccessTokenFn: useOidcAccessTokenMock,
 };
-it('Should App render without crashing', async () => {
-  await act(async () => {
-    const { asFragment } = render(<App {...envMock} />, { wrapper: WrapperStaticRouter });
-    expect(asFragment()).toMatchSnapshot();
-  });
+
+it('Should render App', () => {
+  const { asFragment } = render(<App {...envMock} />, { wrapper: WrapperStaticRouter });
+  expect(asFragment()).toMatchSnapshot();
 });

src/App/FetchProvider/FetchProvider.js

@@ -1,7 +1,6 @@
-import React, { createContext, useContext } from 'react';
+import React, { createContext } from 'react';
 import mergeObj from 'shared/helpers/mergeObj';
 import { STATUS_API } from 'shared/constants';
-import { UserContext } from 'App/UserProvider';
 
 export const FetchContext = createContext({ fetchCustom: fetch });
 export const FetchContextProvider = FetchContext.Provider;
@@ -19,11 +18,11 @@ export const setFetchCustom = ({ apiUrl, fetchAuthConfig, fetchFn = fetch, merge
   };
 };
 
-const FetchProvider = ({ apiUrl, fetchConfig, children, mergeObjFn = mergeObj, setFetchCustomFn = setFetchCustom, UserContextObj = UserContext }) => {
-  const { authAccessToken } = useContext(UserContextObj);
+const FetchProvider = ({ apiUrl, fetchConfig, children, useOidcAccessToken, mergeObjFn = mergeObj, setFetchCustomFn = setFetchCustom }) => {
+  const { accessToken } = useOidcAccessToken();
   const authConfig = {
     headers: {
-      Authorization: `Bearer ${authAccessToken}`,
+      Authorization: `Bearer ${accessToken}`,
     },
   };
   const fetchAuthConfig = mergeObjFn(fetchConfig, authConfig);

src/App/FetchProvider/FetchProvider.test.js

@@ -15,17 +15,16 @@ const BaseWithFetch = () => {
   return <Base {...fetchProps} />;
 };
 
-const UserContext = createContext();
-const UserContextProvider = UserContext.Provider;
-
 const Base = ({ fetchCustom }) => <div>{fetchCustom ? 'haveFetchCustom' : 'notHaveFetchCustom'}</div>;
 
+const useOidcAccessTokenMock = jest.fn().mockReturnValue({
+  accessToken: 'accessTokenfdsfdsqgvqvsqfs',
+});
+
 const App = () => (
-  <UserContextProvider value={{ authAccessToken: 'authAccessToken' }}>
-    <FetchProvider apiUrl={apiMock} fetchConfig={fetchConfig} UserContextObj={UserContext}>
-      <BaseWithFetch />
-    </FetchProvider>
-  </UserContextProvider>
+  <FetchProvider apiUrl={apiMock} fetchConfig={fetchConfig} useOidcAccessToken={useOidcAccessTokenMock}>
+    <BaseWithFetch />
+  </FetchProvider>
 );
 
 describe('setFetchCustom', () => {

src/App/UserProvider/UserProvider.js

@@ -1,51 +1,39 @@
 import React, { createContext } from 'react';
 import { get, isEmpty } from 'lodash';
-import { useReactOidc } from '@axa-fr/react-oidc-context';
 import { PROFILS } from 'shared/constants';
 
 export const UserContext = createContext({
   authName: '',
-  authAccessToken: '',
   authRole: '',
   authUid: '',
 });
 export const UserContextProvider = UserContext.Provider;
 
 const NON_CONNECTE = 'Non Connecté';
 
-export const getAuthName = ({ oidcUser, isEmptyFn = isEmpty, getFn = get }) =>
-  !isEmptyFn(getFn(oidcUser, 'profile.name')) ? oidcUser.profile.name : NON_CONNECTE;
-
-export const getAuthAccessToken = ({ oidcUser, isEmptyFn = isEmpty, getFn = get }) =>
-  !isEmptyFn(getFn(oidcUser, 'access_token')) ? oidcUser.access_token : '';
+export const getAuthName = ({ oidcUser, isEmptyFn = isEmpty, getFn = get }) => (!isEmptyFn(getFn(oidcUser, 'name')) ? oidcUser.name : NON_CONNECTE);
 
 export const setAuthRole = ({ memberOf, profils = PROFILS }) => profils.map(profil => (memberOf.search(`${profil}`) !== -1 ? profil : '')).join('');
 
 export const getAuthRole = ({ oidcUser, setAuthRoleFn = setAuthRole, isEmptyFn = isEmpty, getFn = get }) =>
-  !isEmptyFn(getFn(oidcUser, 'profile.member_of')) ? setAuthRoleFn({ memberOf: oidcUser.profile.member_of[0] }) : '';
+  !isEmptyFn(getFn(oidcUser, 'member_of')) ? setAuthRoleFn({ memberOf: oidcUser.member_of[0] }) : '';
 
 export const getAuthUid = ({ oidcUser, isEmptyFn = isEmpty, getFn = get }) =>
-  !isEmptyFn(getFn(oidcUser, 'profile.axa_uid_racf')) ? oidcUser.profile.axa_uid_racf : '';
+  !isEmptyFn(getFn(oidcUser, 'axa_uid_racf')) ? oidcUser.axa_uid_racf : '';
 
 /**
  *
  * @param {Object} oidcUser
  */
-const extractDataFromOAuthToken = (
-  oidcUser,
-  getAuthNameFn = getAuthName,
-  getAuthAccessTokenFn = getAuthAccessToken,
-  getAuthRoleFn = getAuthRole,
-  getAuthUidFn = getAuthUid,
-) => ({
+const extractDataFromOAuthToken = (oidcUser, getAuthNameFn = getAuthName, getAuthRoleFn = getAuthRole, getAuthUidFn = getAuthUid) => ({
   authName: getAuthNameFn({ oidcUser }),
-  authAccessToken: getAuthAccessTokenFn({ oidcUser }),
   authRole: getAuthRoleFn({ oidcUser }),
   authUid: getAuthUidFn({ oidcUser }),
 });
 
-const UserProvider = ({ children, useReactOidcFn = useReactOidc }) => {
-  const { oidcUser } = useReactOidcFn();
+const UserProvider = ({ children, useOidcUser }) => {
+  const { oidcUser } = useOidcUser();
   return <UserContextProvider value={{ ...extractDataFromOAuthToken(oidcUser) }}>{children}</UserContextProvider>;
 };
+
 export default UserProvider;