diff --git a/src/api/fetchCookie.ts b/src/api/fetchCookie.ts
index d531ad2c1a0ae6fd2074300c38dfcc951c8f87f1..de99b415d2982d9630153ea1306035fd0b7937fc 100644
--- a/src/api/fetchCookie.ts
+++ b/src/api/fetchCookie.ts
@@ -1,9 +1,10 @@
 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);
diff --git a/src/api/getRole.ts b/src/api/getRole.ts
index cb06049debab84ddb437b373319a1c910d611ccc..395a0350e5d568b7dc2f300870f9d42ef495fb79 100644
--- a/src/api/getRole.ts
+++ b/src/api/getRole.ts
@@ -1,8 +1,9 @@
 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> =>
diff --git a/src/api/getRoles.ts b/src/api/getRoles.ts
index 7e00e4ef213203b003e3f01e5e4c82981a05c9d8..2d3983e47e2d27ee3331a8dc9675800bb4f0ca56 100644
--- a/src/api/getRoles.ts
+++ b/src/api/getRoles.ts
@@ -1,8 +1,9 @@
 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);
diff --git a/src/api/isAuthenticated.ts b/src/api/isAuthenticated.ts
index 041b4be81d010544d23c5515ef4ea15808f70aa4..ab8dc20cff1d753fd14c4596106328ef93983d2f 100644
--- a/src/api/isAuthenticated.ts
+++ b/src/api/isAuthenticated.ts
@@ -1,8 +1,9 @@
 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(
diff --git a/src/api/setRole.ts b/src/api/setRole.ts
index ac08f6f5bbbfa6ab9963b23f09b07ad7c05a0965..27087fb3697344e4899db8860a77e82168450f9f 100644
--- a/src/api/setRole.ts
+++ b/src/api/setRole.ts
@@ -1,7 +1,9 @@
 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 });
diff --git a/src/components/AuthUser/AuthContext.tsx b/src/components/AuthUser/AuthContext.tsx
index 584aeb648406a755445a50c1a361692ee4a65180..a94586988d500b74cf063b2e4727f0355a6cfd0e 100644
--- a/src/components/AuthUser/AuthContext.tsx
+++ b/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>({
diff --git a/src/components/Authorization/Authorization.tsx b/src/components/Authorization/Authorization.tsx
index 3a03f1f5ba2277ef38873820ac64d62a49f2baf7..f00d076bf5d28f823a7c39740064483a75d13445 100644
--- a/src/components/Authorization/Authorization.tsx
+++ b/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} />
     );
   };
 
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index 0479313fa68645acd8ff0ef33ff64e1b24e9ee6d..10236cbf18cda927dbb66cf436bcd65361f2b7ae 100644
--- a/src/hooks/useAuth.ts
+++ b/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) {