add signOut

Author: TsurutaYoshiki

web/src/pages/App/AppBar.jsx

@@ -1,14 +1,17 @@
 import { Menu as MenuIcon } from "@mui/icons-material";
 import { AppBar as MuiAppBar, Box, Button, Divider, IconButton, Toolbar } from "@mui/material";
 import { styled } from "@mui/material/styles";
+import { signOut } from "firebase/auth";
 import React from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 
 import { firebaseApi } from "../../services/firebaseApi";
 import { tcApi } from "../../services/tcApi";
+import { setAuthUserIsReady } from "../../slices/auth";
 import { setDrawerOpen } from "../../slices/system";
+import Firebase from "../../utils/Firebase";
 import { drawerWidth } from "../../utils/const";
 
 import { AppFallback } from "./AppFallback";
@@ -46,9 +49,16 @@ export function AppBar() {
   const handleLogout = () => {
     dispatch(firebaseApi.util.resetApiState()); // reset RTKQ
     dispatch(tcApi.util.resetApiState()); // reset RTKQ
-    navigate("/login", {
-      state: { message: "Logged out successfully.", from: null, search: null },
-    });
+    dispatch(setAuthUserIsReady(false));
+    signOut(Firebase.getAuth())
+      .then(() => {
+        navigate("/login", {
+          state: { message: "Logged out successfully.", from: null, search: null },
+        });
+      })
+      .catch((error) => {
+        console.error(error);
+      });
   };
 
   return (

web/src/pages/App/AppPage.jsx

@@ -1,5 +1,5 @@
 import { Box } from "@mui/material";
-import { onAuthStateChanged } from "firebase/auth";
+import { onAuthStateChanged, signOut } from "firebase/auth";
 import React, { useEffect } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { useDispatch, useSelector } from "react-redux";
@@ -25,6 +25,7 @@ export function App() {
   useEffect(() => {
     onAuthStateChanged(Firebase.getAuth(), (user) => {
       if (!user) {
+        dispatch(setAuthUserIsReady(false));
         navigate("/login", {
           state: {
             from: location.pathname,

web/src/pages/Login/LoginPage.jsx

@@ -14,6 +14,7 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
+import { signOut } from "firebase/auth";
 import React, { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
@@ -24,6 +25,7 @@ import {
   useSignInWithSamlPopupMutation,
 } from "../../services/firebaseApi";
 import { useCreateUserMutation, useTryLoginMutation } from "../../services/tcApi";
+import { setAuthUserIsReady } from "../../slices/auth";
 import Firebase from "../../utils/Firebase";
 
 export function Login() {
@@ -41,7 +43,9 @@ export function Login() {
   const [tryLogin] = useTryLoginMutation();
 
   useEffect(() => {
+    dispatch(setAuthUserIsReady(false));
     setMessage(location.state?.message);
+    signOut(Firebase.getAuth());
   }, [dispatch, location]);
 
   const callSignInWithEmailAndPassword = async (email, password) => {