How to Store a logged-in User Information in Local Storage in React JS

In React, localStorage is the browser’s database. The data is stored inside your browser in your computer’s local storage. localStorage is specific to an origin. In other words, the localStorage for one website can’t be accessed by others.

To begin with we shall create the basic react function in App.js component

import React, { useState } from "react";
import axios from "axios";
const App = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [user, setUser] = useState()
  const handleSubmit = async e => {
  };
// if there's a user show the message below
  if (user) {
    return <div>{user.name} is loggged in</div>;
 }
  // if there's no user, show the login form
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="username">Username: </label>
      <input
        type="text"
        value={username}
        placeholder="enter a username"
        onChange={({ target }) => setUsername(target.value)}
/>
      <div>
        <label htmlFor="password">password: </label>
        <input
          type="password"
          value={password}
          placeholder="enter a password"
          onChange={({ target }) => setPassword(target.value)}
        />
      </div>
      <button type="submit">Login</button>
    </form>
  );
};
export default App;

Here we have created an App function(), in which we created a login form using html tags .Using the useStates we are storing the input value data in its particular states.  

 we have specify an asynchronous handleSubmit function to process the login request. We have also defined a conditional that displays a user.name is logged in message if we have a login user, and the login form if we do not have a user.

Next we are creating a handleSubmit function which will be clicked once the user has entered the user name and password.

const handleSubmit = async e => {
  e.preventDefault();
  const user = { username, password };
  // send the username and password to the server
  const response = await axios.post(
    "http://xyz/login",
    user
  );
  // set the state of the user
  setUser(response.data)
  // store the user in localStorage
  localStorage.setItem('user', response.data)
  console.log(response.data)
};

If the login credentials are successful we are using asyn-await to send the post api call, which is taking the stored username and password state to send as payload for the successful post api call.

After the api call we are using another setState that is setUser wich is storing the successful api response data. We are using setState for updating the state and the stored value will be available in the (user) state,Which is dynamically being used to display the logged in user text on the webpage.

Lastly we have used LocalStorage setItem which is used to store data in the localStorage. Here we are passing (‘user’, response.data) in the setItem paramter.

If we console log response.data we will be displayed with the api response in the console. 

We Should receive the following as a response. The userID, token and username.

Output

LocalStorage