Iam working in a login logout feature and iam using context api to run the function’s like store token in localstorage and remove it wile logingout . “The problem is after login if i try to refresh the page the token stored in the localstorage is getting remove please tell me how do i encounter with this problem”
code of context :
import React, {useState, createContext, useEffect} from 'react'
import { useNavigate } from 'react-router-dom';
const Authcontext = createContext();
const Usercontext = ({children}) => {
const navigate = useNavigate()
const [user, setuser] = useState(null)
const [loggedin, setloggedin] = useState(false)
const [token, settoken] = useState(null)
useEffect(() => {
const storedToken = localStorage.getItem('token');
if (storedToken) {
settoken(storedToken);
}
}, []);
////// Login activity
const login = (value) =>{
// const token = localStorage.getItem('token')
localStorage.setItem('token', JSON.stringify(value))
const base64Url = token.split('.')[1];
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
const payload = JSON.parse(atob(base64));
const currentuser = payload.user;
setuser(currentuser)
setloggedin(true)
}
///// logout Activity
const logout = () =>{
localStorage.removeItem('token')
setuser(null)
setloggedin(false)
navigate('/')
}
console.log(user);
return (
<Authcontext.Provider value={{user, loggedin, login, logout}} >
{children}
</Authcontext.Provider>
)
}
export {Usercontext, Authcontext};
here’s my navabar code i’ve been trying to view the name of user in it . here is where the problem refelects after referesh the user name will be changed back to login and register :
import React, { useEffect, useState, useContext } from 'react';
import { Link } from 'react-router-dom';
import { Authcontext } from '../context/Usercontext';
import "../components/css/nav.css"
export const Navbar = () => {
const {loggedin, logout, user} = useContext(Authcontext)
console.log(user);
return (
<div className='navbar' >
<div >Navbar</div>
{loggedin ? (
<div className='userin' >
{user && user.username}
<button className='btn' onClick={logout}>Logout</button>
</div>
) : (
<div className='userout' >
<Link to="/register" className='register' >Register</Link>
<Link to="/login" className='login' >Login</Link>
</div>
)}
</div>
);
};
i’ve been trying to login activity with using localstorage . i need the token stored in the localstorage to hold back even after a page referesh
