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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.