To complete the circle, we still have to implement the functionality to log out. There are two cases when the user can be logged out:
- The user wants to log out and hits the logout button
- The JWT has expired after one day as specified; the user is no longer authenticated, and we have to set the state to logged out
We will begin by adding a new logout button to the top bar of our application's front end. To do this, we need to create a new logout.js component inside the bar folder. It should appear as follows:
import React, { Component } from 'react';import { withApollo } from 'react-apollo';class Logout extends Component { logout = () => { localStorage.removeItem('jwt'); this.props.changeLoginState(false); this.props.client.resetStore(); ...