firebase signOut() method doesn't sign out

Question

I use firebase v9 and created a react hook for convenient verification of user authorization. After authorization, I can't log out on the page as if the signOut() method just doesn't work

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;

At the same time, when I refresh the page, the session is not reset and I remain on the home page. What am I doing wrong?

Answer 1

Okay, the error was in JSX

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