Fix missing session state on browser reload. (#1282)

* Check authN workflow before AuthZ * Update tests
onaio · Nov 8, 2023 · 608dfea · 608dfea
1 parent 3ef6e5e
commit 608dfea
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 9 deletions.
diff --git a/packages/react-utils/src/helpers/componentUtils.tsx b/packages/react-utils/src/helpers/componentUtils.tsx
@@ -30,16 +30,11 @@ interface ComponentProps extends Partial<RouteProps> {
 
 export const PrivateComponent = (props: ComponentProps) => {
   //  props to pass on to Connected Private Route
-  const { permissions, ...otherProps } = props;
-  const CPRProps = {
-    ...otherProps,
-    keycloakBaseURL: configs.keycloakBaseURL,
-    opensrpBaseURL: configs.opensrpBaseURL,
-    fhirBaseURL: configs.fhirBaseURL,
-  };
+  const { permissions, component: WrappedComponent, ...otherProps } = props;
+
   const { t } = useTranslation();
 
-  return (
+  const RbacWrappedComponent = (props: Record<string, unknown>) => (
     <RbacCheck
       permissions={permissions}
       fallback={
@@ -49,9 +44,19 @@ export const PrivateComponent = (props: ComponentProps) => {
         />
       }
     >
-      <ConnectedPrivateRoute {...CPRProps} />
+      <WrappedComponent {...props} />
     </RbacCheck>
   );
+
+  const CPRProps = {
+    ...otherProps,
+    component: RbacWrappedComponent,
+    keycloakBaseURL: configs.keycloakBaseURL,
+    opensrpBaseURL: configs.opensrpBaseURL,
+    fhirBaseURL: configs.fhirBaseURL,
+  };
+
+  return <ConnectedPrivateRoute {...CPRProps} />;
 };
 
 /**

diff --git a/packages/react-utils/src/helpers/tests/componentUtils.test.tsx b/packages/react-utils/src/helpers/tests/componentUtils.test.tsx
@@ -15,6 +15,8 @@ import flushPromises from 'flush-promises';
 import fetch from 'jest-fetch-mock';
 import { superUserRole } from '../test-utils';
 import { RbacProvider, RoleContext, UserRole } from '@opensrp/rbac';
+import { render } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
 
 const { PublicComponent, PrivateComponent, isAuthorized } = componentUtils;
 
@@ -44,6 +46,35 @@ describe('componentUtils', () => {
     wrapper.unmount();
   });
 
+  it('First check that user is logged in before Rbac', async () => {
+    const MockComponent = () => {
+      return <p>I love oof!</p>;
+    };
+    const history = createMemoryHistory();
+    const props = {
+      component: MockComponent,
+      redirectPath: '/login',
+      disableLoginProtection: false,
+    };
+
+    render(
+      <Provider store={store}>
+        <Router history={history}>
+          <RbacProvider value={superUserRole}>
+            <PrivateComponent {...props} component={MockComponent} permissions={[]} />
+          </RbacProvider>
+        </Router>
+      </Provider>
+    );
+    await act(async () => {
+      await flushPromises();
+    });
+
+    // should redirect non-AuthN'd users to login
+    expect(history.location.pathname).toEqual('/login');
+    expect(history.location.search).toEqual('?next=');
+  });
+
   it('PrivateComponent Renders correctly', async () => {
     store.dispatch(
       authenticateUser(