Authentication and major rewriting

src/components/Layout/Layout.js

-import React from 'react';
-import { Route, Switch, withRouter } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { Route, Switch, withRouter, Redirect } from 'react-router-dom';
 import classnames from 'classnames';
 import useStyles from './styles';
 import Header from '../Header';
 import Sidebar from '../Sidebar';
+import Home from '../../pages/home';
 import Dashboard from '../../pages/dashboard';
 import Users from '../../pages/users';
 import Roles from '../../pages/roles/Roles';
@@ -13,35 +14,112 @@ import Fields from '../../pages/fields';
 import Policies from '../../pages/policies';
 import Groups from '../../pages/groups/Groups';
 import { useLayoutState } from '../../context/LayoutContext';
+import { useAuth } from 'react-oidc-context';
+import { createUser, findUserBySub } from '../../services/GatekeeperService';
+
+const ProtectedRoute = ({ isAllowed, redirectPath = '/forbidden', path, component }) => {
+  if (!isAllowed) {
+    return <Redirect to={redirectPath} />;
+  }
+  return <Route path={path} component={component} />;
+};
 
 function Layout(props) {
   const classes = useStyles();
   const layoutState = useLayoutState();
+  const auth = useAuth();
+  const [user, setUser] = useState(null);
+  const [roles, setRoles] = useState([]);
+
+  useEffect(() => {
+    const fetchUser = async (sub) => {
+      let user = await findUserBySub(sub);
+      if (!user.id) {
+        // User registered on Keycloak but not in the database
+        if (auth.user?.profile?.email) {
+          const result = await createUser(sub, auth.user?.profile?.email);
+
+          if (result) {
+            user = await findUserBySub(sub);
+          } else {
+            auth.signoutRedirect();
+          }
+        }
+      }
+      setUser(user);
+      setRoles(user.roles.map((r) => r.role_id));
+    };
+    if (!auth || auth.isLoading) {
+      return;
+    }
+    if (auth.isAuthenticated) {
+      fetchUser(auth.user.profile.sub);
+    } else {
+      auth.signinRedirect();
+    }
+  }, [auth]);
 
   return (
-    <div className={classes.root}>
-      <>
-        <Header history={props.history} />
-        <Sidebar />
-        <div
-          className={classnames(classes.content, {
-            [classes.contentShift]: layoutState.isSidebarOpened,
-          })}
-        >
-          <div className={classes.fakeToolbar} />
-          <Switch>
-            <Route path="/app/dashboard" component={Dashboard} />
-            <Route path="/app/users" component={Users} />
-            <Route path="/app/roles" component={Roles} />
-            <Route path="/app/groups" component={Groups} />
-            <Route path="/app/requests" component={Requests} />
-            <Route path="/app/policies" component={Policies} />
-            <Route path="/app/sources" component={Sources} />
-            <Route path="/app/fields" component={Fields} />
-          </Switch>
-        </div>
-      </>
-    </div>
+    user &&
+    roles.length > 0 && (
+      <div className={classes.root}>
+        <>
+          <Header email={user.email} usehistory={props.history} />
+          <Sidebar roles={roles} />
+          <div
+            className={classnames(classes.content, {
+              [classes.contentShift]: layoutState.isSidebarOpened,
+            })}
+          >
+            <div className={classes.fakeToolbar} />
+            <Switch>
+              <Route path="/home" component={Home} />
+              <ProtectedRoute
+                path="/dashboard"
+                isAllowed={roles.includes(1)}
+                component={Dashboard}
+              />
+              <ProtectedRoute
+                path="/users"
+                isAllowed={roles.includes(1)}
+                component={Users}
+              />
+              <ProtectedRoute
+                isAllowed={roles.includes(1)}
+                path="/roles"
+                component={Roles}
+              />
+              <ProtectedRoute
+                isAllowed={roles.includes(1)}
+                path="/groups"
+                component={Groups}
+              />
+              <ProtectedRoute
+                isAllowed={roles.includes(1)}
+                path="/requests"
+                component={Requests}
+              />
+              <ProtectedRoute
+                isAllowed={roles.includes(1)}
+                path="/policies"
+                component={Policies}
+              />
+              <ProtectedRoute
+                isAllowed={roles.includes(1) || roles.includes(2)}
+                path="/sources"
+                component={Sources}
+              />
+              <ProtectedRoute
+                isAllowed={roles.includes(1) || roles.includes(2)}
+                path="/fields"
+                component={Fields}
+              />
+              <Route render={() => <Redirect to="/not-found" />} />
+            </Switch>
+          </div>
+        </>
+      </div>
+    )
   );
 }