Implementing Client-Side Logout Functionality in React

Pradeep Maurya

5 years ago

User login and logout functionality in react is an important part of any Web Application. It does not matter your application built with React, Nodejs, PHP, or any technologies. If your application is built with React and you want to implement logout functionality then this post is very useful for you.

Logout Functionality in React

In this article, I will show you every step to implement logout functionality in React application. Suppose at the user login condition, we store user token in localStorage and now when we want to logout user then we need to clear localStorage token.

Also Read: How to use map() in Javascript

Create a user logout Component


import React, { Component } from 'react'
export default class UserLogout extends Component {

  render() {
    return (
      <button>Logout</button>
    )
  }
}

import React, { Component } from 'react'

export default class UserLogout extends Component {

render() {

return (

<button>Logout</button>

)

}

In the above example code, you can see we created a “UserLogout” Class Component. Here we are rendering logout button but there is no logout function calling on button click.

Now we will implement logout function and this function will trigger when user click on logout button.


<button onClick={this.logout}>Logout</button>

<button onClick={this.logout}>Logout</button>

Define logout function with class component

Now we will define the logout function in-class component. When logout function will trigger then it will Clear the token in localStorage and redirect the user to the login page or home or where you want to redirect.


  logout = () => {
    localStorage.clear();
// you can also like localStorage.removeItem('Token');
    window.location.href = "/login";
  }

logout = () => {

localStorage.clear();

// you can also like localStorage.removeItem('Token');

window.location.href = "/login";

}

Complete Code


import React, { Component } from 'react'
export default class UserLogout extends Component {

 logout = () => {
    localStorage.clear();
// you can also like localStorage.removeItem('Token');
    window.location.href = "/login";
  }

  render() {
    return (
      <button onClick={this.logout}>Logout</button>
    )
  }
}

import React, { Component } from 'react'

export default class UserLogout extends Component {

logout = () => {

localStorage.clear();

// you can also like localStorage.removeItem('Token');

window.location.href = "/login";

}

render() {

return (

<button onClick={this.logout}>Logout</button>

)

}

Also Read: How to import or use images in ReactJS

Conclusion

I hope you found this tutorial helpful for your project. I hope you guys enjoy Client-Side Logout Functionality in React and keep learning!. If you face – we are here to solve your problems.

Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request

Pradeep Maurya

Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co