React : LocalStorage with a non-null value always - node.js

Question

Hello I am using localStorage to save my jwt token from my api
But it is saving my token even if I close shut down the node server and etc.
and I would need to do a login check
here is my server route
app.route('/login')
.post(async (req,res)=>{
try {
const response = await usersControllers.signin(req.body);
const login = response.login;
console.log(login);
if(login.id && login.isValid){
const payload = {id: login.id};
res.json({
token: jwt.sign({data:payload}, app.config.jwt.secret,{expiresIn: '60'}),
response
});
}else{
console.log('entrou here');
res.sendStatus(HttpStatus.UNAUTHORIZED);
}
} catch (error) {
console.log('entrou here');
console.error(error.message);
res.sendStatus(HttpStatus.UNAUTHORIZED);
}
})
and in my front end react
i have this in my login:
import React, { Component } from 'react';
import {Form,FormGroup, Label, Input, Button, Alert} from 'reactstrap';
import Header from '../../components/header';
export default class Login extends Component {
constructor(props) {
super(props)
console.log(this.props);
this.state = {
message: this.props.location.state?this.props.location.state.message: '',
};
}
signIn = () => {
const data = {login:this.login,password:this.password};
const requestInfo = {
method:'POST',
body: JSON.stringify({data}),
headers: new Headers({
'Content-Type': 'application/json'
}),
};
fetch('http://localhost:9000/login', requestInfo)
.then(response => {
if(response.ok){
return response.json();
}
throw new Error("Login Invalido..")
})
.then(token => {
localStorage.setItem('token', token.token);
this.props.history.push("/users");
return;
})
.catch(e => {
this.setState({message: e.message})
});
}
render(){
return(
<div className="col-md-6">
<Header title="ReactJS Login"/>
<hr className="my-3"/>
{
this.state.message !== ''? (
<Alert color="danger" className ="text-center"> {this.state.message}</Alert>
) : ''
}
<Form>
<FormGroup>
<Label for="login">Login</Label>
<Input type="text" id="login" onChange={e => this.login = e.target.value } placeholder="Informe seu login" />
</FormGroup>
<FormGroup>
<Label for="password">Senha</Label>
<Input type="text" id="password" onChange={e => this.password = e.target.value } placeholder="Informe sua senha"/>
</FormGroup>
<Button color="primary" onClick={this.signIn}> Entrar </Button>
</Form>
</div>
);
}
}
here i set my jwt in localstorage:
.then(token => {
localStorage.setItem('token', token.token);
this.props.history.push("/users");
return;
})
in my other js file
my auth about jwt
const isAuth = () => {
console.log(localStorage.getItem('token'));
if(localStorage.getItem('token') !== null) {
console.log("entrou aq2");
return true;
}
return false;
};
in console.log(localStorage.getItem('token')); have value !== all time
Even without logging in with my api

Answer 1

The reason your
localStorage.getItem('token') !== null
is returning true is because you are using localStorage. localStorage's values does not expire therefore your value is stored in your localStorage until you call
localStorage.removeItem('token')
If you want your token be deleted after each time you close your browser, use sessionStorage instead. You can read more about authenticating with SPA here

Answer 2

Use JSON.stringify() to save in localstorage
.then(token => {
localStorage.setItem('token', JSON.stringify(token.token));
this.props.history.push("/users");
return;
})
and use JSON.parse() to get from localstorage
const isAuth = () => {
if(JSON.parse(localStorage.getItem('token')) !== null) {
console.log("entrou aq2");
return true;
}
return false;
};