Login.jsx
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const { user, setUser } = useContext(UserContext)
const navigate = useNavigate()
console.log(user)
const handleSubmit = async (e) => {
e.preventDefault()
try{
const {data} = await axios.post("http://localhost:4000/user/login",{
email, password
})
setUser(data)
console.log(data)
console.log(user)
alert("Login Success")
navigate("/")
} catch(err){
console.log(err)
alert("Failed to Login")
}
}
UserContext.jsx
import { createContext, useEffect, useState } from "react";
export const UserContext = createContext({})
const UserContextProvider = ({children}) => {
const [user, setUser] = useState({})
return (
<UserContext.Provider value={{user,setUser}}>
{children}
</UserContext.Provider>
)
}
export default UserContextProvider
App.js
<BrowserRouter>
<UserContextProvider>
<Navbar />
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/signup" element={<Register />} />
<Route path="/login" element={<Login />} />
</Routes>
</UserContextProvider>
</BrowserRouter>
I am trying to use UserContext to fetch the login data from the login page after clicking the login button. Even I tried to use setUser to the login data and I console.log(user) it shows nothing and after refresh it lost state. May I ask any solutions can log the user in and store the state when refreshing the page?
For persisting the user login data, you will need to utilize either cookie, or local storage, simply because React doesn't persist any data on a reload.
For example
// auth.js
class AuthService {
login(username, password) {
// Perform authentication, e.g., make an API request to validate the user
if (username === 'user' && password === 'password') {
localStorage.setItem('user', JSON.stringify({ username }));
return true;
}
return false;
}
logout() {
localStorage.removeItem('user');
}
getUser() {
const user = localStorage.getItem('user');
return user ? JSON.parse(user) : null;
}
}
export default new AuthService();
Then in your Homepage component, check the user login status
function Homepage() {
const user = AuthService.getUser();
// if user session is invalid, redirect to login page
const navigate = useNavigate()
if (!user) navigate('/login')
... rest of your code
}
Even I tried to use setUser to the login data and I console.log(user) it showed nothing
This is expected ReactJS behavior because you are trying to console log a state that hasn't been updated by the setState. The state user is only available on the next render, not the same render.
You can try to move the console.log(user) on the context file, it will the console log the updated user on the next rerender triggered by the setUser you executed in Login component.
... and after refresh it lost state.
This is also expected because the state doesn't persist after the current session, or after a reload of the page.
May I ask if any solutions can log the user in and store the state when refreshing the page?
Looks like you are already doing everything correctly, if you don't mind providing even more info, we will be able to assist you further. (such as possible import path misspell, syntax error elsewhere)
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments