From aea873e9202c87489725733033d8dc0edd569055 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Mon, 22 Mar 2021 11:29:35 -0700
Subject: [PATCH] Add role checks (#21)

* Add role checks

* Remove moved Roles enum
---
 src/components/App/App.test.js                |   25 +-
 .../App/__snapshots__/App.test.js.snap        | 1713 +++++++++--------
 src/components/Contexts/UserContext.jsx       |   21 +-
 src/components/Contexts/UserContext.test.jsx  |   70 +-
 .../Contexts/__mocks__/UserContext.jsx        |   15 +-
 .../FileUploadForm/FileUploadForm.test.js     |    3 +-
 src/components/FileUploadForm/index.jsx       |   21 +-
 src/components/Home/index.jsx                 |   35 +
 src/components/Layouts/MenuDrawer.jsx         |    2 +-
 src/components/Layouts/SideMenu.jsx           |   34 +-
 src/components/Layouts/SideMenu.test.jsx      |   33 +
 .../__snapshots__/SideMenu.test.jsx.snap      |  115 ++
 src/components/Routes/AuthRoute.jsx           |   15 +-
 src/components/Routes/SiteRoutes.jsx          |   14 +-
 src/utils/jwt.js                              |   14 +
 src/utils/jwt.test.js                         |   15 +
 src/utils/roles.js                            |   35 +
 src/utils/roles.test.js                       |   10 +
 src/utils/testing.js                          |    8 +
 19 files changed, 1305 insertions(+), 893 deletions(-)
 create mode 100644 src/components/Home/index.jsx
 create mode 100644 src/components/Layouts/SideMenu.test.jsx
 create mode 100644 src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
 create mode 100644 src/utils/jwt.js
 create mode 100644 src/utils/jwt.test.js
 create mode 100644 src/utils/roles.js
 create mode 100644 src/utils/roles.test.js
 create mode 100644 src/utils/testing.js

diff --git a/src/components/App/App.test.js b/src/components/App/App.test.js
index c816b0d..e9da1e6 100644
--- a/src/components/App/App.test.js
+++ b/src/components/App/App.test.js
@@ -4,9 +4,9 @@ jest.mock("../Contexts/VehicleContext");
 
 import { render, screen, cleanup, waitForElementToBeRemoved } from "@testing-library/react";
 import { setToken } from "../Contexts/UserContext";
+import { TEST_AUTH_OBJECT } from "../../utils/testing"
 import App from ".";
 
-const TEST_TOKEN = { idToken: { jwtToken: "TEST" } };
 const LOADING_STATUS = "Loading...";
 
 const renderRoute = async (route) => {
@@ -37,6 +37,12 @@ describe("App", () => {
     expect(container).toMatchSnapshot();
   });
 
+  it("Route /package-upload unauthenticated", async () => {
+    const container = await renderRoute("/package-upload");
+    expect(container.querySelector("span.MuiButton-label").innerHTML).toEqual("Sign In");
+    expect(container).toMatchSnapshot();
+  });
+
   it("Route /vehicle-add unauthenticated", async () => {
     const container = await renderRoute("/vehicle-add");
     expect(container.querySelector("span.MuiButton-label").innerHTML).toEqual("Sign In");
@@ -44,21 +50,28 @@ describe("App", () => {
   });
 
   it("Route / authenticated", async () => {
-    setToken(TEST_TOKEN);
+    setToken(TEST_AUTH_OBJECT);
     const container = await renderRoute("/");
-    expect(container.querySelector("h1").innerHTML).toEqual("Upload Update Package");
+    expect(container.querySelector("h1").innerHTML).toEqual("Welcome John!");
     expect(container).toMatchSnapshot();
   });
 
   it("Route /home authenticated", async () => {
-    setToken(TEST_TOKEN);
+    setToken(TEST_AUTH_OBJECT);
     const container = await renderRoute("/home");
+    expect(container.querySelector("h1").innerHTML).toEqual("Welcome John!");
+    expect(container).toMatchSnapshot();
+  });
+
+  it("Route /package-upload authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderRoute("/package-upload");
     expect(container.querySelector("h1").innerHTML).toEqual("Upload Update Package");
     expect(container).toMatchSnapshot();
   });
 
   it("Route /vehicle-add authenticated", async () => {
-    setToken(TEST_TOKEN);
+    setToken(TEST_AUTH_OBJECT);
     const container = await renderRoute("/vehicle-add");
     expect(container.querySelector("h1").innerHTML).toEqual("Add Vehicle");
     expect(container).toMatchSnapshot();
@@ -71,7 +84,7 @@ describe("App", () => {
   });
 
   it("Route /page-not-found authenticated", async () => {
-    setToken(TEST_TOKEN);
+    setToken(TEST_AUTH_OBJECT);
     const container = await renderRoute("/page-not-found");
     expect(container.querySelector("h1").innerHTML).toEqual("Page Not Found");
     expect(container).toMatchSnapshot();
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index f2b0a88..687782a 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -6,17 +6,17 @@ exports[`App Route / authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-70"
+      class="makeStyles-root-90"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-71 mui-fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-91 makeStyles-appBarShift-92 mui-fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
           <button
             aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-73 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-93 MuiIconButton-colorInherit MuiIconButton-edgeStart"
             tabindex="0"
             type="button"
           >
@@ -44,7 +44,7 @@ exports[`App Route / authenticated 1`] = `
             Fisker OTA Portal
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-80 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-100 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -60,14 +60,13 @@ exports[`App Route / authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-75"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-95"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-76 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
-          style="visibility: hidden; webkit-transform: translateX(-0px); transform: translateX(-0px);"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-96 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-77"
+            class="makeStyles-drawerHeader-97"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root"
@@ -106,6 +105,28 @@ exports[`App Route / authenticated 1`] = `
                 href="/home"
                 role="button"
                 tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Home
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/package-upload"
+                role="button"
+                tabindex="0"
               >
                 <div
                   class="MuiListItemText-root"
@@ -147,294 +168,22 @@ exports[`App Route / authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-78"
+        class="makeStyles-content-98 makeStyles-contentShift-99"
       >
         <div
-          class="makeStyles-drawerHeader-77"
+          class="makeStyles-drawerHeader-97"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthMd"
         >
           <div
-            data-testid="mocked-vehicleprovider"
+            class="makeStyles-paper-81"
           >
-            <div
-              data-testid="mocked-fileuploadprovider"
+            <h1
+              class="MuiTypography-root MuiTypography-h5"
             >
-              <div
-                class="makeStyles-paper-61"
-              >
-                <h1
-                  class="MuiTypography-root MuiTypography-h5"
-                >
-                  Upload Update Package
-                </h1>
-                <form
-                  action="{onSubmit}"
-                  class="makeStyles-form-63"
-                  novalidate=""
-                >
-                  <div
-                    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-                  >
-                    <label
-                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-                      data-shrink="false"
-                      for="packagename"
-                      id="packagename-label"
-                    >
-                      Package name
-                      <span
-                        aria-hidden="true"
-                        class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                      >
-                         
-                        *
-                      </span>
-                    </label>
-                    <div
-                      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input MuiOutlinedInput-input"
-                        id="packagename"
-                        maxlength="255"
-                        name="packagename"
-                        required=""
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-81 MuiOutlinedInput-notchedOutline"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-83"
-                        >
-                          <span>
-                            Package name
-                             *
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-                  >
-                    <label
-                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-                      data-shrink="false"
-                      for="version"
-                      id="version-label"
-                    >
-                      Version
-                      <span
-                        aria-hidden="true"
-                        class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                      >
-                         
-                        *
-                      </span>
-                    </label>
-                    <div
-                      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input MuiOutlinedInput-input"
-                        id="version"
-                        maxlength="255"
-                        name="version"
-                        required=""
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-81 MuiOutlinedInput-notchedOutline"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-83"
-                        >
-                          <span>
-                            Version
-                             *
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-                  >
-                    <label
-                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
-                      data-shrink="false"
-                      for="description"
-                      id="description-label"
-                    >
-                      Description
-                    </label>
-                    <div
-                      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline MuiOutlinedInput-multiline"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline"
-                        id="description"
-                        maxlength="5120"
-                        name="description"
-                        placeholder="Package description"
-                        rows="4"
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-81 MuiOutlinedInput-notchedOutline"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-83"
-                        >
-                          <span>
-                            Description
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-                  >
-                    <label
-                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
-                      data-shrink="false"
-                      for="releasenotes"
-                      id="releasenotes-label"
-                    >
-                      Release Notes URL
-                    </label>
-                    <div
-                      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input MuiOutlinedInput-input"
-                        id="releasenotes"
-                        maxlength="1024"
-                        name="releasenotes"
-                        placeholder="Release Notes URL"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-81 MuiOutlinedInput-notchedOutline"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-83"
-                        >
-                          <span>
-                            Release Notes URL
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiFormControl-root makeStyles-formControl-65 MuiFormControl-fullWidth"
-                  >
-                    <label
-                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
-                      data-shrink="false"
-                      for="vehicles"
-                    >
-                      Vehicles
-                    </label>
-                    <div
-                      class="MuiInputBase-root MuiInput-root MuiInput-underline makeStyles-menuProps-68 MuiInputBase-formControl MuiInput-formControl"
-                    >
-                      <div
-                        aria-haspopup="listbox"
-                        aria-labelledby="vehicles"
-                        class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiInput-input"
-                        id="vehicles"
-                        role="button"
-                        tabindex="0"
-                      >
-                        <span>
-                          ​
-                        </span>
-                      </div>
-                      <input
-                        aria-hidden="true"
-                        class="MuiSelect-nativeInput"
-                        id="select-multiple-chip"
-                        name="vehicles"
-                        placeholder="Select vehicles"
-                        tabindex="-1"
-                        value=""
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiDropzoneArea-root"
-                    tabindex="0"
-                  >
-                    <input
-                      accept=""
-                      autocomplete="off"
-                      style="display: none;"
-                      tabindex="-1"
-                      type="file"
-                    />
-                    <div
-                      class="MuiDropzoneArea-textContainer"
-                    >
-                      <p
-                        class="MuiTypography-root MuiDropzoneArea-text MuiTypography-h5"
-                      >
-                        Drag and drop a file here or click
-                      </p>
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiDropzoneArea-icon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                  <button
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-64 MuiButton-containedPrimary MuiButton-fullWidth"
-                    tabindex="0"
-                    type="submit"
-                  >
-                    <span
-                      class="MuiButton-label"
-                    >
-                      Submit
-                    </span>
-                    <span
-                      class="MuiTouchRipple-root"
-                    />
-                  </button>
-                </form>
-              </div>
-            </div>
+              Welcome John!
+            </h1>
           </div>
         </main>
       </main>
@@ -506,17 +255,17 @@ exports[`App Route /home authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-94"
+      class="makeStyles-root-110"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-95 mui-fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-111 makeStyles-appBarShift-112 mui-fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
           <button
             aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-97 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-113 MuiIconButton-colorInherit MuiIconButton-edgeStart"
             tabindex="0"
             type="button"
           >
@@ -544,7 +293,7 @@ exports[`App Route /home authenticated 1`] = `
             Fisker OTA Portal
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-104 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-120 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -560,14 +309,13 @@ exports[`App Route /home authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-99"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-115"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-100 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
-          style="visibility: hidden; webkit-transform: translateX(-0px); transform: translateX(-0px);"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-116 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-101"
+            class="makeStyles-drawerHeader-117"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root"
@@ -606,6 +354,28 @@ exports[`App Route /home authenticated 1`] = `
                 href="/home"
                 role="button"
                 tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Home
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/package-upload"
+                role="button"
+                tabindex="0"
               >
                 <div
                   class="MuiListItemText-root"
@@ -647,10 +417,259 @@ exports[`App Route /home authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-102"
+        class="makeStyles-content-118 makeStyles-contentShift-119"
       >
         <div
-          class="makeStyles-drawerHeader-101"
+          class="makeStyles-drawerHeader-117"
+        />
+        <main
+          class="MuiContainer-root MuiContainer-maxWidthMd"
+        >
+          <div
+            class="makeStyles-paper-101"
+          >
+            <h1
+              class="MuiTypography-root MuiTypography-h5"
+            >
+              Welcome John!
+            </h1>
+          </div>
+        </main>
+      </main>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`App Route /home unauthenticated 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <div
+      class="makeStyles-root-30"
+    >
+      <header
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-31 mui-fixed MuiPaper-elevation4"
+      >
+        <div
+          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+        >
+          <h6
+            class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
+          >
+            Fisker OTA Portal
+          </h6>
+        </div>
+      </header>
+      <main
+        class="makeStyles-content-38"
+      >
+        <div
+          class="makeStyles-drawerHeader-37"
+        />
+        <main
+          class="MuiContainer-root MuiContainer-maxWidthMd"
+        >
+          <div
+            class="makeStyles-paper-21"
+            style="justify-content: center;"
+          >
+            <a
+              aria-disabled="false"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-24 MuiButton-containedPrimary"
+              href="https://cognito.com/authorize?redirect=https://example.com/callback"
+              tabindex="0"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                Sign In
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </a>
+          </div>
+        </main>
+      </main>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`App Route /package-upload authenticated 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <div
+      class="makeStyles-root-130"
+    >
+      <header
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-131 makeStyles-appBarShift-132 mui-fixed MuiPaper-elevation4"
+      >
+        <div
+          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+        >
+          <button
+            aria-label="open drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-133 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+          <h6
+            class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
+          >
+            Fisker OTA Portal
+          </h6>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-140 MuiButton-colorInherit"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label"
+            >
+              Sign Out
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </div>
+      </header>
+      <div
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-135"
+      >
+        <div
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-136 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+        >
+          <div
+            class="makeStyles-drawerHeader-137"
+          >
+            <button
+              class="MuiButtonBase-root MuiIconButton-root"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
+                  />
+                </svg>
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+          <hr
+            class="MuiDivider-root"
+          />
+          <ul
+            class="MuiList-root MuiList-padding"
+          >
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/home"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Home
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/package-upload"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Upload Update Package
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/vehicle-add"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Add Vehicles
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <main
+        class="makeStyles-content-138 makeStyles-contentShift-139"
+      >
+        <div
+          class="makeStyles-drawerHeader-137"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthMd"
@@ -662,7 +681,7 @@ exports[`App Route /home authenticated 1`] = `
               data-testid="mocked-fileuploadprovider"
             >
               <div
-                class="makeStyles-paper-85"
+                class="makeStyles-paper-121"
               >
                 <h1
                   class="MuiTypography-root MuiTypography-h5"
@@ -671,7 +690,7 @@ exports[`App Route /home authenticated 1`] = `
                 </h1>
                 <form
                   action="{onSubmit}"
-                  class="makeStyles-form-87"
+                  class="makeStyles-form-123"
                   novalidate=""
                 >
                   <div
@@ -707,10 +726,10 @@ exports[`App Route /home authenticated 1`] = `
                       />
                       <fieldset
                         aria-hidden="true"
-                        class="PrivateNotchedOutline-root-105 MuiOutlinedInput-notchedOutline"
+                        class="PrivateNotchedOutline-root-141 MuiOutlinedInput-notchedOutline"
                       >
                         <legend
-                          class="PrivateNotchedOutline-legendLabelled-107"
+                          class="PrivateNotchedOutline-legendLabelled-143"
                         >
                           <span>
                             Package name
@@ -753,10 +772,10 @@ exports[`App Route /home authenticated 1`] = `
                       />
                       <fieldset
                         aria-hidden="true"
-                        class="PrivateNotchedOutline-root-105 MuiOutlinedInput-notchedOutline"
+                        class="PrivateNotchedOutline-root-141 MuiOutlinedInput-notchedOutline"
                       >
                         <legend
-                          class="PrivateNotchedOutline-legendLabelled-107"
+                          class="PrivateNotchedOutline-legendLabelled-143"
                         >
                           <span>
                             Version
@@ -791,10 +810,10 @@ exports[`App Route /home authenticated 1`] = `
                       />
                       <fieldset
                         aria-hidden="true"
-                        class="PrivateNotchedOutline-root-105 MuiOutlinedInput-notchedOutline"
+                        class="PrivateNotchedOutline-root-141 MuiOutlinedInput-notchedOutline"
                       >
                         <legend
-                          class="PrivateNotchedOutline-legendLabelled-107"
+                          class="PrivateNotchedOutline-legendLabelled-143"
                         >
                           <span>
                             Description
@@ -829,10 +848,10 @@ exports[`App Route /home authenticated 1`] = `
                       />
                       <fieldset
                         aria-hidden="true"
-                        class="PrivateNotchedOutline-root-105 MuiOutlinedInput-notchedOutline"
+                        class="PrivateNotchedOutline-root-141 MuiOutlinedInput-notchedOutline"
                       >
                         <legend
-                          class="PrivateNotchedOutline-legendLabelled-107"
+                          class="PrivateNotchedOutline-legendLabelled-143"
                         >
                           <span>
                             Release Notes URL
@@ -842,7 +861,7 @@ exports[`App Route /home authenticated 1`] = `
                     </div>
                   </div>
                   <div
-                    class="MuiFormControl-root makeStyles-formControl-89 MuiFormControl-fullWidth"
+                    class="MuiFormControl-root makeStyles-formControl-125 MuiFormControl-fullWidth"
                   >
                     <label
                       class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
@@ -852,7 +871,7 @@ exports[`App Route /home authenticated 1`] = `
                       Vehicles
                     </label>
                     <div
-                      class="MuiInputBase-root MuiInput-root MuiInput-underline makeStyles-menuProps-92 MuiInputBase-formControl MuiInput-formControl"
+                      class="MuiInputBase-root MuiInput-root MuiInput-underline makeStyles-menuProps-128 MuiInputBase-formControl MuiInput-formControl"
                     >
                       <div
                         aria-haspopup="listbox"
@@ -919,7 +938,7 @@ exports[`App Route /home authenticated 1`] = `
                     </div>
                   </div>
                   <button
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-88 MuiButton-containedPrimary MuiButton-fullWidth"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-124 MuiButton-containedPrimary MuiButton-fullWidth"
                     tabindex="0"
                     type="submit"
                   >
@@ -943,522 +962,7 @@ exports[`App Route /home authenticated 1`] = `
 </div>
 `;
 
-exports[`App Route /home unauthenticated 1`] = `
-<div>
-  <div
-    data-testid="mocked-userprovider"
-  >
-    <div
-      class="makeStyles-root-30"
-    >
-      <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-31 mui-fixed MuiPaper-elevation4"
-      >
-        <div
-          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
-        >
-          <h6
-            class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
-          >
-            Fisker OTA Portal
-          </h6>
-        </div>
-      </header>
-      <main
-        class="makeStyles-content-38"
-      >
-        <div
-          class="makeStyles-drawerHeader-37"
-        />
-        <main
-          class="MuiContainer-root MuiContainer-maxWidthMd"
-        >
-          <div
-            class="makeStyles-paper-21"
-            style="justify-content: center;"
-          >
-            <a
-              aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-24 MuiButton-containedPrimary"
-              href="https://cognito.com/authorize?redirect=https://example.com/callback"
-              tabindex="0"
-            >
-              <span
-                class="MuiButton-label"
-              >
-                Sign In
-              </span>
-              <span
-                class="MuiTouchRipple-root"
-              />
-            </a>
-          </div>
-        </main>
-      </main>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`App Route /page-not-found authenticated 1`] = `
-<div>
-  <div
-    data-testid="mocked-userprovider"
-  >
-    <div
-      class="makeStyles-root-162"
-    >
-      <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-163 mui-fixed MuiPaper-elevation4"
-      >
-        <div
-          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
-        >
-          <button
-            aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-165 MuiIconButton-colorInherit MuiIconButton-edgeStart"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiIconButton-label"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
-                />
-              </svg>
-            </span>
-            <span
-              class="MuiTouchRipple-root"
-            />
-          </button>
-          <h6
-            class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
-          >
-            Fisker OTA Portal
-          </h6>
-          <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-172 MuiButton-colorInherit"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label"
-            >
-              Sign Out
-            </span>
-            <span
-              class="MuiTouchRipple-root"
-            />
-          </button>
-        </div>
-      </header>
-      <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-167"
-      >
-        <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-168 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
-          style="visibility: hidden; webkit-transform: translateX(-0px); transform: translateX(-0px);"
-        >
-          <div
-            class="makeStyles-drawerHeader-169"
-          >
-            <button
-              class="MuiButtonBase-root MuiIconButton-root"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiIconButton-label"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                  />
-                </svg>
-              </span>
-              <span
-                class="MuiTouchRipple-root"
-              />
-            </button>
-          </div>
-          <hr
-            class="MuiDivider-root"
-          />
-          <ul
-            class="MuiList-root MuiList-padding"
-          >
-            <li>
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                href="/home"
-                role="button"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemText-root"
-                >
-                  <span
-                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                  >
-                    Upload Update Package
-                  </span>
-                </div>
-                <span
-                  class="MuiTouchRipple-root"
-                />
-              </a>
-            </li>
-            <li>
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                href="/vehicle-add"
-                role="button"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemText-root"
-                >
-                  <span
-                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                  >
-                    Add Vehicles
-                  </span>
-                </div>
-                <span
-                  class="MuiTouchRipple-root"
-                />
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <main
-        class="makeStyles-content-170"
-      >
-        <div
-          class="makeStyles-drawerHeader-169"
-        />
-        <main
-          class="MuiContainer-root MuiContainer-maxWidthMd"
-        >
-          <div
-            class="makeStyles-paper-153"
-          >
-            <h1
-              class="MuiTypography-root MuiTypography-h2"
-            >
-              Page Not Found
-            </h1>
-          </div>
-        </main>
-      </main>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`App Route /page-not-found unauthenticated 1`] = `
-<div>
-  <div
-    data-testid="mocked-userprovider"
-  >
-    <div
-      class="makeStyles-root-142"
-    >
-      <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-143 mui-fixed MuiPaper-elevation4"
-      >
-        <div
-          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
-        >
-          <h6
-            class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
-          >
-            Fisker OTA Portal
-          </h6>
-        </div>
-      </header>
-      <main
-        class="makeStyles-content-150"
-      >
-        <div
-          class="makeStyles-drawerHeader-149"
-        />
-        <main
-          class="MuiContainer-root MuiContainer-maxWidthMd"
-        >
-          <div
-            class="makeStyles-paper-133"
-          >
-            <h1
-              class="MuiTypography-root MuiTypography-h2"
-            >
-              Page Not Found
-            </h1>
-          </div>
-        </main>
-      </main>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`App Route /vehicle-add authenticated 1`] = `
-<div>
-  <div
-    data-testid="mocked-userprovider"
-  >
-    <div
-      class="makeStyles-root-118"
-    >
-      <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-119 mui-fixed MuiPaper-elevation4"
-      >
-        <div
-          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
-        >
-          <button
-            aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-121 MuiIconButton-colorInherit MuiIconButton-edgeStart"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiIconButton-label"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
-                />
-              </svg>
-            </span>
-            <span
-              class="MuiTouchRipple-root"
-            />
-          </button>
-          <h6
-            class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
-          >
-            Fisker OTA Portal
-          </h6>
-          <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-128 MuiButton-colorInherit"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label"
-            >
-              Sign Out
-            </span>
-            <span
-              class="MuiTouchRipple-root"
-            />
-          </button>
-        </div>
-      </header>
-      <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-123"
-      >
-        <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-124 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
-          style="visibility: hidden; webkit-transform: translateX(-0px); transform: translateX(-0px);"
-        >
-          <div
-            class="makeStyles-drawerHeader-125"
-          >
-            <button
-              class="MuiButtonBase-root MuiIconButton-root"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiIconButton-label"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                  />
-                </svg>
-              </span>
-              <span
-                class="MuiTouchRipple-root"
-              />
-            </button>
-          </div>
-          <hr
-            class="MuiDivider-root"
-          />
-          <ul
-            class="MuiList-root MuiList-padding"
-          >
-            <li>
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                href="/home"
-                role="button"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemText-root"
-                >
-                  <span
-                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                  >
-                    Upload Update Package
-                  </span>
-                </div>
-                <span
-                  class="MuiTouchRipple-root"
-                />
-              </a>
-            </li>
-            <li>
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                href="/vehicle-add"
-                role="button"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemText-root"
-                >
-                  <span
-                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                  >
-                    Add Vehicles
-                  </span>
-                </div>
-                <span
-                  class="MuiTouchRipple-root"
-                />
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <main
-        class="makeStyles-content-126"
-      >
-        <div
-          class="makeStyles-drawerHeader-125"
-        />
-        <main
-          class="MuiContainer-root MuiContainer-maxWidthMd"
-        >
-          <div
-            data-testid="mocked-vehicleprovider"
-          >
-            <div
-              class="makeStyles-paper-109"
-            >
-              <h1
-                class="MuiTypography-root MuiTypography-h5"
-              >
-                Add Vehicle
-              </h1>
-              <form
-                action="{onSubmit}"
-                class="makeStyles-form-111"
-                novalidate=""
-              >
-                <div
-                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-                >
-                  <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-                    data-shrink="false"
-                    for="vin"
-                    id="vin-label"
-                  >
-                    VIN
-                    <span
-                      aria-hidden="true"
-                      class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                    >
-                       
-                      *
-                    </span>
-                  </label>
-                  <div
-                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input MuiOutlinedInput-input"
-                      id="vin"
-                      maxlength="17"
-                      name="vin"
-                      required=""
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-129 MuiOutlinedInput-notchedOutline"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-131"
-                      >
-                        <span>
-                          VIN
-                           *
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-112 MuiButton-containedPrimary MuiButton-fullWidth"
-                  tabindex="0"
-                  type="submit"
-                >
-                  <span
-                    class="MuiButton-label"
-                  >
-                    Submit
-                  </span>
-                  <span
-                    class="MuiTouchRipple-root"
-                  />
-                </button>
-              </form>
-            </div>
-          </div>
-        </main>
-      </main>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`App Route /vehicle-add unauthenticated 1`] = `
+exports[`App Route /package-upload unauthenticated 1`] = `
 <div>
   <div
     data-testid="mocked-userprovider"
@@ -1514,3 +1018,560 @@ exports[`App Route /vehicle-add unauthenticated 1`] = `
   </div>
 </div>
 `;
+
+exports[`App Route /page-not-found authenticated 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <div
+      class="makeStyles-root-198"
+    >
+      <header
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-199 makeStyles-appBarShift-200 mui-fixed MuiPaper-elevation4"
+      >
+        <div
+          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+        >
+          <button
+            aria-label="open drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-201 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+          <h6
+            class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
+          >
+            Fisker OTA Portal
+          </h6>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-208 MuiButton-colorInherit"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label"
+            >
+              Sign Out
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </div>
+      </header>
+      <div
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-203"
+      >
+        <div
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-204 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+        >
+          <div
+            class="makeStyles-drawerHeader-205"
+          >
+            <button
+              class="MuiButtonBase-root MuiIconButton-root"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
+                  />
+                </svg>
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+          <hr
+            class="MuiDivider-root"
+          />
+          <ul
+            class="MuiList-root MuiList-padding"
+          >
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/home"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Home
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/package-upload"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Upload Update Package
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/vehicle-add"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Add Vehicles
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <main
+        class="makeStyles-content-206 makeStyles-contentShift-207"
+      >
+        <div
+          class="makeStyles-drawerHeader-205"
+        />
+        <main
+          class="MuiContainer-root MuiContainer-maxWidthMd"
+        >
+          <div
+            class="makeStyles-paper-189"
+          >
+            <h1
+              class="MuiTypography-root MuiTypography-h2"
+            >
+              Page Not Found
+            </h1>
+          </div>
+        </main>
+      </main>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`App Route /page-not-found unauthenticated 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <div
+      class="makeStyles-root-178"
+    >
+      <header
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-179 mui-fixed MuiPaper-elevation4"
+      >
+        <div
+          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+        >
+          <h6
+            class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
+          >
+            Fisker OTA Portal
+          </h6>
+        </div>
+      </header>
+      <main
+        class="makeStyles-content-186"
+      >
+        <div
+          class="makeStyles-drawerHeader-185"
+        />
+        <main
+          class="MuiContainer-root MuiContainer-maxWidthMd"
+        >
+          <div
+            class="makeStyles-paper-169"
+          >
+            <h1
+              class="MuiTypography-root MuiTypography-h2"
+            >
+              Page Not Found
+            </h1>
+          </div>
+        </main>
+      </main>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`App Route /vehicle-add authenticated 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <div
+      class="makeStyles-root-154"
+    >
+      <header
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-155 makeStyles-appBarShift-156 mui-fixed MuiPaper-elevation4"
+      >
+        <div
+          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+        >
+          <button
+            aria-label="open drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-157 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+          <h6
+            class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
+          >
+            Fisker OTA Portal
+          </h6>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-164 MuiButton-colorInherit"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label"
+            >
+              Sign Out
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </div>
+      </header>
+      <div
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-159"
+      >
+        <div
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-160 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+        >
+          <div
+            class="makeStyles-drawerHeader-161"
+          >
+            <button
+              class="MuiButtonBase-root MuiIconButton-root"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
+                  />
+                </svg>
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+          <hr
+            class="MuiDivider-root"
+          />
+          <ul
+            class="MuiList-root MuiList-padding"
+          >
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/home"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Home
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/package-upload"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Upload Update Package
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/vehicle-add"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Add Vehicles
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <main
+        class="makeStyles-content-162 makeStyles-contentShift-163"
+      >
+        <div
+          class="makeStyles-drawerHeader-161"
+        />
+        <main
+          class="MuiContainer-root MuiContainer-maxWidthMd"
+        >
+          <div
+            data-testid="mocked-vehicleprovider"
+          >
+            <div
+              class="makeStyles-paper-145"
+            >
+              <h1
+                class="MuiTypography-root MuiTypography-h5"
+              >
+                Add Vehicle
+              </h1>
+              <form
+                action="{onSubmit}"
+                class="makeStyles-form-147"
+                novalidate=""
+              >
+                <div
+                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                >
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                    data-shrink="false"
+                    for="vin"
+                    id="vin-label"
+                  >
+                    VIN
+                    <span
+                      aria-hidden="true"
+                      class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                    >
+                       
+                      *
+                    </span>
+                  </label>
+                  <div
+                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input MuiOutlinedInput-input"
+                      id="vin"
+                      maxlength="17"
+                      name="vin"
+                      required=""
+                      type="text"
+                      value=""
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-165 MuiOutlinedInput-notchedOutline"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legendLabelled-167"
+                      >
+                        <span>
+                          VIN
+                           *
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+                <button
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-148 MuiButton-containedPrimary MuiButton-fullWidth"
+                  tabindex="0"
+                  type="submit"
+                >
+                  <span
+                    class="MuiButton-label"
+                  >
+                    Submit
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </button>
+              </form>
+            </div>
+          </div>
+        </main>
+      </main>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`App Route /vehicle-add unauthenticated 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <div
+      class="makeStyles-root-70"
+    >
+      <header
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-71 mui-fixed MuiPaper-elevation4"
+      >
+        <div
+          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+        >
+          <h6
+            class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
+          >
+            Fisker OTA Portal
+          </h6>
+        </div>
+      </header>
+      <main
+        class="makeStyles-content-78"
+      >
+        <div
+          class="makeStyles-drawerHeader-77"
+        />
+        <main
+          class="MuiContainer-root MuiContainer-maxWidthMd"
+        >
+          <div
+            class="makeStyles-paper-61"
+            style="justify-content: center;"
+          >
+            <a
+              aria-disabled="false"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-64 MuiButton-containedPrimary"
+              href="https://cognito.com/authorize?redirect=https://example.com/callback"
+              tabindex="0"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                Sign In
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </a>
+          </div>
+        </main>
+      </main>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/Contexts/UserContext.jsx b/src/components/Contexts/UserContext.jsx
index aad411f..c867a4a 100644
--- a/src/components/Contexts/UserContext.jsx
+++ b/src/components/Contexts/UserContext.jsx
@@ -1,12 +1,15 @@
 import React, { useContext, useEffect, useState } from "react";
 import auth from "../../services/auth";
 import getTimerWorker from "../../services/timer";
+import { parsePayload } from "../../utils/jwt";
+import { getGroups } from "../../utils/roles";
 
 const UserContext = React.createContext();
 
 export const UserProvider = ({ children }) => {
   const [fetching, setFetching] = useState(false);
   const [token, setToken] = useState(null);
+  const [groups, setGroups] = useState(null);
   const [error, setError] = useState(null);
   let timer;
 
@@ -15,13 +18,7 @@ export const UserProvider = ({ children }) => {
       if (!localStorage) return;
       const t = JSON.parse(localStorage.getItem("token"));
       if (!t) return;
-      if (
-        !t.idToken ||
-        !t.idToken.jwtToken ||
-        !t.idToken.payload ||
-        !t.idToken.payload.exp
-      )
-        throw new Error("Invalid token");
+      if (!t.idToken || !t.idToken.jwtToken) throw new Error("Invalid token");
       setToken(t);
     } catch (e) {
       document.location = signOut();
@@ -45,7 +42,12 @@ export const UserProvider = ({ children }) => {
   };
 
   const startSessionTimer = () => {
-    const duration = 1000 * token.idToken.payload.exp - new Date().getTime();
+    if (!token || !token.idToken || !token.idToken.jwtToken) {
+      throw new Error("No id token");
+    }
+    const payload = parsePayload(token.idToken.jwtToken);
+    if (!payload || !payload.exp) throw new Error("Bad id token payload");
+    const duration = 1000 * payload.exp - new Date().getTime();
     if (!timer) {
       timer = getTimerWorker();
       timer.onMessage(async (e) => {
@@ -71,6 +73,7 @@ export const UserProvider = ({ children }) => {
         if (!t || t.error) throw new Error("Unable to refresh token");
       }
 
+      setGroups(getGroups(idToken));
       startSessionTimer();
     } catch (e) {
       setError(`Verify error. ${e.message}`);
@@ -103,6 +106,7 @@ export const UserProvider = ({ children }) => {
   };
 
   const signOut = () => {
+    setGroups(null);
     setToken(null);
     if (localStorage) {
       localStorage.removeItem("token");
@@ -149,6 +153,7 @@ export const UserProvider = ({ children }) => {
       value={{
         fetching,
         token,
+        groups,
         error,
         setError,
         signIn,
diff --git a/src/components/Contexts/UserContext.test.jsx b/src/components/Contexts/UserContext.test.jsx
index 873face..5646cb0 100644
--- a/src/components/Contexts/UserContext.test.jsx
+++ b/src/components/Contexts/UserContext.test.jsx
@@ -11,15 +11,7 @@ import {
 import { UserProvider, useUserContext } from "../Contexts/UserContext";
 import auth from "../../services/auth";
 import getTimerWorker from "../../services/timer";
-
-const TEST_TOKEN = {
-  idToken: {
-    jwtToken: "TEST",
-    payload: {
-      exp: new Date().getTime() / 1000,
-    },
-  },
-};
+import { TEST_AUTH_OBJECT, TEST_EXPECTED_GROUPS } from "../../utils/testing";
 
 const INVALID_TOKEN_RESPONSE = {
   error: "Bad Request Error",
@@ -36,10 +28,11 @@ const setupSignInEnv = (refreshResponse, valid) => {
   auth.setVerifyResponse({ valid });
 };
 
-const checkBaseResults = (error, fetching, token) => {
+const checkBaseResults = (error, fetching, token, groups) => {
   expect(screen.getByTestId("error").innerHTML).toEqual(error);
   expect(screen.getByTestId("fetching").innerHTML).toEqual(fetching);
   expect(screen.getByTestId("token").innerHTML).toEqual(token);
+  expect(screen.getByTestId("groups").innerHTML).toEqual(groups);
 };
 
 const checkTokenResults = (timer, token) => {
@@ -57,13 +50,14 @@ describe("UseContext", () => {
   describe("Signin", () => {
     beforeEach(() => {
       const TestComp = () => {
-        const { signIn, error, token, fetching } = useUserContext();
+        const { signIn, error, token, groups, fetching } = useUserContext();
 
         return (
           <>
             <div data-testid="error">{error}</div>
             <div data-testid="fetching">{fetching.toString()}</div>
             <div data-testid="token">{JSON.stringify(token)}</div>
+            <div data-testid="groups">{groups}</div>
             <button data-testid="signInNoCode" onClick={() => signIn("")} />
             <button
               data-testid="signInInvalidCode"
@@ -85,13 +79,13 @@ describe("UseContext", () => {
     });
 
     it("Initial state", () => {
-      checkBaseResults("", "false", "null");
+      checkBaseResults("", "false", "null", "");
     });
 
     it("No auth code", () => {
       fireEvent.click(screen.getByTestId("signInNoCode"));
 
-      checkBaseResults("", "false", "null");
+      checkBaseResults("", "false", "null", "");
     });
 
     it("Invalid auth code", async () => {
@@ -103,14 +97,19 @@ describe("UseContext", () => {
         expect(screen.getByTestId("fetching").innerHTML).toEqual("true")
       );
 
-      checkBaseResults("Sign in error. Bad Request Message", "false", "null");
+      checkBaseResults(
+        "Sign in error. Bad Request Message",
+        "false",
+        "null",
+        ""
+      );
     });
 
     it("Sign in form", async () => {
-      const TOKEN_STRING = JSON.stringify(TEST_TOKEN);
+      const TOKEN_STRING = JSON.stringify(TEST_AUTH_OBJECT);
       const timer = getTimerWorker();
 
-      setupSignInEnv(TEST_TOKEN, true);
+      setupSignInEnv(TEST_AUTH_OBJECT, true);
 
       fireEvent.click(screen.getByTestId("signIn"));
 
@@ -118,7 +117,7 @@ describe("UseContext", () => {
         expect(screen.getByTestId("fetching").innerHTML).toEqual("true")
       );
 
-      checkBaseResults("", "false", TOKEN_STRING);
+      checkBaseResults("", "false", TOKEN_STRING, TEST_EXPECTED_GROUPS);
       checkTokenResults(timer, TOKEN_STRING);
     });
   });
@@ -126,12 +125,20 @@ describe("UseContext", () => {
   describe("Signout", () => {
     beforeEach(async () => {
       const TestComp = () => {
-        const { signIn, signOut, error, token, fetching } = useUserContext();
+        const {
+          signIn,
+          signOut,
+          error,
+          token,
+          groups,
+          fetching,
+        } = useUserContext();
         return (
           <>
             <div data-testid="error">{error}</div>
             <div data-testid="fetching">{fetching.toString()}</div>
             <div data-testid="token">{JSON.stringify(token)}</div>
+            <div data-testid="groups">{groups}</div>
             <button data-testid="signIn" onClick={() => signIn("TEST_CODE")} />
             <button data-testid="signOut" onClick={() => signOut()} />
           </>
@@ -142,7 +149,7 @@ describe("UseContext", () => {
           <TestComp />
         </UserProvider>
       );
-      auth.setSignInResponse(TEST_TOKEN);
+      auth.setSignInResponse(TEST_AUTH_OBJECT);
       fireEvent.click(screen.getByTestId("signIn"));
       await waitFor(() =>
         expect(screen.getByTestId("fetching").innerHTML).toEqual("true")
@@ -154,10 +161,9 @@ describe("UseContext", () => {
       cleanup();
     });
 
-    it("Token cleared", () => {
+    it("Token cleared", async () => {
       fireEvent.click(screen.getByTestId("signOut"));
-
-      checkBaseResults("", "false", "null");
+      checkBaseResults("", "false", "null", "");
       if (!localStorage) return;
       expect(localStorage.getItem("token")).toBeNull();
     });
@@ -166,13 +172,14 @@ describe("UseContext", () => {
   describe("Refresh", () => {
     beforeEach(() => {
       const TestComp = () => {
-        const { refresh, error, token, fetching } = useUserContext();
+        const { refresh, error, token, groups, fetching } = useUserContext();
 
         return (
           <>
             <div data-testid="error">{error}</div>
             <div data-testid="fetching">{fetching.toString()}</div>
             <div data-testid="token">{JSON.stringify(token)}</div>
+            <div data-testid="groups">{groups}</div>
             <button data-testid="refreshNoToken" onClick={() => refresh("")} />
             <button
               data-testid="refreshInvalidToken"
@@ -197,12 +204,12 @@ describe("UseContext", () => {
     });
 
     it("Initial state", () => {
-      checkBaseResults("", "false", "null");
+      checkBaseResults("", "false", "null", "");
     });
 
     it("No refresh token", () => {
       fireEvent.click(screen.getByTestId("refreshNoToken"));
-      checkBaseResults("Refresh error. Token required", "false", "null");
+      checkBaseResults("Refresh error. Token required", "false", "null", "");
     });
 
     it("Invalid refresh token", async () => {
@@ -213,21 +220,26 @@ describe("UseContext", () => {
         expect(screen.getByTestId("fetching").innerHTML).toEqual("true")
       );
 
-      checkBaseResults("Refresh error. Bad Request Message", "false", "null");
+      checkBaseResults(
+        "Refresh error. Bad Request Message",
+        "false",
+        "null",
+        ""
+      );
     });
 
     it("Valid refresh token", async () => {
-      const TOKEN_STRING = JSON.stringify(TEST_TOKEN);
+      const TOKEN_STRING = JSON.stringify(TEST_AUTH_OBJECT);
       const timer = getTimerWorker();
 
-      setupRefreshEnv(TEST_TOKEN, true);
+      setupRefreshEnv(TEST_AUTH_OBJECT, true);
 
       fireEvent.click(screen.getByTestId("refreshValidToken"));
       await waitFor(() =>
         expect(screen.getByTestId("fetching").innerHTML).toEqual("true")
       );
 
-      checkBaseResults("", "false", TOKEN_STRING);
+      checkBaseResults("", "false", TOKEN_STRING, TEST_EXPECTED_GROUPS);
       checkTokenResults(timer, TOKEN_STRING);
     });
   });
diff --git a/src/components/Contexts/__mocks__/UserContext.jsx b/src/components/Contexts/__mocks__/UserContext.jsx
index 5e781ba..adb9c42 100644
--- a/src/components/Contexts/__mocks__/UserContext.jsx
+++ b/src/components/Contexts/__mocks__/UserContext.jsx
@@ -1,11 +1,16 @@
 import React from "react";
 
+import { getGroups } from "../../../utils/roles";
+
 let token = null;
+let groups = null;
 let fetching = false;
 let error = null;
 let signInResp = {};
-let authorizeURL = "https://cognito.com/authorize?redirect=https://example.com/callback";
-let logoutURL = "https://cognito.com/logout?redirect=https://example.com/callback";
+let authorizeURL =
+  "https://cognito.com/authorize?redirect=https://example.com/callback";
+let logoutURL =
+  "https://cognito.com/logout?redirect=https://example.com/callback";
 
 export const UserProvider = ({ children }) => {
   return <div data-testid="mocked-userprovider">{children}</div>;
@@ -15,6 +20,7 @@ export const useUserContext = () => ({
   token,
   fetching,
   error,
+  groups,
   signIn: jest.fn(() => signInResp),
   signOut: jest.fn(),
   getAuthorizeURL: jest.fn(() => authorizeURL),
@@ -26,6 +32,11 @@ export const useUserContext = () => ({
 
 export const setToken = (val) => {
   token = val;
+  if (!val || !val.idToken || !val.idToken.jwtToken) {
+    groups = null;
+  } else {
+    groups = getGroups(val.idToken.jwtToken);
+  }
 };
 
 export const setFetching = (val) => {
diff --git a/src/components/FileUploadForm/FileUploadForm.test.js b/src/components/FileUploadForm/FileUploadForm.test.js
index 2d06c30..34aa8b3 100644
--- a/src/components/FileUploadForm/FileUploadForm.test.js
+++ b/src/components/FileUploadForm/FileUploadForm.test.js
@@ -7,10 +7,11 @@ import { render, cleanup, waitFor } from "@testing-library/react";
 import FileUploadForm from "./index";
 import { setToken } from "../Contexts/UserContext";
 import { StatusProvider } from "../Contexts/StatusContext";
+import { TEST_AUTH_OBJECT } from "../../utils/testing"
 
 describe("File Upload Form", () => {
   it("Should render", async () => {
-    setToken({ idToken: { jwtToken: "TEST" } });
+    setToken(TEST_AUTH_OBJECT);
     const { container } = render(<StatusProvider><BrowserRouter><FileUploadForm /></BrowserRouter></StatusProvider>);
     await waitFor(() => {});
     expect(container).toMatchSnapshot();
diff --git a/src/components/FileUploadForm/index.jsx b/src/components/FileUploadForm/index.jsx
index fd64926..69e6ecf 100644
--- a/src/components/FileUploadForm/index.jsx
+++ b/src/components/FileUploadForm/index.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import {
   Button,
   Chip,
@@ -86,19 +86,17 @@ const MainForm = () => {
     }
   };
 
-  useEffect(() => {
+  const handleCarOpen = async () => {
     const {
       idToken: { jwtToken: authToken },
     } = token;
-    (async () => {
-      try {
-        await getVehicles(null, authToken);
-      } catch (e) {
-        setMessage(e.message);
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+
+    try {
+      await getVehicles(null, authToken);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
 
   return (
     <div className={classes.paper}>
@@ -173,6 +171,7 @@ const MainForm = () => {
             name="vehicles"
             multiple
             className={classes.menuProps}
+            onOpen={handleCarOpen}
             onChange={handleVehiclesChange}
             value={selectedVehicles}
             input={<Input id="select-multiple-chip" />}
diff --git a/src/components/Home/index.jsx b/src/components/Home/index.jsx
new file mode 100644
index 0000000..1bec005
--- /dev/null
+++ b/src/components/Home/index.jsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { Typography } from "@material-ui/core";
+import useStyles from "../useStyles";
+
+import { useUserContext } from "../Contexts/UserContext";
+import { parsePayload } from "../../utils/jwt";
+
+const DEFAULT_GREETING = "Welcome";
+
+const getGreeting = (token) => {
+  if (!token || !token.idToken || !token.idToken.jwtToken)
+    return DEFAULT_GREETING;
+
+  const payload = parsePayload(token.idToken.jwtToken);
+
+  if (!payload || !payload.given_name) return DEFAULT_GREETING;
+
+  return `Welcome ${payload.given_name}!`;
+};
+
+const Home = () => {
+  const classes = useStyles();
+  const { token } = useUserContext();
+  const greeting = getGreeting(token);
+
+  return (
+    <div className={classes.paper}>
+      <Typography component="h1" variant="h5">
+        {greeting}
+      </Typography>
+    </div>
+  );
+};
+
+export default Home;
diff --git a/src/components/Layouts/MenuDrawer.jsx b/src/components/Layouts/MenuDrawer.jsx
index 0b402be..bbaea85 100644
--- a/src/components/Layouts/MenuDrawer.jsx
+++ b/src/components/Layouts/MenuDrawer.jsx
@@ -20,7 +20,7 @@ export default function MenuDrawer({ children }) {
   const classes = useStyles();
   const theme = useTheme();
   const { signOut, token } = useUserContext();
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = React.useState(true);
 
   const handleDrawerOpen = () => {
     setOpen(true);
diff --git a/src/components/Layouts/SideMenu.jsx b/src/components/Layouts/SideMenu.jsx
index 53338a3..5d7c739 100644
--- a/src/components/Layouts/SideMenu.jsx
+++ b/src/components/Layouts/SideMenu.jsx
@@ -1,16 +1,40 @@
 import React from "react";
 import { List } from "@material-ui/core";
 import ListItemLink from "../ListItemLink";
+import { useUserContext } from "../Contexts/UserContext";
+import { Roles, hasRole } from "../../utils/roles";
+
+const menuData = [
+  {
+    label: "Home",
+    to: "/home",
+    roles: [],
+  },
+  {
+    label: "Upload Update Package",
+    to: "/package-upload",
+    roles: [Roles.CREATE],
+  },
+  {
+    label: "Add Vehicles",
+    to: "/vehicle-add",
+    roles: [Roles.CREATE],
+  },
+];
 
 export default function SideMenu() {
-  const menuData = [
-    { label: "Upload Update Package", to: "/home" },
-    { label: "Add Vehicles", to: "/vehicle-add" },
-  ];
+  const { groups } = useUserContext();
+  const menu = menuData.reduce((result, item) => {
+    if (hasRole(item.roles, groups)) {
+      result.push(item);
+    }
+
+    return result;
+  }, []);
 
   return (
     <List>
-      {menuData.map((item, index) => (
+      {menu.map((item, index) => (
         <ListItemLink key={index} primary={item.label} to={item.to} />
       ))}
     </List>
diff --git a/src/components/Layouts/SideMenu.test.jsx b/src/components/Layouts/SideMenu.test.jsx
new file mode 100644
index 0000000..e1cc36d
--- /dev/null
+++ b/src/components/Layouts/SideMenu.test.jsx
@@ -0,0 +1,33 @@
+jest.mock("../Contexts/UserContext");
+
+import { render, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { UserProvider, setToken } from "../Contexts/UserContext";
+import { TEST_AUTH_OBJECT } from "../../utils/testing";
+import SideMenu from "./SideMenu";
+
+const renderMenu = async () => {
+  const { container } = render(
+    <UserProvider>
+      <BrowserRouter>
+        <SideMenu />
+      </BrowserRouter>
+    </UserProvider>
+  );
+  await waitFor(() => {});
+  return container;
+};
+
+describe("SideMenu", () => {
+  it("Unauthenticated", async () => {
+    setToken(null);
+    const container = await renderMenu(null);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("Authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderMenu(TEST_AUTH_OBJECT);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap b/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
new file mode 100644
index 0000000..4ae219a
--- /dev/null
+++ b/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SideMenu Authenticated 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <ul
+      class="MuiList-root MuiList-padding"
+    >
+      <li>
+        <a
+          aria-disabled="false"
+          class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+          href="/home"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="MuiListItemText-root"
+          >
+            <span
+              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+            >
+              Home
+            </span>
+          </div>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </a>
+      </li>
+      <li>
+        <a
+          aria-disabled="false"
+          class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+          href="/package-upload"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="MuiListItemText-root"
+          >
+            <span
+              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+            >
+              Upload Update Package
+            </span>
+          </div>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </a>
+      </li>
+      <li>
+        <a
+          aria-disabled="false"
+          class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+          href="/vehicle-add"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="MuiListItemText-root"
+          >
+            <span
+              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+            >
+              Add Vehicles
+            </span>
+          </div>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`SideMenu Unauthenticated 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <ul
+      class="MuiList-root MuiList-padding"
+    >
+      <li>
+        <a
+          aria-disabled="false"
+          class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+          href="/home"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="MuiListItemText-root"
+          >
+            <span
+              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+            >
+              Home
+            </span>
+          </div>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
diff --git a/src/components/Routes/AuthRoute.jsx b/src/components/Routes/AuthRoute.jsx
index ed530cb..f3e02d3 100644
--- a/src/components/Routes/AuthRoute.jsx
+++ b/src/components/Routes/AuthRoute.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Redirect, Route } from "react-router-dom";
+import { hasRole } from "../../utils/roles";
 
 export const TYPES = {
   PUBLIC: 0,
@@ -7,11 +8,19 @@ export const TYPES = {
   PROTECTED: 2,
 };
 
-export const AuthRoute = ({ token, type, ...others }) => {
-  if (!token && type === TYPES.PROTECTED) {
+export const AuthRoute = ({ token, type, roles, groups, ...others }) => {
+  if (type === TYPES.PROTECTED && !token) {
     return <Redirect to="/" />;
-  } else if (token && type === TYPES.GUEST) {
+  } else if (type === TYPES.GUEST && token) {
+    return <Redirect to="/home" />;
+  } else if (
+    type === TYPES.PROTECTED &&
+    token &&
+    roles &&
+    !hasRole(roles, groups)
+  ) {
     return <Redirect to="/home" />;
   }
+
   return <Route render {...others} />;
 };
diff --git a/src/components/Routes/SiteRoutes.jsx b/src/components/Routes/SiteRoutes.jsx
index de80a44..7f43b66 100644
--- a/src/components/Routes/SiteRoutes.jsx
+++ b/src/components/Routes/SiteRoutes.jsx
@@ -4,14 +4,16 @@ import { Switch } from "react-router-dom";
 import { AuthRoute, TYPES } from "../Routes/AuthRoute";
 import { MessageBar } from "../MessageBar";
 import { useUserContext } from "../Contexts/UserContext";
+import { Roles } from "../../utils/roles";
 
 const SSOForm = React.lazy(() => import("../SSOForm"));
+const Home = React.lazy(() => import("../Home"));
 const FileUploadForm = React.lazy(() => import("../FileUploadForm"));
 const VehicleAddForm = React.lazy(() => import("../VehicleAddForm"));
 const PageNotFound = React.lazy(() => import("../404"));
 
 const SiteRoutes = () => {
-  const { token } = useUserContext();
+  const { token, groups } = useUserContext();
   return (
     <Suspense fallback={"Loading..."}>
       <MessageBar />
@@ -25,15 +27,25 @@ const SiteRoutes = () => {
         />
         <AuthRoute
           path="/home"
+          render={() => <Home />}
+          type={TYPES.PROTECTED}
+          token={token}
+        />
+        <AuthRoute
+          path="/package-upload"
           render={() => <FileUploadForm />}
           type={TYPES.PROTECTED}
           token={token}
+          groups={groups}
+          roles={[Roles.CREATE]}
         />
         <AuthRoute
           path="/vehicle-add"
           render={() => <VehicleAddForm />}
           type={TYPES.PROTECTED}
           token={token}
+          groups={groups}
+          roles={[Roles.CREATE]}
         />
         <PageNotFound />
       </Switch>
diff --git a/src/utils/jwt.js b/src/utils/jwt.js
new file mode 100644
index 0000000..9ff1297
--- /dev/null
+++ b/src/utils/jwt.js
@@ -0,0 +1,14 @@
+export const parsePayload = (token) => {
+  if (!token) return null;
+  const parts = token.split(".");
+  if (parts.length < 2) return null;
+  return JSON.parse(decode(parts[1]));
+};
+
+export const decode = (payload) => {
+  const l = (payload.length % 4);
+  if (l > 0) {
+    payload += "=".repeat(4 - l);
+  }
+  return atob(payload);
+};
diff --git a/src/utils/jwt.test.js b/src/utils/jwt.test.js
new file mode 100644
index 0000000..f033872
--- /dev/null
+++ b/src/utils/jwt.test.js
@@ -0,0 +1,15 @@
+import { parsePayload } from "./jwt";
+import { TEST_TOKEN } from "./testing";
+
+describe("JWT Helper", () => {
+  it("Should decode", () => {
+    const start = Date.now()
+    const v = parsePayload(TEST_TOKEN);
+    const diff = Date.now() - start;
+    
+    expect(diff < 2).toBeTruthy();
+    expect(typeof v).toEqual("object");
+    expect(v.exp).toBeTruthy();
+  });
+});
+
diff --git a/src/utils/roles.js b/src/utils/roles.js
new file mode 100644
index 0000000..cc76d40
--- /dev/null
+++ b/src/utils/roles.js
@@ -0,0 +1,35 @@
+import { parsePayload } from "./jwt";
+
+export const Roles = {
+  CREATE: "efcc3025-e2d8-4212-8227-805c7be39d2c",
+  READ: "a729bbd4-2038-4649-9127-16782bb1e701",
+}
+
+export const hasRoleToken = (roles, token) => {
+  if (!roles || roles.length === 0) return true;
+  
+  const groups = getGroups(token);
+
+  if (!groups) return false;
+  
+  return hasRole(roles, groups);
+}
+
+export const getGroups = (token) => {
+  const payload = parsePayload(token);
+
+  if (!payload || !payload["custom:groups"]) return null;
+
+  return payload["custom:groups"];
+}
+
+export const hasRole = (roles, groups) => {
+  if (!roles || roles.length === 0) return true;
+  if (!groups) return false;
+  
+  for (let role of roles) {
+    if (groups.indexOf(role) > -1) return true;
+  }
+
+  return false;
+}
diff --git a/src/utils/roles.test.js b/src/utils/roles.test.js
new file mode 100644
index 0000000..8d73178
--- /dev/null
+++ b/src/utils/roles.test.js
@@ -0,0 +1,10 @@
+
+import { hasRoleToken, Roles } from "./roles";
+import { TEST_TOKEN } from "./testing";
+
+describe("Roles Helper", () => {
+  it("Check roles", () => {
+    expect(hasRoleToken([Roles.CREATE], TEST_TOKEN)).toEqual(true);
+    expect(hasRoleToken([Roles.READ], TEST_TOKEN)).toEqual(false);
+  })
+});
diff --git a/src/utils/testing.js b/src/utils/testing.js
new file mode 100644
index 0000000..b4169af
--- /dev/null
+++ b/src/utils/testing.js
@@ -0,0 +1,8 @@
+export const TEST_TOKEN = "eyJraWQiOiJlUTNuZFJLaUVcL084VUZ5RHFsYjN0S1RzWG00SzVPMlc4NXd3VWkzT2tNZz0iLCJhbGciOiJSUzI1NiJ9.eyJhdF9oYXNoIjoiOUlyV2RLaUxJU0FZUnFha1F2b2xmZyIsInN1YiI6IjJiMDk1NTY2LTllNDYtNGQ4ZS1iMTA5LTI0MTM1ZGYyMmVlNiIsImNvZ25pdG86Z3JvdXBzIjpbInVzLXdlc3QtMl9BV3dqTFh5bTJfQXp1cmVBRCJdLCJlbWFpbF92ZXJpZmllZCI6ZmFsc2UsImlzcyI6Imh0dHBzOlwvXC9jb2duaXRvLWlkcC51cy13ZXN0LTIuYW1hem9uYXdzLmNvbVwvdXMtd2VzdC0yX0FXd2pMWHltMiIsImNvZ25pdG86dXNlcm5hbWUiOiJhenVyZWFkX2p3dUBmaXNrZXJpbmMuY29tIiwiZ2l2ZW5fbmFtZSI6IkpvaG4iLCJjdXN0b206Z3JvdXBzIjoiWzhkODI3OGE1LTljMGUtNGM3Zi05MThhLTgxMWZkMWQyMzZlNCwgNmMzY2Y5OGQtMGFkYS00OGM2LWFlOTQtYjE3MWNmYTI3NWZjLCA1NmVmNGJlYy1kNzM5LTRkZGYtYTAwMy1lY2M4MTMwODViOGQsIGVmY2MzMDI1LWUyZDgtNDIxMi04MjI3LTgwNWM3YmUzOWQyYywgNTUxNWE5OGYtNDY2OC00MTIxLThlOGQtZmVlMjgyNTY5OWNmLCA4Njk1NmEyZi04ZDQ2LTQ3ZmYtOWIyOS1mOTkwNzlhZTNjMWQsIGM0ZDQzNjFjLTg4ODItNDdiNC04NjQxLWZkM2FiNjhhZTcyMiwgN2JjZGNkYjItMzI3OS00NGJmLWE5OTgtNzcxYmFiNGIzM2UxXSIsImF1ZCI6IjdjazJ0Zm9xYXZjNzJjNDVoaDd0Z2U0MmtkIiwiY3VzdG9tOnNlc3Npb24tZHVyYXRpb24iOiI5MDAiLCJpZGVudGl0aWVzIjpbeyJ1c2VySWQiOiJqd3VAZmlza2VyaW5jLmNvbSIsInByb3ZpZGVyTmFtZSI6IkF6dXJlQUQiLCJwcm92aWRlclR5cGUiOiJTQU1MIiwiaXNzdWVyIjoiaHR0cHM6XC9cL3N0cy53aW5kb3dzLm5ldFwvNWFhNGI2NDAtYzlmYy00YTliLWIzYTMtZDRhN2QwMDhmYjVlXC8iLCJwcmltYXJ5IjoidHJ1ZSIsImRhdGVDcmVhdGVkIjoiMTYxNDM2NDk3NDU4NSJ9XSwidG9rZW5fdXNlIjoiaWQiLCJhdXRoX3RpbWUiOjE2MTU4MjEzMDksImV4cCI6MTYxNTkyNzM0OSwiaWF0IjoxNjE1OTIzNzUwLCJmYW1pbHlfbmFtZSI6Ild1IiwiZW1haWwiOiJqd3VAZmlza2VyaW5jLmNvbSJ9.R3k-YGK0MrUdW030Xj2WxM7mdsm1tlobeDq3YRMIKMtdkJsf5qjwM_wqVPbErH-8OrFLW7YIPuMo2Rh5PCGvg4I6kL-tWfDOY4o5b5r_VdiifXov0be_ukdt5pZblhgg0dYSLmFaFZsxNjEng8-obl_FnWp6VtG1lnRGwORY3pFe88W7OM3zLMC0g-otfAEQ2KSOaV9bfUoRAaZaGlHe8ooIQx8Qoer9qYsnymK0Sk7jSZKwhtFsziSarhreHmBkCLaWBHDjc9PQDtBvO8wg1KMKmM-6oewA0xTKPtsuHxnvtVANYaR7Nqp9cbF940YRf2IK5FB7KWFtcR7Y6igLXw";
+export const TEST_AUTH_OBJECT = {
+  idToken: {
+    jwtToken: TEST_TOKEN,
+  },
+};
+export const TEST_EXPECTED_GROUPS =
+  "[8d8278a5-9c0e-4c7f-918a-811fd1d236e4, 6c3cf98d-0ada-48c6-ae94-b171cfa275fc, 56ef4bec-d739-4ddf-a003-ecc813085b8d, efcc3025-e2d8-4212-8227-805c7be39d2c, 5515a98f-4668-4121-8e8d-fee2825699cf, 86956a2f-8d46-47ff-9b29-f99079ae3c1d, c4d4361c-8882-47b4-8641-fd3ab68ae722, 7bcdcdb2-3279-44bf-a998-771bab4b33e1]";