Replace localstorage with data from AuthContext.

src/api/PrivateRoute/PrivateRoute.tsx

-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import axios from 'axios';
 import { Route, Redirect, RouteProps } from 'react-router-dom';
 import { NonAuthRoutes } from 'api/routes';
+import { AuthContext } from 'components/AuthUser/AuthContext';
 
 /**
  * A wrapper for <Route> that redirects to the login screen if you're not yet authenticated.
@@ -21,6 +22,7 @@ export const PrivateRoute = ({
 }: Props): JSX.Element => {
   const [auth, setAuth] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
+  const { role } = useContext(AuthContext);
 
   useEffect(() => {
     const fetch = async (): Promise<unknown> => {
@@ -32,8 +34,7 @@ export const PrivateRoute = ({
     fetch();
   }, []);
 
-  const currentRole = String(sessionStorage.getItem('ROLE'));
-  const userHasRequiredRole = requiredRoles.includes(currentRole);
+  const userHasRequiredRole = requiredRoles.includes(role);
   const message = userHasRequiredRole
     ? 'Please log in to view this page'
     : 'Your role is not allowed';