React.js useContext Hook Login User and Storing it Example Tutorial For Beginners 2020

To create a login functionality in a React.js application using the useContext hook to store and manage the logged-in user, follow these steps:

Step 1: Set up a new React.js project.

Create a new directory for your project, navigate to it in a terminal, and run the following command to create a new React.js project:

npx create-react-app sampleapp

Step 2: Create a UserContext.

Inside the src folder, create a new file named UserContext.js and add the following code:

import { createContext } from 'react';

const UserContext = createContext();

export default UserContext;

In the code above, we create a new context using the createContext function from React. This context will be used to store the logged-in user.

Step 3: Create a Login component.

Inside the src folder, create a new file named Login.js and add the following code:

import React, { useContext, useState } from 'react';
import UserContext from './UserContext';

function Login() {
  const { setUser } = useContext(UserContext);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

const handleLogin = (e) => {
    e.preventDefault();

// Perform login authentication
    // Replace this with your own login logic
    if (username === 'admin' && password === 'password') {
      setUser({ username });
    }
  };

return (
    <div>
      <h2>Login</h2>
      <form onSubmit={handleLogin}>
        <input
          type="text"
          placeholder="Username"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <button type="submit">Login</button>
      </form>
    </div>
  );
}

export default Login;

import React, { useContext, useState } from 'react';

import UserContext from './UserContext';

function Login() {

const { setUser } = useContext(UserContext);

const [username, setUsername] = useState('');

const [password, setPassword] = useState('');

const handleLogin = (e) => {

e.preventDefault();

// Perform login authentication

// Replace this with your own login logic

if (username === 'admin' && password === 'password') {

setUser({ username });

}

};

return (

<div>

<h2>Login</h2>

<input

type="text"

placeholder="Username"

value={username}

onChange={(e) => setUsername(e.target.value)}

<input

type="password"

placeholder="Password"

value={password}

onChange={(e) => setPassword(e.target.value)}

<button type="submit">Login</button>

</form>

</div>

);

}

export default Login;

In the code above, we import the necessary modules, including the UserContext that we created earlier.

Inside the Login component, we use the useContext hook to access the setUser function from the UserContext. This function will be used to update the logged-in user.

The component includes a login form with inputs for username and password. The handleLogin function is triggered when the form is submitted. Replace the login authentication logic with your own implementation. In this example, we perform a simple check for a hardcoded username and password combination. If the authentication is successful, we update the user using the setUser function from the context.

Step 4: Create a Home component.

Inside the src folder, create a new file named Home.js and add the following code:

import React, { useContext } from 'react';

import UserContext from './UserContext';

function Home() {

const { user } = useContext(UserContext);

return (

<div>

<h2>Welcome, {user.username}</h2>

<button onClick={() => setUser(null)}>Logout</button>

</div>

);

}

export default Home;

Step 5: Update the App component.

Inside the src folder, open the App.js file and update it with the following code:

import React, { useState } from 'react';

import UserContext from './UserContext';

import Login from './Login';

import Home from './Home';

function App() {

const [user, setUser] = useState(null);

return (

<UserContext.Provider value={{ user, setUser }}>

{user ? <Home /> : <Login />}

</div>

</UserContext.Provider>

);

}

export default App;

In the code above, we import the necessary modules, including the UserContext and the Login and Home components.

Inside the App component, we use the useState hook to initialize the user state variable as null. The setUser function is used to update the user state.

We wrap the entire application with the UserContext.Provider component and provide the user and setUser values to the context. This allows the components within the provider to access and modify the logged-in user.

The conditional rendering in the App component displays either the Home component or the Login component based on whether the user is logged in or not.