Merge pull request #1693 from onaio/fix-keycloak-logout

Fix keycloak logout

Author: peterMuriuki

.circleci/config.yml

@@ -9,42 +9,6 @@ jobs:
       # specify the version you desire here
       - image: circleci/node:12.16.1
 
-        environment:
-          SKIP_PREFLIGHT_CHECK: 'true'
-          REACT_APP_WEBSITE_NAME: 'Reveal'
-          REACT_APP_DOMAIN_NAME: 'http://localhost:3000'
-          REACT_APP_THEME_COLOR: '000000'
-          REACT_APP_ENABLE_IRS: 'true'
-          REACT_APP_ENABLE_FI: 'true'
-          REACT_APP_ENABLE_USERS: 'false'
-          REACT_APP_ENABLE_ASSIGN: 'true'
-          REACT_APP_ENABLE_ABOUT: 'false'
-          REACT_APP_ENABLE_TEAMS: 'true'
-          REACT_APP_ENABLE_PRACTITIONERS: 'true'
-          REACT_APP_DISABLE_LOGIN_PROTECTION: 'false'
-          REACT_APP_GA_CODE: 'UA-0000000-0'
-          REACT_APP_GA_ENV: 'test'
-          REACT_APP_GISIDA_ONADATA_API_TOKEN: hunter2
-          REACT_APP_GISIDA_MAPBOX_TOKEN: hunter2
-          REACT_APP_DIGITAL_GLOBE_CONNECT_ID: hunter2
-          REACT_APP_SUPERSET_API_BASE: 'https://superset.reveal-stage.smartregister.org/'
-          REACT_APP_SUPERSET_API_ENDPOINT: 'slice'
-          REACT_APP_OPENSRP_CLIENT_ID: 'hunter2'
-          REACT_APP_OPENSRP_ACCESS_TOKEN_URL: https://reveal-stage.smartregister.org/opensrp/oauth/token
-          REACT_APP_OPENSRP_AUTHORIZATION_URL: https://reveal-stage.smartregister.org/opensrp/oauth/authorize
-          REACT_APP_OPENSRP_USER_URL: https://reveal-stage.smartregister.org/opensrp/user-details
-          REACT_APP_REACT_APP_OPENSRP_OAUTH_STATE: opensrp
-          REACT_APP_ONADATA_ACCESS_TOKEN_URL: 'https://stage-api.ona.io/o/token/'
-          REACT_APP_ONADATA_AUTHORIZATION_URL: 'https://stage-api.ona.io/o/authorize/'
-          REACT_APP_ONADATA_USER_URL: 'https://stage-api.ona.io/api/v1/user.json'
-          REACT_APP_ONADATA_OAUTH_STATE: 'onadata'
-          REACT_APP_ONADATA_CLIENT_ID: 'hunter2'
-          REACT_APP_IRS_PLAN_COUNTRIES: 'NA,TH'
-          REACT_APP_EXPRESS_OAUTH_GET_STATE_URL: 'http://localhost:3000/oauth/state'
-          REACT_APP_EXPRESS_OAUTH_LOGOUT_URL: 'http://localhost:3000/logout'
-          REACT_APP_BACKEND_ACTIVE: 'true'
-          REACT_APP_ENABLE_MDA_POINT: 'true'
-
     working_directory: ~/repo
 
     steps:
@@ -75,9 +39,9 @@ jobs:
           command: yarn lint-snap
 
       - run:
-          name: Run tests
-          command: yarn test --runInBand --verbose --coverage=true --forceExit --detectOpenHandles
+          name: create .env file
+          command: echo -e "SKIP_PREFLIGHT_CHECK=true\nGENERATE_SOURCEMAP=false\n" > .env
 
       - run:
-          name: Run coveralls
+          name: Run tests and coverage reporting
           command: yarn coveralls

.env.test

