Merge branch 'fix/authorization' into 'dev'

Fix/authorization

See merge request !51

src/api/fetchCookie.ts

 import axios from 'axios';
 
 /**
+ * @async
  * Call for csrf cookie. This cookie is the user session identifier and
  * must be sent during the login process.
- * @returns csrf cookie
+ * @returns {string} csrf cookie
  */
 export const fetchCookie = async (): Promise<string> =>
   axios('/api/web/csrf').then((res) => res.data.token);

src/api/getRole.ts

 import axios from 'axios';
 
 /**
+ * @async
  * Asks for the current set role.
- * @returns empty if the role is not set or a name between those defined
+ * @returns {string} empty if the role is not set or a name between those defined
  * in {@see userRoles}
  */
 export const getRole = async (): Promise<string> =>

src/api/getRoles.ts

 import axios from 'axios';
 
 /**
+ * @async
  * Ask the server all the roles of an user if the user has multiple roles.
- * @returns array of roles.
+ * @returns {string[]} array of roles.
  */
 export const getRoles = async (): Promise<string[]> =>
   axios('/api/web/login/get_roles').then((res) => res.data.roles);

src/api/isAuthenticated.ts

 import axios from 'axios';
 
 /**
+ * @async
  * Ask the server if the user is authenticated.
- * @returns true or false if the user is authenticated.
+ * @returns {boolean} true or false if the user is authenticated.
  */
 export const isAuthenticated = async (): Promise<boolean> =>
   axios('/api/web/login/is_authenticated').then(

src/api/setRole.ts

 import axios from 'axios';
 
 /**
+ * @async
  * Set the role of the user in the database.
+ * @return {string} role
  */
 export const setRole = async (role: string): Promise<void> =>
   axios.post('/api/web/login/set_role', { role });

src/components/AuthUser/AuthContext.tsx

@@ -3,9 +3,9 @@ import { createContext } from 'react';
 
 export type AuthData = {
   role: string;
-  isAuth: boolean;
+  isAuth: boolean | null;
   setRole: (role: string) => void;
-  setIsAuth: (state: boolean) => void;
+  setIsAuth: (state: boolean | null) => void;
 };
 
 export const AuthContext = createContext<AuthData>({

src/components/Authorization/Authorization.tsx

@@ -6,6 +6,7 @@ import { Unauthorized } from 'components/NonAuthUser/Unauthorized/Unauthorized';
 import { useAuth } from 'hooks/useAuth';
 import { useRole } from 'hooks/useRole';
 import { Redirect } from 'react-router-dom';
+import { CircularProgressClassKey } from '@material-ui/core';
 
 const HandleIsAuth: FC<{ isAuth: boolean }> = ({ isAuth }) =>
   isAuth ? (
@@ -41,14 +42,16 @@ export const withAuthorization = <T extends WithAuthProps = WithAuthProps>(
     const { allowedRoles } = props as T;
 
     const { role, isAuth } = useContext(AuthContext);
-
     console.log(`ROLE ${role} AUTH ${isAuth}`);
 
-    // props comes afterwards so the can override the default ones.
-    return allowedRoles.includes(role) && isAuth ? (
+    /* eslint-disable no-nested-ternary */
+    return typeof isAuth === null || role === null ? (
+      <BlurCircular />
+    ) : // props comes afterwards so the can override the default ones.
+    allowedRoles.includes(role) && isAuth ? (
       <WrappedComponent {...(props as T)} />
     ) : (
-      <HandleIsAuth isAuth={isAuth} />
+      <HandleIsAuth isAuth={!!isAuth} />
     );
   };
 

src/hooks/useAuth.ts

@@ -8,11 +8,11 @@ import { useEffect, useState } from 'react';
  * @returns {boolean | null} isAuth: true if user is authenticated, false otherwise or null if the request has not finished.
  */
 export const useAuth = (): [
-  boolean,
-  React.Dispatch<React.SetStateAction<boolean>>,
+  boolean | null,
+  React.Dispatch<React.SetStateAction<boolean | null>>,
 ] => {
   let isMounted = true;
-  const [isAuth, setIsAuth] = useState<boolean>(false);
+  const [isAuth, setIsAuth] = useState<boolean | null>(null);
   useEffect(() => {
     isAuthenticated().then((state) => {
       if (isMounted) {