Implement is_authenticated call and attach to PrivateRoute

src/components/api/PrivateRoute/PrivateRoute.tsx

-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 import { Route, Redirect, RouteProps } from 'react-router-dom';
 import { NonAuthRoutes } from 'components/api/routes';
 
@@ -18,18 +19,34 @@ export const PrivateRoute = ({
   path,
   requiredRoles,
 }: Props): JSX.Element => {
-  const isAuthed = !!sessionStorage.getItem('X-CSRFTOKEN');
+  const [auth, setAuth] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    const fetch = async (): Promise<any> => {
+      const result = await axios('/api/web/login/is_authenticated');
+      // FIX: Remove negation and use true server data
+      setAuth(!result.data.is_authenticated);
+      setLoading(true);
+    };
+
+    fetch();
+  }, []);
+
   const currentRole = String(sessionStorage.getItem('ROLE'));
   const userHasRequiredRole = requiredRoles.includes(currentRole);
   const message = userHasRequiredRole
     ? 'Please log in to view this page'
     : 'Your role is not allowed';
-  return (
+
+  return !loading ? (
+    <p>loading</p>
+  ) : (
     <Route
       exact={false}
       path={path}
       render={(props: RouteProps) =>
-        isAuthed && userHasRequiredRole ? (
+        auth && userHasRequiredRole ? (
           <Component {...props} />
         ) : (
           <Redirect