firebase signOut() 方法不退出

Question

我使用 firebase v9 并创建了一个反应钩子以方便验证用户授权。 授权后，我无法在页面上注销，好像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();

使用Auth.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,
  };
}

主页.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;

同时，当我刷新页面时，会话没有重置，我仍然在主页上。 我究竟做错了什么？

Answer 1

好的，错误出现在 JSX 中

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