@@ -0,0 +1,36 @@
+SKIP_PREFLIGHT_CHECK=true
+REACT_APP_WEBSITE_NAME=Reveal
+REACT_APP_DOMAIN_NAME=http://localhost:3000
+REACT_APP_THEME_COLOR=000000
+REACT_APP_ENABLE_IRS=true
+REACT_APP_ENABLE_FI=true
+REACT_APP_ENABLE_USERS=false
+REACT_APP_ENABLE_ASSIGN=true
+REACT_APP_ENABLE_ABOUT=false
+REACT_APP_ENABLE_TEAMS=true
+REACT_APP_ENABLE_PRACTITIONERS=true
+REACT_APP_DISABLE_LOGIN_PROTECTION=false
+REACT_APP_GA_CODE=UA-0000000-0
+REACT_APP_GA_ENV=test
+REACT_APP_GISIDA_ONADATA_API_TOKEN=hunter2
+REACT_APP_GISIDA_MAPBOX_TOKEN=hunter2
+REACT_APP_DIGITAL_GLOBE_CONNECT_ID=hunter2
+REACT_APP_SUPERSET_API_BASE=https://superset.reveal-stage.smartregister.org/
+REACT_APP_SUPERSET_API_ENDPOINT=slice
+REACT_APP_OPENSRP_CLIENT_ID=hunter2
+REACT_APP_OPENSRP_ACCESS_TOKEN_URL=https://reveal-stage.smartregister.org/opensrp/oauth/token
+REACT_APP_OPENSRP_AUTHORIZATION_URL=https://reveal-stage.smartregister.org/opensrp/oauth/authorize
+REACT_APP_OPENSRP_USER_URL=https://reveal-stage.smartregister.org/opensrp/user-details
+REACT_APP_REACT_APP_OPENSRP_OAUTH_STATE=opensrp
+REACT_APP_ONADATA_ACCESS_TOKEN_URL=https://stage-api.ona.io/o/token/
+REACT_APP_ONADATA_AUTHORIZATION_URL=https://stage-api.ona.io/o/authorize/
+REACT_APP_ONADATA_USER_URL=https://stage-api.ona.io/api/v1/user.json
+REACT_APP_ONADATA_OAUTH_STATE=onadata
+REACT_APP_ONADATA_CLIENT_ID=hunter2
+REACT_APP_IRS_PLAN_COUNTRIES=NA,TH
+REACT_APP_EXPRESS_OAUTH_GET_STATE_URL=http://localhost:3000/oauth/state
+REACT_APP_EXPRESS_OAUTH_LOGOUT_URL=http://localhost:3000/logout
+REACT_APP_BACKEND_ACTIVE=true
+REACT_APP_ENABLE_MDA_POINT=true
+REACT_APP_OPENSRP_API_BASE_URL=https://reveal-stage.smartregister.org/opensrp/rest/
+REACT_APP_ENABLE_DEFAULT_PLAN_USER_FILTER=false

package.json

@@ -15,7 +15,7 @@
     "@onaio/drill-down-table": "^1.0.4",
     "@onaio/element-map": "^0.0.2",
     "@onaio/formik-effect": "^0.0.1",
-    "@onaio/gatekeeper": "^0.1.1",
+    "@onaio/gatekeeper": "^0.4.0",
     "@onaio/gisida-lite": "^0.0.2",
     "@onaio/google-analytics": "^0.0.2",
     "@onaio/list-view": "^0.0.3",
@@ -26,7 +26,7 @@
     "@onaio/utils": "^0.0.1",
     "@opensrp/form-config": "^0.0.17",
     "@opensrp/population-characteristics": "^0.0.6",
-    "@opensrp/server-logout": "^0.0.1",
+    "@opensrp/server-logout": "^0.0.2",
     "@opensrp/server-service": "^0.0.17",
     "@opensrp/store": "^0.0.9",
     "@reduxjs/toolkit": "^1.5.0",

src/App/tests/fixtures.tsx

