Skip to content
Related Articles

Related Articles

How to log-out user from app using ReactJS ?

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Medium
  • Last Updated : 10 Mar, 2022

The objective of this article is to how we can set up, log out a user and retrieve data from local memory User Browser storage in the React app. During the sign-in session, we will save the user details to browser local storage, and also during the time of logout, we will remove the user’s details from the local storage. 

LocalStorage is a web-based data storage device for a local user, which means that the data is stored in the browser sessions and the database does not have an expiration date. Through this local storage, we will perform log-out user of Reactjs app.

Approach: We will use the following steps:

  • First of all, we create a react app using the create-react-app command.
  • Create 3 input fields and 3 states to hold the data.
  • Create a new state isLoggedin and some code we will write.
  • Create login and logout function.

Creating React App:

Step 1: Create a React application using the following command.

npx create-react-app my-app

Step 2: After creating your project folder(i.e. my-app), move to it by using the following command.

cd my-app 

Step 3: Run the Application using the following command.

npm run start

After running these commands you will see the default react web interface. 

Project structure: It will look like this.

project directory 

Example: Write down the following code in the App.js file. We have created a form of 3 input fields and 3 states. We have used isLoggedin state as it will show user logged in or not. We have created a login and logout functions.

Filename: App.js


import { useState } from 'react';
import './App.css';
function App() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isLoggedin, setIsLoggedin] = useState(false);
  const login = (e) => {
    console.log(name, email, password);
    const userData = {
    localStorage.setItem('token-info', JSON.stringify(userData));
  const logout = () => {
  return (
      <div style={{ textAlign: 'center' }}>
        <h1>This is React WebApp </h1>
        {!isLoggedin ? (
            <form action="">
                onChange={(e) => setName(}
                onChange={(e) => setEmail(}
                onChange={(e) => setPassword(}
              <button type="submit" onClick={login}>
        ) : (
            <h1>User is logged in</h1>
            <button onClickCapture={logout}>logout user</button>
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project.


npm run start





My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!