Need help! While using localstorage user logout on page refresh - reactjs

Question

I met a problem which I cannot solve.. I have register, login authentification and logout. So I noticed that if I refresh my page user is no longer logged in. So I found a solution for it, is using localstorage, of course there's more option how to solve it, but this one is more understandable to me. But as I expected I'm stuck with it, cause of useEffect() which is not my strongest side. So I hope you guys can help me with that. Of course I tried it without it, but than got some "red" color in my code (errors).
There's my code:
This is what I'm using in App.js. There I'm creating a variable window.localStorage with getItem and adding it to MainContext:
function App() {
// Use states
const [user, setUser] = useState(null);
const [message, setMessage] = useState('');
const isLoggedIn = window.localStorage.getItem('isLoggedIn')
// Main context
const states = { user, setUser, message, setMessage, isLoggedIn };
// Side effects
return (
<div className='App'>
<MainContext.Provider value={states}>
<BrowserRouter>
<Routes>
<Route path='/' element={isLoggedIn ? <HomePage /> : <LoginPage />}></Route>
{!user && <Route path='/register' element={<RegisterPage />}></Route>}
{!user && <Route path='/login' element={<LoginPage />}></Route>}
</Routes>
</BrowserRouter>
</MainContext.Provider>
</div>
);
}
export default App;
This is my Login component at the end of login I'm setting localstorage when Login button is clicked:
import React, { useContext, useRef } from 'react';
import MainContext from '../context/MainContext';
import { post } from '../helper/helper';
import { useNavigate } from 'react-router-dom';
export default function Login() {
const nav = useNavigate()
const { message, setMessage, setUser } = useContext(MainContext);
// Setting inputs references
const usernameRef = useRef();
const passwordRef = useRef();
const login = async () => {
// Setting a user for sign in, taking input values
const user = {
username: usernameRef.current.value,
password: passwordRef.current.value,
};
// Posting sign in user to database, if all fields validated (successfully signin), if failed (getting error message)
const result = await post(user, 'login');
if (!result.error) {
setMessage(result.message);
usernameRef.current.value = '';
passwordRef.current.value = '';
setUser(result.data);
} else {
setMessage(result.message);
}
window.localStorage.setItem('isLoggedIn', true)
nav('/')
};
return (
<div className='login'>
<h2>Sign In!</h2>
{message !== '' && <p className='signin__message'>{message}</p>}
<input ref={usernameRef} onClick={() => setMessage('')} type='text' placeholder='Enter Username' />
<input ref={passwordRef} onClick={() => setMessage('')} type='password' placeholder='Enter Password' />
<button onClick={login}>Sign In</button>
</div>
);
}
In Toolbar(header) component I wanna show is user is logged in, than I will show his username and avatar picture in right corner with logout button near it. If user not logged in or logout than in that place will be Login and Register buttons.
{isLoggedIn && <UserTrigger />}
{!isLoggedIn && <NoUser />}
There's user logout logic. If user click on logout button, than window.localStorage.removeItem
import React, { useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import MainContext from '../context/MainContext';
export default function UserTrigger() {
const { user, setMessage, setUser } = useContext(MainContext);
const nav = useNavigate();
return (
<div className='toolbar__user'>
<div className='user'>
<img src={user.image} alt="" />
<h2>{user.username}</h2>
</div>
<div className='toolbar__logout'>
<button onClick={() => { setMessage(''); setUser(null); nav('/'); window.localStorage.removeItem('isLoggedIn') }}>
Logout
</button>
</div>
</div>
);
}
I wanna say sorry for that much code. But I wanna make sure that you'll understand it well. And thank you for any answers! <3