React Firebase authentication keeps the user logged in all the time even after refreshing

Console keeps showing that uthContext user: _UserImpl. I’m trying to make a different component to show up after clicking a button depending on if the user is logged in or not. (SignUp component if not logged in, Jobs component if logged in) All the time even if the I refresh, the user stays logged in and the same component (‘/rejestracja) show ups whether I’m logged in or not.

Boxes.jsx: (Starting component, so I want the (‘/oferty-pracy’) to open if the user is logged in and (‘/rejestracja’) if not logged in.)

import { useContext, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { AuthContext } from "../AuthContext";

export default function Boxes() {
    const { user } = useContext(AuthContext);
    const navigate = useNavigate();

    useEffect(() => {
        console.log('User state changed:', user);
    }, [user]);

    const handleClick = () => {
        console.log('Handle Click - User:', user);
        if (user) {
            navigate('/oferty-pracy');
        } else {
            navigate('/rejestracja');
        }
    };

    return (

AuthContext.jsx:

import React, { createContext, useState, useEffect } from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
    const [user, setUser] = useState(null);
    const auth = getAuth();

    useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, (user) => {
            console.log('AuthContext user:', user);
            setUser(user);
        });
        return () => unsubscribe();
    }, [auth]);

    return (
        <AuthContext.Provider value={{ user }}>
            {children}
        </AuthContext.Provider>
    );
};

App.jsx:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { AuthProvider } from './config/AuthContext';
import Navbar from './config/Components/Navbar';
import Boxes from './config/Components/Boxes';
import LogIn from './config/Components/LogIn';
import SignUp from './config/Components/SignUp';
import Jobs from './config/Components/Jobs';

export default function App() {
    return (
        <div className="App">
            <AuthProvider>
                <Router>
                    <Navbar />
                    <Routes>
                        <Route path="/" element={<Boxes />} />
                        <Route path="/zaloguj" element={<LogIn />} />
                        <Route path="/rejestracja" element={<SignUp />} />
                        <Route path="/onas" element={<div>O nas</div>} />
                        <Route path="/oferty-pracy" element={<Jobs />} />
                    </Routes>
                </Router>
            </AuthProvider>
        </div>
    );
}