Can sign out

geneit_app/src/api/AuthApi.ts

@@ -50,4 +50,16 @@ export class AuthApi {
 
     sessionStorage.setItem(TokenStateKey, res.token);
   }
+
+  /**
+   * Sign out
+   */
+  static async SignOut(): Promise<void> {
+    await APIClient.exec({
+      uri: "/auth/logout",
+      method: "GET",
+    });
+
+    sessionStorage.removeItem(TokenStateKey);
+  }
 }

geneit_app/src/routes/auth/OIDCCbRoute.tsx

@@ -1,6 +1,6 @@
 import { Button, CircularProgress } from "@mui/material";
 import { useEffect, useRef, useState } from "react";
-import { Link, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { AuthApi } from "../../api/AuthApi";
 import { useSetAtom } from "jotai";
 
@@ -9,6 +9,7 @@ import { useSetAtom } from "jotai";
  */
 export function OIDCCbRoute(): React.ReactElement {
   const setAuth = useSetAtom(AuthApi.authStatus);
+  const navigate = useNavigate();
 
   const [error, setError] = useState(false);
 
@@ -27,6 +28,7 @@ export function OIDCCbRoute(): React.ReactElement {
         count.current = code!;
 
         await AuthApi.FinishOpenIDLogin(code!, state!);
+        navigate("/");
         setAuth(true);
       } catch (e) {
         console.error(e);

geneit_app/src/widgets/BaseAuthenticatedPage.tsx

@@ -1,30 +1,42 @@
-import AccountCircle from "@mui/icons-material/AccountCircle";
+import { mdiFamilyTree } from "@mdi/js";
-import { Alert, Button, CircularProgress, Grid } from "@mui/material";
+import Icon from "@mdi/react";
+import SettingsIcon from "@mui/icons-material/Settings";
+import { Alert, Button, CircularProgress } from "@mui/material";
 import AppBar from "@mui/material/AppBar";
-import IconButton from "@mui/material/IconButton";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
+import { useSetAtom } from "jotai";
 import * as React from "react";
+import { Outlet, useNavigate } from "react-router-dom";
+import { AuthApi } from "../api/AuthApi";
 import { User, UserApi } from "../api/UserApi";
-import { Outlet } from "react-router-dom";
-import SettingsIcon from "@mui/icons-material/Settings";
 
 export function BaseAuthenticatedPage(): React.ReactElement {
   const [user, setUser] = React.useState<null | User>(null);
   const [error, setError] = React.useState(false);
 
+  const setSignedIn = useSetAtom(AuthApi.authStatus);
+  const navigate = useNavigate();
+
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
   const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
 
-  const handleClose = () => {
+  const handleCloseMenu = () => {
     setAnchorEl(null);
   };
 
+  const signOut = () => {
+    handleCloseMenu();
+    AuthApi.SignOut();
+    navigate("/");
+    setSignedIn(false);
+  };
+
   React.useEffect(() => {
     const load = async () => {
       if (error || user != null) return;
@@ -80,10 +92,10 @@ export function BaseAuthenticatedPage(): React.ReactElement {
     <>
       <AppBar position="fixed">
         <Toolbar>
+          <Icon path={mdiFamilyTree} size={1} style={{ marginRight: "1rem" }} />
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
             GeneIT
           </Typography>
-
           <div>
             <Button size="large" color="inherit">
               {user.name}
@@ -112,10 +124,10 @@ export function BaseAuthenticatedPage(): React.ReactElement {
                 horizontal: "right",
               }}
               open={Boolean(anchorEl)}
-              onClose={handleClose}
+              onClose={handleCloseMenu}
             >
-              <MenuItem onClick={handleClose}>Profil</MenuItem>
+              <MenuItem onClick={handleCloseMenu}>Profil</MenuItem>
-              <MenuItem onClick={handleClose}>Déconnexion</MenuItem>
+              <MenuItem onClick={signOut}>Déconnexion</MenuItem>
             </Menu>
           </div>
         </Toolbar>