Logging out using React

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(); ...

Get Hands-On Full-Stack Web Development with GraphQL and React now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.