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>
);
}