I am trying to login to my user account which is saved on database and attach a token to that username with 'jwt-token'.
router.post('/users/login', (req, res) => {
User.authenticate()(req.body.username, req.body.password, (err, user) => {
if (err) { console.log(err) }
res.json(user ? jwt.sign({ id: user._id }, process.env.SECRET) : null)
})
})
However when i login to the account, the token is being saved, as [Object][Object] in the local storage via this function here,
// when a user clicks login
const handleLogin = (event) => {
event.preventDefault();
axios.post('/api/users/login', {
username: userState.username,
password: userState.password
}).then(token => {
console.log(token)
setLoginState(true)
localStorage.setItem('username', userState.username)
localStorage.setItem('token', token)
}).catch(err => { console.log(err) })
What is the reason the token is saving as an object? is it not properly being created by my route? or am I not calling it correctly in my .then call? any insight would be appreciated. Still trying to learn as much as i can on backend work and seem to hit problems at every step.
We have to stringify while storing objects in storage and parse the stored objects while retrieving.
// Put the object into storage
localStorage.setItem('username', JSON.stringify(username));
// Retrieve the object from storage
var retrievedUsername= localStorage.getItem('username');
console.log('retrievedUsername: ', JSON.parse(retrievedUsername));
localStorage.setItem() saves information as Strings which is why you see "[Object][Object]" being saved since that is what it is receiving.
So you need to transform your object to a String before you save it.
You can achieve this by using the JSON.stringify() function.
Note: you will have to transform the String back to an object when you need to get it.
You can achieve this by using the JSON.parse()
Example:
localStorage.setItem('username', JSON.stringify(userState.username))
localStorage.setItem('token', JSON.stringify(token))
JSON.parse(localStorage.getItem('username'))
JSON.parse(localStorage.getItem('token'))
axios promise returns response object which has a data attribute. To access token you should call
res.data
and store it like so
localStorage.setItem('token',res.data)