@@ -1,8 +1,10 @@
+import { jwtAccessToken } from '../../services/opensrp/tests/fixtures/session';
+
 export const expressAPIResponse = {
   gatekeeper: {
     result: {
       oAuth2Data: {
-        access_token: 'hunter2',
+        access_token: jwtAccessToken,
         expires_in: 1142,
         refresh_token: 'iloveoov',
         scope: 'read write',
@@ -18,7 +20,7 @@ export const expressAPIResponse = {
     authenticated: true,
     extraData: {
       oAuth2Data: {
-        access_token: 'hunter2',
+        access_token: jwtAccessToken,
         expires_in: 1142,
         refresh_token: 'iloveoov',
         scope: 'read write',

src/App/tests/logout.test.tsx

@@ -1,116 +1,56 @@
-import * as sessionDux from '@onaio/session-reducer';
+import { getOpenSRPUserInfo } from '@onaio/gatekeeper';
+import { authenticateUser } from '@onaio/session-reducer';
+import * as serverLogout from '@opensrp/server-logout';
 import { mount } from 'enzyme';
+import flushPromises from 'flush-promises';
 import { createBrowserHistory } from 'history';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { Provider } from 'react-redux';
-import { Router } from 'react-router';
-import * as utils from '../../helpers/errors';
+import { MemoryRouter } from 'react-router';
+import { jwtAccessToken } from '../../services/opensrp/tests/fixtures/session';
 import store from '../../store';
 import App from '../App';
-import { expressAPIResponse } from './fixtures';
 
 jest.mock('../../configs/env');
 
-// tslint:disable-next-line: no-var-requires
-const fetch = require('jest-fetch-mock');
+const realLocation = window.location;
+
 const history = createBrowserHistory();
 
 describe('src/app.logout', () => {
-  it('attempts to logout user', async () => {
-    fetch.mockResponse(JSON.stringify(expressAPIResponse));
-    delete window.location;
-    const hrefMock = jest.fn();
-    (window.location as any) = {
-      set href(url: string) {
-        hrefMock(url);
+  beforeAll(() => {
+    const { authenticated, user, extraData } = getOpenSRPUserInfo({
+      oAuth2Data: {
+        access_token: jwtAccessToken,
+        state: 'opensrp',
+        token_expires_at: '2017-07-13T20:30:59.000Z',
+        token_type: 'bearer',
       },
-    };
-
-    const wrapper = mount(
-      <Provider store={store}>
-        <Router history={history}>
-          <App />
-        </Router>
-      </Provider>
-    );
-    await new Promise<unknown>(resolve => setImmediate(resolve));
-    wrapper.update();
-
-    // At this point we have an authenticated user
-    const loggedIn = sessionDux.isAuthenticated(store.getState());
-    expect(loggedIn).toBeTruthy();
-
-    // simulate logout
-    history.push('/logout');
-    await act(async () => {
-      await new Promise(resolve => setImmediate(resolve));
-      wrapper.update();
     });
 
-    expect(fetch.mock.calls).toEqual([
-      ['http://localhost:3000/oauth/state'],
-      [
-        'https://opensrp/logout',
-        {
-          headers: {
-            accept: 'application/json',
-            authorization: 'Bearer hunter2',
-            'content-type': 'application/json;charset=UTF-8',
-          },
-          method: 'GET',
-        },
-      ],
-    ]);
-
-    expect(hrefMock.mock.calls).toEqual([
-      ['https://keycloak/logout?redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Flogout'],
-    ]);
+    store.dispatch(authenticateUser(authenticated, user, extraData));
   });
 
-  it('failed logout', async () => {
-    const err = new Error('Could not log out');
-    fetch.mockReject(err);
-
-    const errorSpy = jest.spyOn(utils, 'displayError');
-    delete window.location;
-    const hrefMock = jest.fn();
-    (window.location as any) = {
-      set href(url: string) {
-        hrefMock(url);
-      },
-    };
+  beforeEach(() => {
+    window.location = realLocation;
+    // Reset history
+    history.push('/');
+  });
 
+  it('correctly logs out user', async () => {
+    const mock = jest.spyOn(serverLogout, 'logout');
     const wrapper = mount(
       <Provider store={store}>
-        <Router history={history}>
+        <MemoryRouter initialEntries={[{ pathname: `/logout` }]}>
           <App />
-        </Router>
+        </MemoryRouter>
       </Provider>
     );
-    await new Promise<unknown>(resolve => setImmediate(resolve));
-    wrapper.update();
-
-    // At this point we have an authenticated user
-    const loggedIn = sessionDux.isAuthenticated(store.getState());
-    expect(loggedIn).toBeTruthy();
-
-    // simulate logout
-    history.push('/logout');
     await act(async () => {
-      await new Promise(resolve => setImmediate(resolve));
+      await flushPromises();
       wrapper.update();
     });
-
-    // expect(fetch.mock.calls).toEqual();
-
-    // keycloack url was not set
-    expect(hrefMock).not.toHaveBeenCalled();
-
-    // TODO - determine why this are 3 calls instead of 1
-    expect(errorSpy.mock.calls).toEqual([[err], [err], [err]]);
-
-    // current url
-    expect(wrapper.find('Router').props().history.location.pathname).toEqual('/');
+    expect(mock).toHaveBeenCalled();
   });
 });

src/components/Logout/index.tsx

@@ -1,3 +1,4 @@
+import { getExtraData } from '@onaio/session-reducer';
 import { logout } from '@opensrp/server-logout';
 import React from 'react';
 import { useHistory } from 'react-router';
@@ -11,18 +12,27 @@ import {
 import { HOME_URL } from '../../constants';
 import { displayError } from '../../helpers/errors';
 import { getPayloadOptions } from '../../services/opensrp';
+import store from '../../store';
 import Ripple from '../page/Loading';
 
 /** HOC function that calls function that logs out the user from both opensrp
- * and keycloak
+ * and keycloak.
+ *
+ * @returns {Function} returns Ripple component
  */
-export const CustomLogout = () => {
+export const CustomLogout: React.FC = (): JSX.Element => {
   const history = useHistory();
+
+  const { oAuth2Data } = getExtraData(store.getState());
+  // eslint-disable-next-line camelcase
+  const idTokenHint = oAuth2Data?.id_token;
   const payload = getPayloadOptions(new AbortController().signal, 'GET');
   const redirectUri = BACKEND_ACTIVE ? EXPRESS_OAUTH_LOGOUT_URL : DOMAIN_NAME;
-  logout(payload, OPENSRP_LOGOUT_URL, KEYCLOAK_LOGOUT_URL, redirectUri).catch(error => {
-    displayError(error);
-    history.push(HOME_URL);
-  });
+  logout(payload, KEYCLOAK_LOGOUT_URL, redirectUri, OPENSRP_LOGOUT_URL, idTokenHint).catch(
+    (error: Error) => {
+      displayError(error);
+      history.push(HOME_URL);
+    }
+  );
   return <Ripple />;
 };

src/components/forms/LocationSelect/tests/StudentExportForm.test.tsx

@@ -4,7 +4,10 @@ import { mount, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { OpenSRPAPIResponse } from '../../../../services/opensrp/tests/fixtures/session';
+import {
+  jwtAccessToken,
+  OpenSRPAPIResponse,
+} from '../../../../services/opensrp/tests/fixtures/session';
 import store from '../../../../store';
 import * as fixtures from '../../PlanForm/tests/fixtures';
 import StudentExportForm from '../StudentExportForm';
@@ -100,7 +103,7 @@ describe('components/forms/ExportForm', () => {
         {
           headers: {
             accept: 'application/json',
-            authorization: 'Bearer hunter2',
+            authorization: `Bearer ${jwtAccessToken}`,
             'content-type': 'application/json;charset=UTF-8',
           },
           method: 'GET',