Change token verification

src/services/AuthService.tsx

@@ -1,3 +1,4 @@
+import { Backdrop, CircularProgress, Typography } from '@mui/material';
 import Keycloak from 'keycloak-js';
 import ky, { HTTPError } from 'ky';
 import { KyInstance } from 'ky/distribution/types/ky';
@@ -171,9 +172,11 @@ const Auth = ({ children }: GenericContextProviderProps) => {
 		else if (!isServerReachable || !user?.source) setRefreshInterval(undefined);
 	}, [isServerReachable, user]);
 
-	const tokenLogin = useCallback(() => {
+	const tokenVerification = useCallback(() => {
+		if (!keycloak.authenticated) return Promise.reject();
 		const username = keycloak.tokenParsed?.preferred_username;
-		kyRef
+
+		return kyRef
 			.post(`auth/keycloak`, {
 				headers: {
 					Authorization: `Bearer ${keycloak.token}`
@@ -206,10 +209,10 @@ const Auth = ({ children }: GenericContextProviderProps) => {
 							? getRefreshDelay(keycloak.tokenParsed.exp * 1000)
 							: undefined
 					);
-					tokenLogin();
+					tokenVerification();
 				}
 			});
-	}, [tokenLogin]);
+	}, [tokenVerification]);
 
 	const login = useCallback(
 		(...[username, password]: RequestAuthLogin) => {
@@ -241,6 +244,11 @@ const Auth = ({ children }: GenericContextProviderProps) => {
 		if (!keycloak.authenticated) {
 			setKeyCloakInterval(undefined);
 
+			if (user?.source === 'keycloak') {
+				enqueueSnackbar('Session expired.', { variant: 'warning' });
+				logout();
+			}
+
 			return Promise.resolve();
 		}
 
@@ -253,16 +261,22 @@ const Auth = ({ children }: GenericContextProviderProps) => {
 					);
 			})
 			.catch(() => {
-				console.log('Failed to refresh token');
+				enqueueSnackbar('Failed to refresh token.', { variant: 'error' });
 				logout();
 			});
-	}, [logout]);
+	}, [enqueueSnackbar, logout, user?.source]);
 
 	useIntervalAsync(tokenRefresh, keycloak.authenticated ? keyCloakInterval : undefined);
 
 	const refresh = useCallback(async () => {
-		if (user?.source === 'keycloak') return tokenLogin();
-		if (demoMode || !isServerReachable) return Promise.resolve(setRefreshInterval(undefined));
+		if (user?.source === 'keycloak') return tokenVerification();
+
+		if (demoMode || !isServerReachable) {
+			setRefreshInterval(undefined);
+			setUser(null);
+
+			return Promise.reject();
+		}
 
 		try {
 			const { accessExp } = await kyIntervalRef
@@ -271,7 +285,7 @@ const Auth = ({ children }: GenericContextProviderProps) => {
 
 			return setRefreshInterval(getRefreshDelay(accessExp));
 		} catch (_) {}
-	}, [demoMode, isServerReachable, kyIntervalRef, tokenLogin, user?.source]);
+	}, [demoMode, isServerReachable, kyIntervalRef, tokenVerification, user?.source]);
 
 	const authKy = useMemo(() => kyRef, [kyRef]);
 	const isAuthorized = useMemo(() => user !== null || demoMode, [demoMode, user]);
@@ -294,6 +308,10 @@ const Auth = ({ children }: GenericContextProviderProps) => {
 				authKy,
 				refresh
 			}}>
+			<Backdrop open={Boolean(isServerReachable && keycloak.authenticated && !isAuthorized)}>
+				<Typography variant='h1'>Waiting for verification...</Typography>
+				<CircularProgress />
+			</Backdrop>
 			{children}
 		</AuthContextProvider>
 	);