firebase signOut() 方法没有注销

Question

我使用的是firebase v9，为了方便验证用户授权，我创建了一个react hook。授权后页面无法登出，好像signOut()方法就是不行

firebase.ts

import { initializeApp } from "firebase/app";
import {getAuth} from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth();

useAuth.ts

import {useEffect, useState} from "react";

import {onAuthStateChanged, User} from "firebase/auth";
import {auth} from "../firebase";

export const useAuth = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    const subscriber = onAuthStateChanged(auth, (userInfo) => {
      if (userInfo) {
        setIsLoggedIn(true);
        setUser(userInfo);
      } else {
        setIsLoggedIn(false);
        setUser(null);
      }
    });
    return () => {
      subscriber();
    }
  }, []);

  return {
    user,
    isLoggedIn,
  };
}

HomePage.ts

import React from 'react';

import {signOut} from "firebase/auth";
import {Navigate} from "react-router-dom";
import {useAuth} from "../hooks/useAuth";
import {auth} from "../firebase";

const HomePage = () => {
  const { isLoggedIn } = useAuth();

  const handleLogOut = () => {
    signOut(auth)
      .then(r => console.log(r)) // undefined
      .catch();
  };

  return (
    {isLoggedIn} ?
      <div>
        <h1>Welcome</h1>
        <button onClick={handleLogOut}>
          Log Out
        </button>
      </div>
      : <Navigate to='/login' />
  );
};

export default HomePage;

同时，当我刷新页面时，session并没有被重置，我仍然停留在主页上。我做错了什么？

Answer 1

好的，错误出在 JSX 中

  return (
    {
      isLoggedIn ?
        <div>
          <h1>Welcome</h1>
          <button onClick={handleLogOut}>
            Log Out
          </button>
        </div>
      : <Navigate to='/login' />
    }
  );

firebase signOut() 方法没有注销

firebase signOut() method doesn't sign out

javascript

firebase

typescript

reactjs

firebase-authentication