LogIn / LogOut process using reactjs and Drupal REST APIs

Introduction
A RESTful API, also known as a RESTful web service or just REST API, which means Representational State Transfer (REST), is an architectural style and an approach to communications between services that are online & often used in Web Services / Web API development

Way to create login form in ReactJS using secure REST API

1. Create secure REST API
RESTful Web Services API overview (https://www.drupal.org/docs/drupal-apis/restful-web-services-api/restful-web-services-api-overview)
To create login application, we need secure REST API to integrate into the application. So we have used the REST API of Drupal instance for authentication.
By default, the REST module enables the node entity resource for all GET, POST, PATCH, and DELETE operations. You can see these default settings in sites/default/files/config_XXXX/active/rest.settings.yml
To enable the user entities use https://www.drupal.org/project/restui module. This module provides a user interface for enabling and disabling resources, serialization formats, and authentication providers.
Once module is installed, go on to this link /admin/config/services/rest and enable user entity API. GET method must be enable. You can take a look on below screenshot.

rest_resourcess
resource_user

We can use Postman - REST client to test the web services.
Postman is a collaboration platform for API development. Postman's features simplify each step of building an API and streamline collaboration so you can create better APIs—faster. For more info visit https://www.postman.com/
Example:
User login REST API

BaseURL: http://example.com
END POINT:/entity/user?_format=json
Content-Type:application/json
Method:POST
Body:
{
"name" : "admin",
"pass": "myPassword"
}

User Register REST API

BaseURL: http://example.com
END POINT:/user/register?_format=json
Content-Type:application/json
Method:POST
Body:
{
"_links" : {
“type” : {
"href" : "http://example.com/node"
}
},
"name" : {
"value" : "username"
},
"mail" : {
"value" : "example@gmail.com"
},
"pass" : {
"value" : "password"
}
}

2. Setup react application
To Implement the login functionality in react, you need to setup first the react Application
Following link will help you to create basic react application.
https://www.osseed.com/blog/reactjs-create-simple-react-app

3. Create React components like Home, LogIn/Logout
* Home component (Access it with/without login) – It’s a simple component which we can access it with/without user login. By default we’ll open this component.
* Login component (Access it without login only) – Here we will create a login page. So with the help of it we can call the REST API and on successful call we will redirect it on the Dashboard component.
Refer below link if you are not aware about creating routing in react.
Routing in React JS (https://www.cluemediator.com/routing-react-js)
Below are the Demo code to create Login and Home page
For demo purpose we are creating these components in “src” directory.

import React from 'react';
import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom';

import Login from './Login';
import Dashboard from './Dashboard';
import Home from './Home';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <div>
          <div className="header">
            <NavLink exact to="/">Home</NavLink>
            <NavLink to="/login">Login</NavLink>
            <NavLink to="/dashboard">Dashboard</NavLink>
          </div>
          <div className="content">
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/login" component={Login} />
              <Route path="/dashboard" component={Dashboard} />
            </Switch>
          </div>
        </div>
      </BrowserRouter>
    </div>
  );
}

export default App;

import React from 'react';

function Dashboard(props) {
  // get the user data from the session storage
  const user = sessionStorage.getItem('user');
  if (user) return JSON.parse(user);
  else return null;

  // handle click event of logout button
  const handleLogout = () => {
    // remove the token and user from the session storage
    sessionStorage.removeItem('token');
    sessionStorage.removeItem('user');
    props.history.push('/login');
  }

  return (
    <div>
      Welcome {user.name}!<br /><br />
      <input type="button" onClick={handleLogout} value="Logout" />
    </div>
  );
}

export default Dashboard;

import React from 'react';

function Home() {
  return (
    <div>
      Welcome to the Home Page!
    </div>
  );
}

export default Home;

import React, { useState } from 'react';

function Login(props) {
  const [loading, setLoading] = useState(false);
  const username = useFormInput('');
  const password = useFormInput('');
  const [error, setError] = useState(null);

  // handle button click of login form
  const handleLogin = () => {
    setError(null);
    setLoading(true);
    // API something like http://example.com/user/login
    fetch(API, { name: username.value, pass: password.value }).then(response => {
      setLoading(false);
      // set the token and user from the session storage
      sessionStorage.setItem('token', response.data.token);
      sessionStorage.setItem('user', JSON.stringify(response.data.user));
      props.history.push('/dashboard');
    }).catch(error => {
      setLoading(false);
      if (error.response.status === 401) setError(error.response.data.message);
      else setError("Something went wrong. Please try again later.");
    });
  }

  return (
    <div>
      Login<br /><br />
      <div>
        Username<br />
        <input type="text" {...username} autoComplete="new-password" />
      </div>
      <div style={{ marginTop: 10 }}>
        Password<br />
        <input type="password" {...password} autoComplete="new-password" />
      </div>
      {error && <><small style={{ color: 'red' }}>{error}</small><br /></>}<br />
      <input type="button" value={loading ? 'Loading...' : 'Login'} onClick={handleLogin} disabled={loading} /><br />
    </div>
  );
}

const useFormInput = initialValue => {
  const [value, setValue] = useState(initialValue);

  const handleChange = e => {
    setValue(e.target.value);
  }
  return {
    value,
    onChange: handleChange
  }
}

export default Login;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
 
ReactDOM.render(<App />, document.getElementById('root'));

i: For managing login and logout functionality, we need to use sessionStorage which will help us to manage token and user data.
ii: Integrate sign in API
Let’s integrate the “/user/login” API on the click event of the login button. Refer to the below link if you don’t know how to call API in ReactJS.
API call in React JS (https://www.cluemediator.com/api-call-react-js )
Here, we used fetch method to make API calls and set data into sessionStorage. After successful login, we are storing the response data in sessionStorage and redirect it to the dashboard page. Also managing the loading and error flag via useState.

4. Manage the logout in dashboard
On click of the Logout button, we are removing the data from the sessionStorage and redirect it to the login page. Also we are showing the user name on page of the Dashboard.