Show error and clear login if user is not authorized

GeoWerkstatt · Nov 30, 2023 · f75c750 · f75c750
1 parent a8183e1
commit f75c750
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 10 deletions.
diff --git a/src/GeoCop.Frontend/src/App.jsx b/src/GeoCop.Frontend/src/App.jsx
@@ -1,5 +1,7 @@
 import { useEffect, useState } from "react";
+import { Alert } from "react-bootstrap";
 import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
+import { Snackbar } from "@mui/material";
 import BannerContent from "./BannerContent";
 import Footer from "./Footer";
 import Header from "./Header";
@@ -26,6 +28,7 @@ export const App = () => {
   const [quickStartContent, setQuickStartContent] = useState(null);
   const [licenseInfo, setLicenseInfo] = useState(null);
   const [licenseInfoCustom, setLicenseInfoCustom] = useState(null);
+  const [alertText, setAlertText] = useState("");
 
   // Update HTML title property
   useEffect(() => {
@@ -84,7 +87,7 @@ export const App = () => {
     setModalContent(content) & setModalContentType(type) & setShowModalContent(true);
 
   return (
-    <AuthProvider authScopes={clientSettings?.authScopes} oauth={clientSettings?.oauth}>
+    <AuthProvider authScopes={clientSettings?.authScopes} oauth={clientSettings?.oauth} onLoginError={setAlertText}>
       <div className="app">
         <Router>
           <Header clientSettings={clientSettings} />
@@ -136,6 +139,11 @@ export const App = () => {
           <BannerContent className="banner" content={bannerContent} onHide={() => setShowBannerContent(false)} />
         )}
       </div>
+      <Snackbar key={alertText} open={alertText !== ""} anchorOrigin={{ vertical: "top", horizontal: "right" }}>
+        <Alert variant="danger" dismissible onClose={() => setAlertText("")}>
+          <p>{alertText}</p>
+        </Alert>
+      </Snackbar>
     </AuthProvider>
   );
 };

diff --git a/src/GeoCop.Frontend/src/auth/AuthContext.jsx b/src/GeoCop.Frontend/src/auth/AuthContext.jsx
@@ -10,7 +10,7 @@ const authDefault = {
 
 export const AuthContext = createContext(authDefault);
 
-export const AuthProvider = ({ children, authScopes, oauth }) => {
+export const AuthProvider = ({ children, authScopes, oauth, onLoginError }) => {
   const msalInstance = useMemo(() => {
     return new PublicClientApplication(oauth ?? {});
   }, [oauth]);
@@ -34,8 +34,9 @@ export const AuthProvider = ({ children, authScopes, oauth }) => {
     [fetchUserInfo],
   );
 
-  const logoutCompleted = useCallback(() => {
+  const logoutCompleted = useCallback(async () => {
     msalInstance.setActiveAccount(null);
+    await msalInstance.clearCache();
     clearInterval(loginSilentIntervalRef.current);
     document.cookie = "geocop.auth=;expires=Thu, 01 Jan 1970 00:00:00 GMT;Path=/;Secure";
     setUser(undefined);
@@ -47,10 +48,10 @@ export const AuthProvider = ({ children, authScopes, oauth }) => {
       const result = await msalInstance.acquireTokenSilent({
         scopes: authScopes,
       });
-      loginCompleted(result.idToken);
+      await loginCompleted(result.idToken);
     } catch (error) {
       console.warn("Failed to refresh authentication.", error);
-      logoutCompleted();
+      await logoutCompleted();
     }
   }, [msalInstance, authScopes, loginCompleted, logoutCompleted]);
 
@@ -74,18 +75,24 @@ export const AuthProvider = ({ children, authScopes, oauth }) => {
       const result = await msalInstance.loginPopup({
         scopes: authScopes,
       });
-      msalInstance.setActiveAccount(result.account);
-      loginCompleted(result.idToken);
-      setRefreshTokenInterval();
+      try {
+        await loginCompleted(result.idToken);
+        msalInstance.setActiveAccount(result.account);
+        setRefreshTokenInterval();
+      } catch (error) {
+        onLoginError?.("Dieser Account ist nicht berechtigt zur Anmeldung.");
+        await logoutCompleted();
+      }
     } catch (error) {
-      console.warn(error);
+      console.warn("Login failed.", error);
+      await logoutCompleted();
     }
   }
 
   async function logout() {
     try {
       await msalInstance.logoutPopup();
-      logoutCompleted();
+      await logoutCompleted();
     } catch (error) {
       console.warn(error);
     }