Why does localStorage.Remove not work? React - reactjs

Question

import { Navigate, useLocation } from 'react-router-dom';
export function RequireAuth({ children }) {
const token = localStorage.getItem('token');
const location = useLocation();
if (!token) {
return <Navigate to='/' state={{ from: location }} replace />;
}
return children;
}
export default RequireAuth;
import MotionLeftSideSignin from '../components/MotionSignIn/motionsigninleftside.js';
import SignUpBar from '../components/MotionSignIn/SignupBar.js';
import { MainContainer,SignInContainer,RightContainer,Header,Inputboxes,UsernameInput,PasswordnameInput,SigninbuttonBox,SigninButton} from '../style/signinStyle.js';
import { useState } from 'react';
import {useNavigate} from 'react-router-dom';
const Signin = () => {
const [email,setEmail] = useState();
const [password,setPassword] = useState();
const navigate= useNavigate();
const updateEmail = (event) =>{
setEmail(event.target.value);
}
const updatePassword = (event) =>{
setPassword(event.target.value);
}
const login = (event) =>{
event.preventDefault();
const url = "https://motion.propulsion-home.ch/backend/api/auth/token/"
const data = {
email:email,
password:password,
};
const fetchConfig = {
method:"POST",
headers: new Headers({
"Content-Type": "application/json",
}),
body: JSON.stringify(data),
};
fetch(url,fetchConfig)
.then((response) => {
return response.json();
})
.then((data) => {
if(data.access === undefined) {
alert("Please try again")
}else{
localStorage.setItem('token',data.access);
navigate("/Posts")
};
});
const NavigationBar = () => {
const navigate = useNavigate();
const toFriendsPage = () => {
navigate("/FindFriends");
}
const toSignInPage = () =>{
navigate("/");
}
const toPostsPage = () =>{
navigate("/Posts");
}
const togglePopUp = () => {
const popUp = document.querySelector(".popup")
const popUpDisplay = window.getComputedStyle( popUp, null ).display
if (popUpDisplay === "flex") {
popUp.style.display = "none"
} else {
popUp.style.display = "flex"
}
}
const logOut = () => {
localStorage.removeItem('token');
}
return (
<ProfilOverlayHeader>
<NavigationBarLogoDiv>
<NavigationBarLogo src={logo} alt="logo"/>
<NavigationBarTitle onClick={toSignInPage}>Motion</NavigationBarTitle>
</NavigationBarLogoDiv>
<Post_FriendsDiv>
<Post_FriendsDivPosts>
<Post_FriendsDivPostsImg src={postsImg} alt="posts"/>
<Clickables onClick={toPostsPage}>Posts</Clickables>
</Post_FriendsDivPosts>
<Post_FriendsDivFriendsImg src={friendsImg} alt="friends"/>
<Clickables onClick={toFriendsPage}>Find Friends</Clickables>
</Post_FriendsDiv>
<Notif_ProfilPic_SettingsDiv>
<NotificationBell src={notificationBellImg} alt="your notifications"/>
<NavigationBarProfilPic onClick={ togglePopUp } src={profilPic} alt="your profil picture"/>
<ProfilPopUpDiv className="popup">
<TopDiv>
<ProfileIcon src={ ProfilePopUpIcon } alt="profile icon"/>
<p>Profile</p>
</TopDiv>
<BottomDiv>
<LogOutIcon src={ LogoutIcon } alt="profile icon"/>
<LogOutButton onclick={logOut}>Logout</LogOutButton>
import './App.css';
import SignIn from './pages/signin.js';
import SignUpStep1 from './pages/signup-step1.js'
import {Route,Routes} from 'react-router-dom';
import SignUpStep2 from './pages/signup-step2.js'
import Verification from './pages/verification.js'
import Posts from './pages/posts-pages/PostsPage.js'
import FindFriends from './pages/find-friends-pages/FindFriendsPage.js'
import RequireAuth from './components/Auth/RequireAuth.js'
import ProfilOverlay3_1 from "./pages/ProfilOverlay3_1";
import ProfilOverlay3_2 from "./pages/ProfilOverlay3_2";
import ProfilOverlay3_3 from "./pages/ProfilOverlay3_3";
import ProfilOverlay3_4 from './pages/ProfilOverlay3_4';
function App() {
return (
<Routes>
<Route path="/" element={<SignIn/>} />
<Route path="/SignUpStep1" element={<SignUpStep1/>} />
<Route path="/SignUpStep2" element={<SignUpStep2/>} />
<Route path="/Verification" element={<Verification/>} />
<Route path="/Posts" element={<RequireAuth><Posts/></RequireAuth>} />
<Route path= "/FindFriends" element={<RequireAuth><FindFriends/></RequireAuth>} />
<Route path="/ProfilPosts" element={<RequireAuth><ProfilOverlay3_1/></RequireAuth>}/>
<Route path="/ProfilEdit" element={ <RequireAuth><ProfilOverlay3_2/></RequireAuth> } />
<Route path="/UserPosts" element= { <RequireAuth><ProfilOverlay3_3/> </RequireAuth>} />
<Route path="/UserFriends" element= {<RequireAuth><ProfilOverlay3_4 /> </RequireAuth>} />
</Routes>
// <FindFriendsNotification />
)
}
export default App;
Hi I have added an authentication using a JSON Web Token for a react project i'm working on from a bootcamp (so i am very new to this). The authentication works for registration , login and browser refresh. But when I call the logOut function on the onClick logout button it doesn't log me out. I have console logged localStorage.getItem('token') before and after the logout function. The first console log is present and the second not, so I guess it has removed the token but then it doesn't redirect me to the signin page. Also if i refresh it stays on the same page. Does anyone know why this is happening? thanks

Answer 1

The way you defined variable token makes it static:
const token = localStorage.getItem('token');
You only run this once at the start of routes using RequireAuth, and I'm guessing it doesn't run after you update your local storage, therefore even though you removed the token, the component never updates.
I personally would use the React Context API to handle issues like this. But for the sake of just implementing the function, you can always hard-code a navigate('/') function after logging out.