From 1c8073fea07bc3955df49f735ced83342ebf1ef6 Mon Sep 17 00:00:00 2001
From: Youssef Raafat <youssefraafatnasry@gmail.com>
Date: Mon, 28 Sep 2020 03:05:18 +0200
Subject: [PATCH] [CLIENT] Add Authorization (#38)

---
 client/components/NavBar.tsx                  | 162 ++++++++++--------
 client/components/providers/AuthProvider.tsx  |  18 ++
 client/context/AuthContext.ts                 |  12 ++
 client/graphql/queries/role.gql               |   3 +
 client/hocs/withAuth.tsx                      |  48 ++++++
 client/hooks/useAuth.ts                       |  10 ++
 client/pages/_app.tsx                         |  17 +-
 client/pages/create/certificateProvider.tsx   |   9 +-
 client/pages/create/releaseRequest.tsx        |   8 +-
 client/pages/create/resourceRequest.tsx       |  11 +-
 client/pages/create/skill.tsx                 |   6 +-
 .../pages/edit/certificateProvider/[id].tsx   |   7 +-
 client/pages/edit/releaseRequest/[id].tsx     |   7 +-
 client/pages/edit/resourceRequest/[id].tsx    |  10 +-
 client/pages/edit/skill/[id].tsx              |   9 +-
 client/pages/index.tsx                        |   8 +-
 client/pages/view/certificateProviders.tsx    |  20 ++-
 client/pages/view/releaseRequests.tsx         |   8 +-
 client/pages/view/resourceRequests.tsx        |   8 +-
 client/pages/view/skills.tsx                  |   6 +-
 client/tsconfig.json                          |   2 +-
 client/urql/cacheExchangeOpts.ts              |   9 +
 22 files changed, 276 insertions(+), 122 deletions(-)
 create mode 100644 client/components/providers/AuthProvider.tsx
 create mode 100644 client/context/AuthContext.ts
 create mode 100644 client/graphql/queries/role.gql
 create mode 100644 client/hocs/withAuth.tsx
 create mode 100644 client/hooks/useAuth.ts

diff --git a/client/components/NavBar.tsx b/client/components/NavBar.tsx
index 5e600c2..6b0dfaa 100644
--- a/client/components/NavBar.tsx
+++ b/client/components/NavBar.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { StatefulMenu } from "baseui/menu";
 import { StatefulPopover, TRIGGER_TYPE } from "baseui/popover";
 import {
@@ -12,15 +12,16 @@ import { Button } from "baseui/button";
 import { useRouter } from "next/dist/client/router";
 import { Plus } from "baseui/icon";
 
-import { useMeQuery, useLogoutMutation } from "../generated/graphql";
+import { useLogoutMutation, UserRole as R } from "../generated/graphql";
 import { Block } from "baseui/block";
+import { useAuth } from "../hooks/useAuth";
 
 interface NavBarProps {}
 
 export const NavBar: React.FC<NavBarProps> = () => {
-  const [{ data }] = useMeQuery();
-  const [, logout] = useLogoutMutation();
   const router = useRouter();
+  const { role } = useAuth();
+  const [, logout] = useLogoutMutation();
 
   return (
     <HeaderNavigation>
@@ -32,58 +33,63 @@ export const NavBar: React.FC<NavBarProps> = () => {
       </StyledNavigationList>
 
       <StyledNavigationList $align={ALIGN.left}>
-        <StyledNavigationItem>
-          <StatefulPopover
-            triggerType={TRIGGER_TYPE.hover}
-            content={() => (
-              <StatefulMenu
-                onItemSelect={({ item }) => router.push(item.route)}
-                items={{
-                  __ungrouped: [],
-                  Requests: [
-                    {
-                      label: "Resource Request",
-                      route: "/view/resourceRequests",
-                    },
-                    {
-                      label: "Release Request",
-                      route: "/view/releaseRequests",
-                    },
-                  ],
-                }}
-              />
-            )}
-          >
-            <Label1>Talents</Label1>
-          </StatefulPopover>
-        </StyledNavigationItem>
-        <StyledNavigationItem>
-          <StatefulPopover
-            triggerType={TRIGGER_TYPE.hover}
-            content={() => (
-              <StatefulMenu
-                onItemSelect={({ item }) => router.push(item.route)}
-                items={{
-                  __ungrouped: [],
-                  Skills: [
-                    {
-                      label: "Skills",
-                      route: "/view/skills",
-                    },
-                  ],
-                  Certifications: [
-                    {
-                      label: "Certificate Providers",
-                      route: "/view/certificateProviders",
-                    },
-                  ],
-                }}
-              />
-            )}
-          >
-            <Label1>Skills & Certifications</Label1>
-          </StatefulPopover>
-        </StyledNavigationItem>
+        {role == R.Admin || role == R.Manager ? (
+          <StyledNavigationItem>
+            <StatefulPopover
+              triggerType={TRIGGER_TYPE.hover}
+              content={() => (
+                <StatefulMenu
+                  onItemSelect={({ item }) => router.push(item.route)}
+                  items={{
+                    __ungrouped: [],
+                    Requests: [
+                      {
+                        label: "Resource Request",
+                        route: "/view/resourceRequests",
+                      },
+                      {
+                        label: "Release Request",
+                        route: "/view/releaseRequests",
+                      },
+                    ],
+                  }}
+                />
+              )}
+            >
+              <Label1>Talents</Label1>
+            </StatefulPopover>
+          </StyledNavigationItem>
+        ) : null}
+
+        {role == R.Admin ? (
+          <StyledNavigationItem>
+            <StatefulPopover
+              triggerType={TRIGGER_TYPE.hover}
+              content={() => (
+                <StatefulMenu
+                  onItemSelect={({ item }) => router.push(item.route)}
+                  items={{
+                    __ungrouped: [],
+                    Skills: [
+                      {
+                        label: "Skills",
+                        route: "/view/skills",
+                      },
+                    ],
+                    Certifications: [
+                      {
+                        label: "Certificate Providers",
+                        route: "/view/certificateProviders",
+                      },
+                    ],
+                  }}
+                />
+              )}
+            >
+              <Label1>Skills & Certifications</Label1>
+            </StatefulPopover>
+          </StyledNavigationItem>
+        ) : null}
       </StyledNavigationList>
       <StyledNavigationList $align={ALIGN.center} />
 
@@ -96,23 +102,31 @@ export const NavBar: React.FC<NavBarProps> = () => {
                 onItemSelect={({ item }) => router.push(item.route)}
                 items={{
                   __ungrouped: [],
-                  Requests: [
-                    {
-                      label: "Resource Request",
-                      route: "/create/resourceRequest",
-                    },
-                    {
-                      label: "Release Request",
-                      route: "/create/releaseRequest",
-                    },
-                  ],
-                  "Skills & Certificates": [
-                    { label: "Skill", route: "/create/skill" },
-                    {
-                      label: "Certificate Provider",
-                      route: "/create/certificateProvider",
-                    },
-                  ],
+                  ...(role == R.Admin || role == R.Manager
+                    ? {
+                        Requests: [
+                          {
+                            label: "Resource Request",
+                            route: "/create/resourceRequest",
+                          },
+                          {
+                            label: "Release Request",
+                            route: "/create/releaseRequest",
+                          },
+                        ],
+                      }
+                    : {}),
+                  ...(role == R.Admin
+                    ? {
+                        Lists: [
+                          { label: "Skill", route: "/create/skill" },
+                          {
+                            label: "Certificate Provider",
+                            route: "/create/certificateProvider",
+                          },
+                        ],
+                      }
+                    : {}),
                 }}
               />
             )}
@@ -121,7 +135,7 @@ export const NavBar: React.FC<NavBarProps> = () => {
           </StatefulPopover>
         </StyledNavigationItem>
         <StyledNavigationItem>
-          {!data?.me ? (
+          {!role ? (
             <Button onClick={() => router.push("/login")}>Login</Button>
           ) : (
             <Button
diff --git a/client/components/providers/AuthProvider.tsx b/client/components/providers/AuthProvider.tsx
new file mode 100644
index 0000000..1f3257e
--- /dev/null
+++ b/client/components/providers/AuthProvider.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { AuthContext } from "../../context/AuthContext";
+import { useRoleQuery } from "../../generated/graphql";
+
+export const AuthProvider: React.FC = ({ children }) => {
+  const [{ data, fetching }] = useRoleQuery();
+
+  return (
+    <AuthContext.Provider
+      value={{
+        isLoading: fetching,
+        role: data?.role || null,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
diff --git a/client/context/AuthContext.ts b/client/context/AuthContext.ts
new file mode 100644
index 0000000..2bddd9f
--- /dev/null
+++ b/client/context/AuthContext.ts
@@ -0,0 +1,12 @@
+import React from "react";
+import { UserRole } from "../generated/graphql";
+
+export interface IAuthContext {
+  isLoading: boolean;
+  role: UserRole | null;
+}
+
+export const AuthContext = React.createContext<IAuthContext>({
+  isLoading: true,
+  role: null,
+});
diff --git a/client/graphql/queries/role.gql b/client/graphql/queries/role.gql
new file mode 100644
index 0000000..c64cd9e
--- /dev/null
+++ b/client/graphql/queries/role.gql
@@ -0,0 +1,3 @@
+query Role {
+  role
+}
diff --git a/client/hocs/withAuth.tsx b/client/hocs/withAuth.tsx
new file mode 100644
index 0000000..10e66eb
--- /dev/null
+++ b/client/hocs/withAuth.tsx
@@ -0,0 +1,48 @@
+import { Block } from "baseui/block";
+import { useRouter } from "next/dist/client/router";
+import { Loading } from "../components/Loading";
+import { UserRole } from "../generated/graphql";
+import { useAuth } from "../hooks/useAuth";
+
+/**
+ * A Higher Order Component to protect pages from unauthenticated and
+ * unauthorized usage.
+ * Redirects to "/login" if unauthenticated.
+ * Redirects to "/" if unauthorized.
+ *
+ * @param roles the roles authorized to access the page,
+ *              empty array or undefined if all.
+ */
+export const withAuth = (
+  WrappedComponent: React.ComponentType,
+  roles?: UserRole[]
+) => {
+  const WithAuthWrapper = (props: JSX.IntrinsicAttributes) => {
+    const { isLoading, role } = useAuth();
+    const router = useRouter();
+
+    if (isLoading) {
+      return (
+        <Block display="flex" height="100vh" width="100vw">
+          <Loading />
+        </Block>
+      );
+    }
+
+    if (!role) {
+      // unauthenticated
+      router.push("/login");
+      return <></>;
+    }
+
+    if (roles && roles.length > 0 && !roles.includes(role)) {
+      // unauthorized
+      router.push("/");
+      return <></>;
+    }
+
+    return <WrappedComponent {...props} />;
+  };
+
+  return WithAuthWrapper;
+};
diff --git a/client/hooks/useAuth.ts b/client/hooks/useAuth.ts
new file mode 100644
index 0000000..c25a18a
--- /dev/null
+++ b/client/hooks/useAuth.ts
@@ -0,0 +1,10 @@
+import React from "react";
+import { AuthContext, IAuthContext } from "../context/AuthContext";
+
+export function useAuth(): IAuthContext {
+  const context = React.useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}
diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx
index 0288ef7..6f70707 100644
--- a/client/pages/_app.tsx
+++ b/client/pages/_app.tsx
@@ -8,6 +8,7 @@ import "../styles/global.css";
 import { ItworxTheme } from "../styles/theme";
 import { debug, styletron } from "../styletron";
 import { urqlClient } from "../urql/urqlClient";
+import { AuthProvider } from "../components/providers/AuthProvider";
 
 
 export default class MainApp extends App {
@@ -15,11 +16,17 @@ export default class MainApp extends App {
     const { Component, pageProps } = this.props;
     return (
       <UrqlProvider value={urqlClient}>
-        <StyletronProvider value={styletron} debug={debug} debugAfterHydration>
-          <BaseProvider theme={ItworxTheme}>
-            <Component {...pageProps} />
-          </BaseProvider>
-        </StyletronProvider>
+        <AuthProvider>
+          <StyletronProvider
+            value={styletron}
+            debug={debug}
+            debugAfterHydration
+          >
+            <BaseProvider theme={ItworxTheme}>
+              <Component {...pageProps} />
+            </BaseProvider>
+          </StyletronProvider>
+        </AuthProvider>
       </UrqlProvider>
     );
   }
diff --git a/client/pages/create/certificateProvider.tsx b/client/pages/create/certificateProvider.tsx
index e9a5ce5..a34b010 100644
--- a/client/pages/create/certificateProvider.tsx
+++ b/client/pages/create/certificateProvider.tsx
@@ -3,8 +3,11 @@ import { useRouter } from "next/dist/client/router";
 
 import { CertificateProviderForm } from "../../components/CertificateProviderForm";
 import { MainLayout } from "../../components/MainLayout";
-import { useCreateCertificationProviderMutation } from "../../generated/graphql";
-
+import {
+  useCreateCertificationProviderMutation,
+  UserRole,
+} from "../../generated/graphql";
+import { withAuth } from "../../hocs/withAuth";
 
 const CreateCertificationProvider: React.FC<{}> = () => {
   const router = useRouter();
@@ -30,4 +33,4 @@ const CreateCertificationProvider: React.FC<{}> = () => {
   );
 };
 
-export default CreateCertificationProvider;
+export default withAuth(CreateCertificationProvider, [UserRole.Admin]);
diff --git a/client/pages/create/releaseRequest.tsx b/client/pages/create/releaseRequest.tsx
index 9e275ff..b4b7db1 100644
--- a/client/pages/create/releaseRequest.tsx
+++ b/client/pages/create/releaseRequest.tsx
@@ -4,10 +4,11 @@ import { ReleaseRequestForm } from "../../components/ReleaseRequestForm";
 import {
   ReleaseRequestInput,
   useCreateReleaseRequestMutation,
+  UserRole,
 } from "../../generated/graphql";
 import { useRouter } from "next/dist/client/router";
 import { toErrorMap } from "../../utils/toErrorMap";
-
+import { withAuth } from "../../hocs/withAuth";
 
 const CreateReleaseRequest: React.FC<{}> = () => {
   const [, createReleaseRequest] = useCreateReleaseRequestMutation();
@@ -46,4 +47,7 @@ const CreateReleaseRequest: React.FC<{}> = () => {
   );
 };
 
-export default CreateReleaseRequest;
+export default withAuth(CreateReleaseRequest, [
+  UserRole.Admin,
+  UserRole.Manager,
+]);
diff --git a/client/pages/create/resourceRequest.tsx b/client/pages/create/resourceRequest.tsx
index 39c90a6..69552b2 100644
--- a/client/pages/create/resourceRequest.tsx
+++ b/client/pages/create/resourceRequest.tsx
@@ -1,12 +1,12 @@
 import React from "react";
-
+import { useRouter } from "next/dist/client/router";
 import { ResourceRequestForm } from "../../components/ResourceRequestForm";
 import {
   ResourceRequestInput,
   useCreateResourceRequestMutation,
+  UserRole,
 } from "../../generated/graphql";
-import { useRouter } from "next/dist/client/router";
-
+import { withAuth } from "../../hocs/withAuth";
 
 const CreateResourceRequest: React.FC<{}> = () => {
   const [, createResourceRequest] = useCreateResourceRequestMutation();
@@ -49,4 +49,7 @@ const CreateResourceRequest: React.FC<{}> = () => {
   );
 };
 
-export default CreateResourceRequest;
+export default withAuth(CreateResourceRequest, [
+  UserRole.Admin,
+  UserRole.Manager,
+]);
diff --git a/client/pages/create/skill.tsx b/client/pages/create/skill.tsx
index 5fa931c..8888f5e 100644
--- a/client/pages/create/skill.tsx
+++ b/client/pages/create/skill.tsx
@@ -2,8 +2,8 @@ import React from "react";
 import { useRouter } from "next/dist/client/router";
 import { MainLayout } from "../../components/MainLayout";
 import { SkillForm } from "../../components/SkillForm";
-import { useCreateSkillMutation } from "../../generated/graphql";
-
+import { useCreateSkillMutation, UserRole } from "../../generated/graphql";
+import { withAuth } from "../../hocs/withAuth";
 
 const CreateSkill: React.FC<{}> = () => {
   const [, createSkill] = useCreateSkillMutation();
@@ -25,4 +25,4 @@ const CreateSkill: React.FC<{}> = () => {
   );
 };
 
-export default CreateSkill;
+export default withAuth(CreateSkill, [UserRole.Admin]);
diff --git a/client/pages/edit/certificateProvider/[id].tsx b/client/pages/edit/certificateProvider/[id].tsx
index b7b7441..83e1b0b 100644
--- a/client/pages/edit/certificateProvider/[id].tsx
+++ b/client/pages/edit/certificateProvider/[id].tsx
@@ -2,13 +2,14 @@ import React from "react";
 import { useRouter } from "next/dist/client/router";
 
 import { CertificateProviderForm } from "../../../components/CertificateProviderForm";
-import { MainLayout } from "../../../components/MainLayout";
 import { Loading } from "../../../components/Loading";
+import { MainLayout } from "../../../components/MainLayout";
 import {
   useCertificateProviderQuery,
+  UserRole,
   useUpdateCertificationProviderMutation,
 } from "../../../generated/graphql";
-
+import { withAuth } from "../../../hocs/withAuth";
 
 const EditCertificationProvider: React.FC<{}> = () => {
   const router = useRouter();
@@ -57,4 +58,4 @@ const EditCertificationProvider: React.FC<{}> = () => {
   );
 };
 
-export default EditCertificationProvider;
+export default withAuth(EditCertificationProvider, [UserRole.Admin]);
diff --git a/client/pages/edit/releaseRequest/[id].tsx b/client/pages/edit/releaseRequest/[id].tsx
index e21fd7c..89ae1be 100644
--- a/client/pages/edit/releaseRequest/[id].tsx
+++ b/client/pages/edit/releaseRequest/[id].tsx
@@ -6,11 +6,12 @@ import { MainLayout } from "../../../components/MainLayout";
 import { ReleaseRequestForm } from "../../../components/ReleaseRequestForm";
 import {
   useReleaseRequestQuery,
-  useUpdateReleaseRequestMutation
+  UserRole,
+  useUpdateReleaseRequestMutation,
 } from "../../../generated/graphql";
+import { withAuth } from "../../../hocs/withAuth";
 import { toErrorMap } from "../../../utils/toErrorMap";
 
-
 const EditReleaseRequest: React.FC<{}> = () => {
   const [, updateReleaseRequest] = useUpdateReleaseRequestMutation();
   const router = useRouter();
@@ -69,4 +70,4 @@ const EditReleaseRequest: React.FC<{}> = () => {
   );
 };
 
-export default EditReleaseRequest;
+export default withAuth(EditReleaseRequest, [UserRole.Admin, UserRole.Manager]);
diff --git a/client/pages/edit/resourceRequest/[id].tsx b/client/pages/edit/resourceRequest/[id].tsx
index 87e3aa8..f55fc71 100644
--- a/client/pages/edit/resourceRequest/[id].tsx
+++ b/client/pages/edit/resourceRequest/[id].tsx
@@ -6,9 +6,10 @@ import { MainLayout } from "../../../components/MainLayout";
 import { ResourceRequestForm } from "../../../components/ResourceRequestForm";
 import {
   useResourceRequestQuery,
-  useUpdateResourceRequestMutation
+  UserRole,
+  useUpdateResourceRequestMutation,
 } from "../../../generated/graphql";
-
+import { withAuth } from "../../../hocs/withAuth";
 
 const EditResourceRequest: React.FC<{}> = () => {
   const [, updateResourceRequest] = useUpdateResourceRequestMutation();
@@ -67,4 +68,7 @@ const EditResourceRequest: React.FC<{}> = () => {
   );
 };
 
-export default EditResourceRequest;
+export default withAuth(EditResourceRequest, [
+  UserRole.Admin,
+  UserRole.Manager,
+]);
diff --git a/client/pages/edit/skill/[id].tsx b/client/pages/edit/skill/[id].tsx
index a691563..18196e4 100644
--- a/client/pages/edit/skill/[id].tsx
+++ b/client/pages/edit/skill/[id].tsx
@@ -1,14 +1,15 @@
 import React from "react";
 import { useRouter } from "next/dist/client/router";
 
+import { Loading } from "../../../components/Loading";
 import { MainLayout } from "../../../components/MainLayout";
 import { SkillForm } from "../../../components/SkillForm";
-import { Loading } from "../../../components/Loading";
 import {
+  UserRole,
   useSkillQuery,
   useUpdateSkillMutation,
 } from "../../../generated/graphql";
-
+import { withAuth } from "../../../hocs/withAuth";
 
 const EditSkill: React.FC<{}> = () => {
   const [, updateSkill] = useUpdateSkillMutation();
@@ -33,7 +34,7 @@ const EditSkill: React.FC<{}> = () => {
   if (skill === undefined) {
     return <p> Undefined </p>;
   }
-  
+
   return (
     <MainLayout>
       <SkillForm
@@ -51,4 +52,4 @@ const EditSkill: React.FC<{}> = () => {
   );
 };
 
-export default EditSkill;
+export default withAuth(EditSkill, [UserRole.Admin]);
diff --git a/client/pages/index.tsx b/client/pages/index.tsx
index 8235329..0818c4f 100644
--- a/client/pages/index.tsx
+++ b/client/pages/index.tsx
@@ -1,15 +1,19 @@
 import { Heading, HeadingLevel } from "baseui/heading";
 
 import { MainLayout } from "../components/MainLayout";
+import { withAuth } from "../hocs/withAuth";
+import { useAuth } from "../hooks/useAuth";
 
 const Home: React.FC<{}> = () => {
+  const { role } = useAuth();
+
   return (
     <MainLayout>
       <HeadingLevel>
-        <Heading>TPD</Heading>
+        <Heading>TPD for ({role})</Heading>
       </HeadingLevel>
     </MainLayout>
   );
 };
 
-export default Home;
+export default withAuth(Home);
diff --git a/client/pages/view/certificateProviders.tsx b/client/pages/view/certificateProviders.tsx
index 6eb464a..84d127e 100644
--- a/client/pages/view/certificateProviders.tsx
+++ b/client/pages/view/certificateProviders.tsx
@@ -1,23 +1,25 @@
 import React from "react";
+import { useStyletron } from "baseui";
 import { Button } from "baseui/button";
-import { Cell, Grid } from "baseui/layout-grid";
-import { CSVLink } from "react-csv";
-import { Delete, Plus, Show } from "baseui/icon";
-import { HeadingLevel } from "baseui/heading";
 import {
-  Unstable_StatefulDataTable,
-  StringColumn,
   RowActionT,
+  StringColumn,
+  Unstable_StatefulDataTable,
 } from "baseui/data-table";
+import { HeadingLevel } from "baseui/heading";
+import { Delete, Plus, Show } from "baseui/icon";
+import { Cell, Grid } from "baseui/layout-grid";
 import { useRouter } from "next/dist/client/router";
-import { useStyletron } from "baseui";
+import { CSVLink } from "react-csv";
 
+import { Loading } from "../../components/Loading";
 import { MainLayout } from "../../components/MainLayout";
 import {
   useCertificationsProvidersQuery,
   useDeleteCertificateProviderMutation,
+  UserRole,
 } from "../../generated/graphql";
-import { Loading } from "../../components/Loading";
+import { withAuth } from "../../hocs/withAuth";
 
 type RowDataT = {
   certificatoinProviderId: number;
@@ -131,4 +133,4 @@ const ViewCertificateProviders: React.FC<{}> = ({}) => {
   );
 };
 
-export default ViewCertificateProviders;
+export default withAuth(ViewCertificateProviders, [UserRole.Admin]);
diff --git a/client/pages/view/releaseRequests.tsx b/client/pages/view/releaseRequests.tsx
index 48ab5c8..92fbfc5 100644
--- a/client/pages/view/releaseRequests.tsx
+++ b/client/pages/view/releaseRequests.tsx
@@ -16,8 +16,9 @@ import { MainLayout } from "../../components/MainLayout";
 import {
   ReleaseRequests,
   useReleaseRequestsQuery,
+  UserRole,
 } from "../../generated/graphql";
-
+import { withAuth } from "../../hocs/withAuth";
 
 type RowDataT = ReleaseRequests;
 
@@ -129,4 +130,7 @@ const ViewReleaseRequests = () => {
   );
 };
 
-export default ViewReleaseRequests;
+export default withAuth(ViewReleaseRequests, [
+  UserRole.Admin,
+  UserRole.Manager,
+]);
diff --git a/client/pages/view/resourceRequests.tsx b/client/pages/view/resourceRequests.tsx
index 6fc38dc..fdb4325 100644
--- a/client/pages/view/resourceRequests.tsx
+++ b/client/pages/view/resourceRequests.tsx
@@ -10,13 +10,14 @@ import { HeadingLevel } from "baseui/heading";
 import { Show } from "baseui/icon";
 import { useRouter } from "next/dist/client/router";
 import { CSVLink } from "react-csv";
-
 import { Loading } from "../../components/Loading";
 import { MainLayout } from "../../components/MainLayout";
 import {
   ResourceRequests,
   useResourceRequestsQuery,
+  UserRole,
 } from "../../generated/graphql";
+import { withAuth } from "../../hocs/withAuth";
 
 type RowDataT = ResourceRequests;
 
@@ -148,4 +149,7 @@ const ViewResourceRequests = () => {
   );
 };
 
-export default ViewResourceRequests;
+export default withAuth(ViewResourceRequests, [
+  UserRole.Admin,
+  UserRole.Manager,
+]);
diff --git a/client/pages/view/skills.tsx b/client/pages/view/skills.tsx
index 057db74..6a52c23 100644
--- a/client/pages/view/skills.tsx
+++ b/client/pages/view/skills.tsx
@@ -12,12 +12,14 @@ import { Delete, Plus, Show } from "baseui/icon";
 import { Cell, Grid } from "baseui/layout-grid";
 import { useRouter } from "next/dist/client/router";
 
+import { Loading } from "../../components/Loading";
 import { MainLayout } from "../../components/MainLayout";
 import {
   useDeleteSkillMutation,
+  UserRole,
   useSkillsQuery,
 } from "../../generated/graphql";
-import { Loading } from "../../components/Loading";
+import { withAuth } from "../../hocs/withAuth";
 
 type RowDataT = { skillId: number; skillName: string };
 
@@ -126,4 +128,4 @@ const ViewSkills: React.FC<{}> = ({}) => {
   );
 };
 
-export default ViewSkills;
+export default withAuth(ViewSkills, [UserRole.Admin]);
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 95aa3a0..a4f4a62 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -4,7 +4,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
diff --git a/client/urql/cacheExchangeOpts.ts b/client/urql/cacheExchangeOpts.ts
index 9483a17..2053272 100644
--- a/client/urql/cacheExchangeOpts.ts
+++ b/client/urql/cacheExchangeOpts.ts
@@ -6,6 +6,8 @@ import {
   MeQuery,
   MeDocument,
   LogoutMutation,
+  RoleQuery,
+  RoleDocument,
 } from "../generated/graphql";
 
 export const cacheExchangeOpts: CacheExchangeOpts = {
@@ -19,6 +21,7 @@ export const cacheExchangeOpts: CacheExchangeOpts = {
           (_result, _query) =>
             _result.login.data ? { me: _result.login.data } : _query
         );
+        cache.invalidate({ __typename: "Query" }, "role");
       },
       logout: (result, args, cache, info) => {
         updateQueryWrapper<LogoutMutation, MeQuery>(
@@ -27,6 +30,12 @@ export const cacheExchangeOpts: CacheExchangeOpts = {
           { query: MeDocument },
           () => ({ me: null })
         );
+        updateQueryWrapper<LogoutMutation, RoleQuery>(
+          cache,
+          result,
+          { query: RoleDocument },
+          () => ({ role: null })
+        );
       },
     },
   },