Losing JWT token after browser refresh - reactjs

Question

I'm learning Full Stack Development with Spring Boot 2.0 and React .
The authentication and authorization are managed by JWT and the app works as expected except I have to re-login after I refresh the browser.
How to maintain JWT token even after browser refresh ?
import React, { Component } from 'react';
import TextField from '#material-ui/core/TextField';
import Button from '#material-ui/core/Button';
import Snackbar from '#material-ui/core/Snackbar';
import Carlist from './Carlist';
import {SERVER_URL} from '../constants.js';
class Login extends Component {
constructor(props) {
super(props);
this.state = {username: '', password: '', isAuthenticated: false, open: false};
}
logout = () => {
sessionStorage.removeItem("jwt");
this.setState({isAuthenticated: false});
}
login = () => {
const user = {username: this.state.username, password: this.state.password};
fetch(SERVER_URL + 'login', {
method: 'POST',
body: JSON.stringify(user)
})
.then(res => {
const jwtToken = res.headers.get('Authorization');
if (jwtToken !== null) {
sessionStorage.setItem("jwt", jwtToken);
this.setState({isAuthenticated: true});
}
else {
this.setState({open: true}); // maintient snackbar ouvert
}
})
.catch(err => console.error(err))
}
handleChange = (event) => {
this.setState({[event.target.name] : event.target.value});
}
handleClose = (event) => {
this.setState({ open: false });
}
render() {
if (this.state.isAuthenticated === true) {
return (<Carlist />)
}
else {
return (
<div>
<br/>
<TextField tpye="text" name="username" placeholder="Username"
onChange={this.handleChange} /><br/>
<TextField type="password" name="password" placeholder="Password"
onChange={this.handleChange} /><br /><br/>
<Button variant="raised" color="primary" onClick={this.login}>Login</Button>
<Snackbar
open={this.state.open} onClose={this.handleClose}
autoHideDuration={1500} message='Check your username and password' />
</div>
);
}
}
}
export default Login;

Answer 1

I think you simply don't check for the token in local storage in your constructor. When you reload the page, your constructor executes and sets isAuthenticated = false, whether there is a token in local storage or not. You should add additional logic to check the token in local storage before finally setting isAuthenticated. Probably the best place to put this code would be componentDidMount() function. I mean set it initially to false and then update in componentDidMount() according to current authorization status. Have a look at my GitHub, I have a small boilerplate project with such auth flow set-up. Hope this helps, happy coding!

Answer 2

I would use local storage instead of session storage like this
localStorage.setItem("jwt", jwtToken)
instead of the line
sessionStorage.setItem("jwt", jwtToken);
The check the local storage in the dev console, refresh the page and see if it is still there. It may require some other changes in your auth flow to build it off localStorage instead of sessionStorage; however, this will solve the immediate problem of losing the jwt on page refresh.