To handle user authentication with ReactJS

Hello! in this write up we are going to build a brand new application in ReactJS from scratch to handle authentication parts in Front end.

Road Map

1. To setup service API for our application
2. Create application boilerplate using Create React App
3. To configure routes for our application screens
4. To handle CSS Encapsulation
5. Template design for Register Component
6. Form Validation for Register Component
7. Service integration for our Registration Form
8. To handle user login
9. To design dashboard component
10. To configure dashboard as Protected Route in UI

Road Map may be crazy 😝

To setup service API for our application.

Every front end application needs - Service API to drive the data in User Interface.

lets configure our back-end services in our local environment.

Clone this project for setting up service API. If you are interested in building the service APIs from scratch, go here)

Once code gets downloaded. Lets do some changes to enable CORS for our services.

By default, UI and service under same domain can talk to each other (same origin). To make Service accessible to the code running from other domains, we need to forcefully enable CORS mechanism

Run > npm i cors to install CORS middle-ware and update index.js as below

const cors = require("cors");
...
dotenv.config();
app.use(cors()); // By doing this, CORS headers are attached to keep the service API accessible from other domain
// connect to db
mongoose.connect(
...
...
app.listen(3001, () => console.log("server is running...")); // update the port from 3000 to 3001

Note — since React Project uses port 3000 as default to run its development server, lets change the port for back end services to run at 3001

Run > npm install & npm start to bring up our services. They are,

1. /user/login — API to handle user authentication
2. /user/register — API to register the User details
3. /dashboard — API to display the mock dashboard and user detail content

Make sure services works with Postman.

Illustration for service API usage

I have created a remote GitHub repository to track our journey. To setup remote repository refer it here

Lets start our front end development.

Create application boilerplate using Create React App

Lets start by creating a boilerplate for our application development. To do that, go to workspace folder and run the command below

C:\workspace > npx create-react-app auth-using-react
C:\workspace > cd auth-using-react
C:\workspace > npm start

We have created boilerplate using create-react-app.

Advantage of using it is, it comes with pre-configured setup to handle our application’s non functional parts like to run on development mode, production build and to run tests etc.

In few seconds, We should see our application is running at http://localhost:3000/

React App generated with Create React App

To configure routes for our application screens

Routes and navigation plays an important role in single page applications to load the user requested components

We are going design 3 pages for our application. They are,

1. Login — Public URL path anyone can access
2. Register — Public URL path anyone can access
3. Dashboard — Protected URL path, only authenticated user can access.

To handle pagination in react application we use a third-party plugin react-router-dom

Stop the application and run the command below.

C:\workspace > npm i react-router-dom

Lets create a Pages folder and create separate folders for each page.

folder structure

// Dashboard.js
import React from "react";
const Dashboard = () => <h1>Dashboard Page</h1>;
export default Dashboard;
// Login.js
import React from "react";
const Login = () => <h1>Login Page</h1>;
export default Login;
// Register.js
import React from "react";
const Register = () => <h1>Register Page</h1>;
export default Register;
// NotFound.js
import React from "react";
const NotFound = () => <h1>Page Not Found Page</h1>;
export default NotFound;

We have created a mock text response to display the page details when we navigate to the corresponding route.

When user tries to navigate to the path which is not configured in our application then component NotFound is displayed to the user, something like page not found screen in real world.

Lets create a Routes.js under src folder

import React from "react";
import {
  Route,
  BrowserRouter as Router,
  Switch,
  Redirect,
} from "react-router-dom";
import Login from "./Pages/Login/Login";
import Register from "./Pages/Register/Register";
import Dashboard from "./Pages/Dashboard/Dashboard";
import NotFound from "./Pages/NotFound/NotFound";
const Routes = (props) => (
  <Router {...props}>
    <Switch>
      <Route path="/login">
        <Login />
      </Route>
      <Route path="/register">
        <Register />
      </Route>
      <Route path="/dashboard">
        <Dashboard />
      </Route>
      <Route exact path="/">
        <Redirect to="/dashboard" />
      </Route>
      <Route path="*">
        <NotFound />
      </Route>
    </Switch>
  </Router>
);
export default Routes;

In the code above, we declare the router configurations for our application routes.

Route component accepts path property and Component to be passed via Content Projection (If you came from Angular background you can relate. Reference for others)

Additionally — we did,

1. Default Route redirection (to dashboard) when user hits base URL
2. handled page not found part.

Lets go to App.js, index.js and update the code to render the routes.

//App.js
const App = (props) => props.children;
export default App;
//index.js
import Routes from "./Routes";
ReactDOM.render(<Routes />, document.getElementById("root"));

In App.js, we just return the projected content or children elements. It means App component acts as a router outlet/wrapper for our application.

In index.js, we removed App component from the ReactDOM.render and added <Routes/> we declared.

😲

To show page navigation

Lets focus on Register component, to make it functional.

To handle CSS Encapsulation

CSS — by native, wont support encapsulation.

It means, suppose two components renders in a same page and both component has same class name(e.g. — container) but different styling for each (Component A — Red background color, Component B — Blue background color).

While rendering, browser will pick up the styling from the last style declaration given for the class name.

To avoid the CSS class name collision. our boilerplate code generated using create-react-app supports CSS modules out of box.

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

We have to declare our CSS filename as file-name.module.css and import it in the component as JavaScript object to use it. Lets see the samples

// Register.module.css
.sample {
  background-color: red;
}
// Register.js
import React from "react";
import styles from "./Register.module.css";
const Register = () => <h1 className={styles.sample}>Register Page</h1>; // using sample class from Register.module.css
export default Register;

In code above, we imported our CSS file Register.module.css and used as Plain JavaScript Object E.g.styles.sample

CSS Module hashes the class name to keep it unique.

Template design for Register Component

Lets bring bootstrap into picture to speed up our template design. Stop development server and run the command > npm i bootstrap and then > npm start

import bootstrap in index.js

...
import "bootstrap/dist/css/bootstrap.css";
import "./index.css";
...

We have came up with a template for registration form

If you noticed — instead of class and for we have used className and htmlFor. Because code we write here is not a HTML, its JSX - syntax extension to JavaScript.

It means at end of result everything we write in component function will be compiled to JavaScript since class and for are reserved keywords in JavaScript we cant use it here.

We have brought up this form template with bootstrap and CSS modules to encapsulate styles for our component.

We have used <Link> component from react-router-dom in order to handle navigation to login path, when user clicks cancel link.

I would prefer writing Functional components rather than Class based since its simple to treat component as functions and keep them as pure.

Registration Form designed with bootstrap and CSS Modules

Form Validation for Register Component

Any form is not fruitful, until - its validated

Lets validate our form. To do that I am going to use react hook’s based form validation plugin react-hooks-form,

React Hooks is a feature, which helps developer to manage or hold the logic of the state inside functional component.

Stop our server and run > npm i react-hook-form and start our server with > npm start

import React from "react";
import styles from "./Register.module.css";
import { useForm } from "react-hook-form"; // import useForm hooks
import { Link } from "react-router-dom";
const Register = () => {
const { register, handleSubmit, errors } = useForm();
...
...

We imported useForm Hook from react-hook-form and de-structured its APIS.

1. register — callback function which accepts the configuration for our form field validation
2. handleSubmit — callback function that accepts submit function as an argument and it executes the function, once form is valid
3. error — This is plain JavaScript object which contains all our validation error messages.

Lets implement validation for email field with following rules

1. email field should not be an empty declaration
2. it should be a valid email address
3. email id should be minimum of 6 characters and maximum of 255 characters are allowed

// Register.module.css
...
...
.errorMessage {
  font-size: 12px;
  letter-spacing: 0.05rem;
  padding-left: 0.25rem;
}
// Register.js
...
...
const Register = () => {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = (data) => console.log(data);
return (
    ...
    ...
          <form onSubmit={handleSubmit(onSubmit)} noValidate autoComplete="off">
            <div className="form-group">
              <label htmlFor="inputForEmail">Email address</label>
              <span className="mandatory">*</span>
              <input
                id="inputForEmail"
                name="email"
                type="email"
                className="form-control"
                aria-describedby="Enter email address"
                placeholder="Enter email address"
                ref={register({
                  required: {
                    value: true,
                    message: "Please enter your email address",
                  },
                  pattern: {
                    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                    message: "Enter a valid email address",
                  },
                  minLength: {
                    value: 6,
                    message: "Minimum 6 characters are allowed",
                  },
                  maxLength: {
                    value: 255,
                    message: "Maximum 255 characters are allowed",
                  },
                })}
              />
              {/**
               * we provide validation configuration for email field above
               * error message are displayed with code below
               */}
              {errors.email && (
                <span className={`${styles.errorMessage} mandatory`}>
                  {errors.email.message}
                </span>
              )}
            </div>

In code above, we have provided ref by calling the register callback with validation configuration

Validation errors are displayed at the bottom of form field with errors object.

I will provide the complete code for registration shortly, meanwhile — you can try applying validation for other fields. (I have used same validation we used in service API for our form validation here)

showing form validation part for registration

Service integration for our Registration Form

Its time to integrate the pipeline 🔧 🔨 ⚒ 🛠, service integration 🔈 🔉 🔊

Lets create a file config.js under src to hold our baseUrl

// src/config.js
const config = {
  baseUrl: "http://localhost:3001/api", //no trialing slash here
};
export default config;

Lets start writing our logic in onSubmit function in Register.js

import React, { useState } from "react";
..
..
import config from "../../config";
..
..
const [message, setMessage] = useState();
const onSubmit = (data, e) => {
    setMessage({
      data: "Registration is in progress...",
      type: "alert-warning",
    });
    fetch(`${config.baseUrl}/user/register`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    })
      .then((res) => res.json())
      .then((data) => {
        const hasError = "error" in data && data.error != null;
        setMessage({
          data: hasError ? data.error : "Registered successfully",
          type: hasError ? "alert-danger" : "alert-success",
        });
         !hasError && e.target.reset();
      });
  };

To show the real time response to the user we used bootstrap alert and declared a stateful variable message via useState hook

We used native fetch API to trigger post request and handled the success on promise callback.

We set the message based on the return response (success or error) and we reset the form values using native reset API from the form target element.

Hurray! we are able to register our user 🙂 🙃🙂. Please find the complete register component code as below

Register.js

😜

To handle user login

Lets start designing our login component.

We will reuse some form templates and some validation parts from register component and our login component code is below.

Login.js

In Login component, i used react-hook-form for handling minimal validation and all other validations are handled by service API and returned error messages are shown to the User in bootstrap alert.

Once login is successful, we persist the authentication token in localStorage API and redirects to our dashboard page

To navigate from JavaScript code, we used history from useHistory react hooks and we pushed the current path (/dashboard) which we would like to navigate once login succeed

To design dashboard component

Lets start designing our dashboard to display the content from dashboard service API

In code above,

1. We create a stateful variable dashboard to store the dashboard content from service API response.
2. written a function to handle logout action where we clear the token from local persistence layer and redirect to login
3. useEffect is a react hook used for the purpose of componentDidMount. We need to pass an empty array as second argument otherwise the callback function in the first argument will be called for each rendering.
4. In the callback function, we fetch dashboard content by passing valid token which we persisted in localStorage once login was successful.
5. At last the Dashboard functional component returns the template.

We pass the authentication token in the request header to dashboard service API, since its a protected route.

To configure dashboard as Protected Route in UI

Finally lets see, how can we mark dashboard URL path as a protected route.

Route that can be accessed only by the authenticated user is Protected route.

In routes.js lets update code below

...
...
// function to guard the component for private access
const authGuard = (Component) => () => {
  return localStorage.getItem("token") ? (
    <Component />
  ) : (
    <Redirect to="/login" />
  );
};
const Routes = (props) => (
  <Router {...props}>
    <Switch>
      ...
      <Route path="/register">
        <Register />
      </Route>
      <Route path="/dashboard" render={authGuard(Dashboard)}> </Route>
      <Route exact path="/">
        <Redirect to="/dashboard" />
      </Route>

We written a curry function authGuard where component is passed as an argument and it returns a callback function that can be used for rendering.

In authGuard function, We check the token availability from our local persistence layer and navigate to Route component passed as an argument, otherwise redirect to /login path

While declaring <Route> Component for Dashboard we use authGuard function in the render property to avoid the unauthorized access.

You can get complete source code here and frames to illustrate our application

Illustration of our application

👍

Hope we learnt something with ReactJS and some more plugins which facilitated us to complete our application.

Happy coding 💻 ⌨ 🖥