[CLIENT] Add Authorization (#38)

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

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>
+  );
+};

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,
+});

client/graphql/queries/role.gql

@@ -0,0 +1,3 @@
+query Role {
+  role
+}

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;
+};

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;
+}

client/pages/_app.tsx

@@ -8,18 +8,25 @@ 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 {
   render() {
     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>
     );
   }

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]);

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,
+]);

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,
+]);