Forem: Sanjay Arya

Dynamic Environment Variables for Dockerized React Apps

Sanjay Arya — Sat, 21 Oct 2023 12:32:41 +0000

When Dockerizing a service, such as a NestJS project, it's common to create a Docker image that contains the built NestJS code. When this Docker image is run in different deployment environments like Dev, QA, UAT, and Production, we typically provide the necessary environment values through Environment Variables or a .env file. These values are then used by the NestJS project. However, handling environment variables in a React project is not as straightforward.

Let's start by creating a React project to illustrate the issue and how to solve it. You can create a React project using the following command:

npm create vite@latest react-env

Choose 'React' as the framework and 'JavaScript' as a variant. Once the project is created, ensure that all dependencies are installed by running:

npm install

Now, you can launch the React project with:

npm run dev

Your App.jsx file will look like this:

import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>
        <a href='https://vitejs.dev' target='_blank'>
          <img src={viteLogo} className='logo' alt='Vite logo' />
        </a>
        <a href='https://react.dev' target='_blank'>
          <img src={reactLogo} className='logo react' alt='React logo' />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className='card'>
        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className='read-the-docs'>Click on the Vite and React logos to learn more</p>
    </>
  );
}

export default App;

Suppose you want the title Vite + React, to be loaded from an environment variable. Create a .env file as follows:

.env

VITE_TITLE=Dockerization

Replace <h1>Vite + React</h1> with <h1>{import.meta.env.VITE_TITLE}</h1> to make use of the VITE_TITLE environment variable. Now, the title is sourced from the .env file. Let's create two more environment variables.

.env

VITE_SUB_TITLE=Multi Stage
VITE_ENVIRONMENT=DEVELOPMENT

You can display the sub-title and environment below the heading like this:

<h1>{import.meta.env.VITE_TITLE}</h1>
<h4>{import.meta.env.VITE_SUB_TITLE}</h4>
<h1>{import.meta.env.VITE_ENVIRONMENT}</h1>

Everything seems to be working well. However, when we move to production, it's important to separate the development environment from the production environment. To do this, create another .env file specifically for production, .env.production, to avoid mixing development environment variables with production.

.env.production

VITE_TITLE=Dockerization
VITE_SUB_TITLE=Multi Stage
VITE_ENVIRONMENT=PRODUCTION

Here, we've set VITE_ENVIRONMENT to PRODUCTION. Now, let's create a Dockerfile to build the image and a .dockerignore file to exclude the .env file from being copied into the Docker image.

.dockerignore

# Versioning and metadata
.git
.gitignore
.dockerignore

# Build dependencies
dist
build
node_modules
coverage

# Environment (contains sensitive data)
.env

# Files not required for production
.editorconfig
Dockerfile
README.md
tslint.json
nodemon.json

By including .env in the .dockerignore file, Docker is instructed to exclude the .env file when copying files into the Docker image during the build process. Note that we are only excluding the .env file and not the .env.production file.

Here's what the Dockerfile looks like:

Dockerfile

# Stage 1: Build Image
FROM node:18-alpine as build
RUN apk add git
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Stage 2, use the compiled app, ready for production with Nginx
FROM nginx:1.21.6-alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY /nginx-custom.conf /etc/nginx/conf.d/default.conf

We are using a multi-stage build. The Node image is used as a build image, and RUN npm run build is used to build the project. After building, we get a dist folder, which we copy into the Nginx image using COPY --from=build /app/dist /usr/share/nginx/html. Additionally, we copy the nginx-custom.conf file from the project into the Docker image.

Normally, when user visit a URL, Nginx will look for a file at the provided route under /usr/share/nginx/html and serve it to the user. However, in the case of a Single Page Application (SPA) like React, routes are usually virtual. For instance, when a user visits the /login or /register route, there are no physical /login or /register files within the project. These routes are defined virtually in the project using libraries like React Router. Therefore, we need to instruct Nginx to return index.html when a route results in a 404 (Not Found) error. index.html serves as the entry point for the React app, and this allows React to handle the route.

Here's what the nginx-custom.conf file looks like:

nginx-custom.conf

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
}

Nginx is configured to listen on port 80. Now, let's build and run the project.

To build the Docker image, use the following command:

docker build -t react-env .

With the Docker image in hand, you can run it using the following command:

docker run -p 3000:80 react-env

In the above command, we map the Nginx port 80 to the localhost port 3000. Typically, port 80 and 443 require root access, but by mapping to a different port, you can access the React app at http://localhost:3000. You will see the title Dockerization, sub-title Multi Stage and environment PRODUCTION. These values are sourced from the .env.production file.

However, this setup still leaves us with an issue: how to provide environment values depending on the deployment environment. Let's say we want to see QA instead of PRODUCTION from the .env.production file, when deploying the React app to the QA environment. How can we achieve this?

Providing VITE_ENVIRONMENT=QA through the .env file or an environment variable during docker run won't work. This is because when we build the project, the references to environment variables are replaced with the values provided during the build.

For example, import.meta.env.VITE_TITLE is replaced with Dockerization, import.meta.env.VITE_SUB_TITLE is replaced with Multi Stage, and import.meta.env.VITE_ENVIRONMENT is replaced with PRODUCTION.

After the build, we have hardcoded values: Dockerization, Multi Stage and PRODUCTION because that's what we provided during the build.

So, what's the solution?

One way is to find all occurrences of the PRODUCTION keyword and replace it with the value we want, which is QA.

You can use the following command to search through all the files under /usr/share/nginx/html (where the project exists). If the PRODUCTION keyword is found, it will be replaced with QA:

find /usr/share/nginx/html -type f -exec sed -i "s|PRODUCTION|QA|g" '{}' +

However, there's a problem with this approach. If PRODUCTION appears anywhere in the project that's not sourced from the .env.production file during build, it will also be replaced, which is not the desired outcome.

Additionally, if you have multiple environment variables with the same value during the build, for example:

.env.production

VITE_TITLE=Dockerization
VITE_SUB_TITLE=Dockerization
VITE_ENVIRONMENT=PRODUCTION

You might want the title and sub-title to be Dockerization during build, but in QA, you want the title to be Dockerization for QA and the sub-title to be Multi Stage build for QA.

When you run the following command to replace Dockerization:

find /usr/share/nginx/html -type f -exec sed -i "s|Dockerization|Dockerization for QA|g" '{}' +

It will replace both the title and sub-title with Dockerization for QA. If you run the next command to replace the sub-title, you'll get Multi Stage build for QA for QA, which is not the desired outcome.

So, what's the solution to these challenges?

You can use a dummy value during build time. In this case, let's use VITE_TITLE=MY_APP_TITLE. This approach not only allows you to replace values based on the environment, but it also makes your solution more flexible for different projects.

Now, your .env.production file will look like this:

VITE_TITLE=MY_APP_TITLE
VITE_SUB_TITLE=MY_APP_SUB_TITLE
VITE_ENVIRONMENT=MY_APP_ENVIRONMENT

Since all environment values now start with MY_APP_, you can create a script that looks for all environment variables starting with MY_APP_ and performs replacements for each of them. Create a shell script called .env.sh inside your project:

~~env.sh~~

#!/bin/sh
for i in $(env | grep MY_APP_)
do
    key=$(echo $i | cut -d '=' -f 1)
    value=$(echo $i | cut -d '=' -f 2-)
    echo $key=$value
    # sed All files
    # find /usr/share/nginx/html -type f -exec sed -i "s|${key}|${value}|g" '{}' +

    # sed JS and CSS only
    find /usr/share/nginx/html -type f \( -name '*.js' -o -name '*.css' \) -exec sed -i "s|${key}|${value}|g" '{}' +
done

Updated env.sh Script

#!/bin/sh
# Generate sed script file
sed_script="/tmp/sed_script.sed"
> "$sed_script"

# Ensure the sed script file is cleaned up on exit
trap 'rm -f "$sed_script"' EXIT

# Extract MY_APP_ environment variables and build the sed expression
env | grep '^MY_APP_' | while IFS='=' read -r key value; do
    # Escape slashes and other special characters in key and value
    escaped_key=$(printf '%s' "$key" | sed 's/[\/&]/\\&/g')
    escaped_value=$(printf '%s' "$value" | sed 's/[\/&]/\\&/g')
    # Append to sed script file
    echo "s|${escaped_key}|${escaped_value}|g;" >> "$sed_script"
done

# Check if the sed script file was created and is not empty
if [ ! -s "$sed_script" ]; then
    echo "No MY_APP_ environment variables found. Exiting with error."
    exit 1
fi

# sed All files
find /usr/share/nginx/html -type f -exec sed -i -f "$sed_script" '{}' +

# sed JS and CSS only
# find /usr/share/nginx/html -type f \( -name '*.js' -o -name '*.css' \) -exec sed -i -f "$sed_script" '{}' +

Performance Improvement with env.sh
In the previous approach, the script processed each environment variable individually, running a sed operation for each file and environment variable. For example, if you had 10 environment variables and 1,000 files, this would result in 10,000 sed operations—one for each combination.

With the updated script, we consolidate all the sed expressions into a single file (sed_script) and apply them to all files in one go. This reduces the number of operations significantly:

Old approach: 10 environment variables × 1,000 files = 10,000 sed operations
New approach: 1 sed_script × 1,000 files = 1,000 sed operations

By batching the sed replacements, the new method dramatically improves performance, especially in scenarios with a large number of environment variables and files.

To make the script executable, you can update the Dockerfile to run the env.sh file when starting the Docker image. Add the following lines at the end of the Dockerfile:

COPY env.sh /docker-entrypoint.d/env.sh
RUN chmod +x /docker-entrypoint.d/env.sh

Nginx Docker images typically look for script files inside the /docker-entrypoint.d folder. Any scripts found there are executed before the Nginx service starts. Since you placed your env.sh file inside the /docker-entrypoint.d folder, your provided environment variables will be replaced as desired before the Nginx service starts, ensuring that your React app functions correctly.

Here's what the final Dockerfile looks like:

# Stage 1: Build Image
FROM node:18-alpine as build
RUN apk add git
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Stage 2, use the compiled app, ready for production with Nginx
FROM nginx:1.21.6-alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY /nginx-custom.conf /etc/nginx/conf.d/default.conf
COPY env.sh /docker-entrypoint.d/env.sh
RUN chmod +x /docker-entrypoint.d/env.sh

Now, when you run the Docker image, you can easily provide the environment variables you need, and they will be used by the React app:

docker run -p 3000:80 -e MY_APP_TITLE=Dockerization -e MY_APP_ENVIRONMENT=Production react-env

This approach allows you to customize your environment variables based on the deployment environment, making your React project more versatile and suitable for various scenarios.

Additional Resources

For access to the code and examples discussed in this article, visit the GitHub repository.

Feel free to explore the code and adapt it to your specific project requirements.

Streamline Task Automation and Management with Scheduler Service

Sanjay Arya — Tue, 03 Oct 2023 10:35:10 +0000

In today's fast-paced software development landscape, automating tasks and managing job schedules are essential for optimizing efficiency and productivity. Whether you are building a web application, microservices architecture, or any software system, automating repetitive tasks can save time, reduce errors, and ensure timely execution.

The Need for a Scheduler Service

Imagine you have a complex application with various components and services. Some tasks need to run periodically, like sending email notifications, generating reports, or performing data backups. Manually managing these tasks can be cumbersome, error-prone, and time-consuming. This is where a Scheduler Service becomes indispensable.

Here are some scenarios that highlight the need for a Scheduler Service:

Automated Routine Tasks: Many applications have routine tasks that need to run at specific intervals. For example, a social media platform might need to archive old posts every week, or an e-commerce site could generate daily sales reports.
Timely Notifications: If your application sends notifications or reminders to users, you need a way to trigger these notifications at the right time, be it for appointment reminders, subscription renewals, or event notifications.
Data Processing: Batch data processing tasks, such as data synchronization, indexing, or data cleanup, often require scheduled execution to keep your application's data up to date and consistent.
Resource Optimization: Efficiently utilizing resources is crucial for server infrastructure. With a Scheduler Service, you can schedule tasks to run during off-peak hours, minimizing the impact on system performance.
Fault Tolerance: In case of task failures, a Scheduler Service can be configured to retry failed tasks, ensuring that critical processes are not derailed by occasional errors.

By automating these tasks with a Scheduler Service, you can free up valuable development time, reduce human error, and maintain the health and reliability of your applications.

Now that we understand the importance of a Scheduler Service, let's explore the features and capabilities of our Scheduler Service and learn how to get started with it.

Introducing Scheduler Service

Today, I'm excited to introduce the Scheduler Service — a tool I've developed with NestJS to assist with task automation and management. The Scheduler Service simplifies the process of creating, updating, and disabling schedules with support for both MySQL and MongoDB as the database backend. It provides the flexibility to execute jobs using REST and Kafka trigger methods.

This project, while modest in scope, is my first venture into open source contributions. It aims to solve a common problem faced in software development by offering a straightforward and reliable solution for scheduling tasks. I hope it proves to be a useful addition to your toolkit.

Explore Scheduler Service

If you're interested in simplifying task automation and management, you can explore the Scheduler Service here:

Scheduler Service on GitHub

Feel free to visit the GitHub repository to access the project, detailed documentation, and get started with the Scheduler Service today.

Thank you for considering the Scheduler Service for your task scheduling needs, and I appreciate your support as I embark on this open source journey.

JWT Authentication in React with react-router

Sanjay Arya — Sun, 28 May 2023 09:26:46 +0000

In this blog post, we'll explore the seamless integration of JWT authentication with React and react-router. We'll also learn how to handle public routes, secure authenticated routes, and utilize the axios library to make API requests with the authentication token.

Create a React Project

The following command will create a react project for us.

npm create vite@latest react-auth-demo

We will choose React as our framework and JavaScript as a variant.
To begin working on our project, we need to ensure that all dependencies are properly installed. We can achieve this by running

npm install

within our project directory. Once the installation process is complete, we can launch our React project using the command

npm run dev

Let's take these necessary steps to get our React project up and running smoothly.

Installing Dependencies for React-Router v6 and Axios

Before we proceed, let's ensure we have the necessary dependencies installed for our project. We'll start by installing react-router v6, which will handle routing within our React application. Additionally, we'll install Axios, a powerful library used for making API requests. By following these steps, we'll be equipped with the tools needed to implement seamless routing and perform efficient API communication. Let's begin by installing these dependencies.

npm install react-router-dom axios

Creating the AuthProvider and AuthContext in React
With our project set up and dependencies installed, we're ready to take the next step in implementing JWT authentication. In this section, we'll create an AuthProvider component and an associated AuthContext. These will enable us to store and share authentication-related data and functions throughout our application

In the following code snippet, we'll create the authProvider.js file located at src > provider > authProvider.js. Let's explore the implementation of the AuthProvider and AuthContext.

Import the necessary modules and packages:
- axios is imported from the "axios" package to handle API requests.
- createContext, useContext, useEffect, useMemo, and useState are imported from the "react" library.
```
import axios from "axios";
import {
  createContext,
  useContext,
  useEffect,
  useMemo,
  useState,
} from "react";
```
Create an authentication context using createContext():
- createContext() creates an empty context object that will be used to share the authentication state and functions between components.
```
const AuthContext = createContext();
```
Create the AuthProvider component:
- This component serves as the provider for the authentication context.
- It receives children as a prop, which represents the child components that will have access to the authentication context.
```
const AuthProvider = ({ children }) => {
  // Component content goes here
};
```
Define the token state using useState():
- token represents the authentication token.
- localStorage.getItem("token") retrieves the token value from the local storage if it exists.
```
const [token, setToken_] = useState(localStorage.getItem("token"));
```
Create the setToken function to update the authentication token:
- This function is used to set the new token value.
- It updates the token state using setToken_() and stores the token value in the local storage using localStorage.setItem().
```
const setToken = (newToken) => {
  setToken_(newToken);
};
```
Use useEffect() to set the default authorization header in axios and stores the token value in the local storage using localStorage.setItem():
- This effect runs whenever the token value changes.
- If the token exists, it sets the authorization header in axios and localStorage.
- If the token is null or undefined, it removes the authorization header from axios and localStorage.
```
useEffect(() => {
  if (token) {
    axios.defaults.headers.common["Authorization"] = "Bearer " + token;
    localStorage.setItem('token',token);
  } else {
    delete axios.defaults.headers.common["Authorization"];
    localStorage.removeItem('token')
  }
}, [token]);
```
Create the memoized context value using useMemo():
- The context value includes the token and setToken function.
- The token value is used as a dependency for memoization.
```
const contextValue = useMemo(
  () => ({
    token,
    setToken,
  }),
  [token]
);
```
Provide the authentication context to the child components:
- Wrap the children components with the AuthContext.Provider.
- Pass the contextValue as the value prop of the provider.
```
return (
  <AuthContext.Provider value={contextValue}>
    {children}
  </AuthContext.Provider>
);
```
Export the useAuth hook for accessing the authentication context:
- useAuth is a custom hook that can be used in components to access the authentication context.
```
export const useAuth = () => {
  return useContext(AuthContext);
};
```
Export the AuthProvider component as the default export:
- This allows other files to import and use the AuthProvider component as needed.
```
export default AuthProvider;
```

Complete Code:

import axios from "axios";
import { createContext, useContext, useEffect, useMemo, useState } from "react";

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  // State to hold the authentication token
  const [token, setToken_] = useState(localStorage.getItem("token"));

  // Function to set the authentication token
  const setToken = (newToken) => {
    setToken_(newToken);
  };

  useEffect(() => {
    if (token) {
      axios.defaults.headers.common["Authorization"] = "Bearer " + token;
      localStorage.setItem('token',token);
    } else {
      delete axios.defaults.headers.common["Authorization"];
      localStorage.removeItem('token')
    }
  }, [token]);

  // Memoized value of the authentication context
  const contextValue = useMemo(
    () => ({
      token,
      setToken,
    }),
    [token]
  );

  // Provide the authentication context to the children components
  return (
    <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
  );
};

export const useAuth = () => {
  return useContext(AuthContext);
};

export default AuthProvider;

In summary, this code sets up the authentication context using React's context API. It provides the authentication token and the setToken function to child components through the context. It also ensures that the default authorization header in axios is updated with the authentication token whenever it changes.

Creating Routes in React for JWT Authentication

To organize our routes effectively, we'll create a dedicated src > routes folder. Inside this folder, we'll create an index.jsx file, which will serve as the entry point for defining our application's routes. By structuring our routes in a separate folder, we can maintain a clear and manageable routing structure. Let's proceed with creating our routes and explore how we can incorporate JWT authentication into our React application.

Creating a ProtectedRoute Component for Authenticated Routes

In order to secure our authenticated routes and prevent unauthorized access, we'll create a dedicated component called ProtectedRoute. This component will serve as a wrapper for our authenticated routes, ensuring that only authenticated users can access them. By implementing this component, we can easily enforce authentication requirements and provide a seamless user experience. Let's create the ProtectedRoute.jsx file located at src > routes > ProtectedRoute.jsx and enhance the security of our application.

We start by importing the necessary dependencies from the react-router-dom library:

import { Navigate, Outlet } from "react-router-dom";
import { useAuth } from "../provider/authProvider";

We define the ProtectedRoute component, which will serve as a wrapper for our authenticated routes:

export const ProtectedRoute = () => {
  const { token } = useAuth();

  // Check if the user is authenticated
  if (!token) {
    // If not authenticated, redirect to the login page
    return <Navigate to="/login" />;
  }

  // If authenticated, render the child routes
  return <Outlet />;
};

Inside the ProtectedRoute component, we access the token from the useAuth custom hook provided by the AuthContext. This hook allows us to retrieve the authentication token stored in the context.
We then check if the token exists. If the user is not authenticated (token is falsy or null), we use the Navigate component from react-router-dom to redirect the user to the login page ("/login").
If the user is authenticated, we render the child routes using the Outlet component. The Outlet component acts as a placeholder that displays the child components defined in the parent route.

In summary, the ProtectedRoute component serves as a guard for authenticated routes. If the user is not authenticated, they will be redirected to the login page. If the user is authenticated, the child routes defined within the ProtectedRoute component will be rendered using the Outlet component.

This code allows us to easily protect specific routes and control access based on the user's authentication status, providing a secure navigation experience in our React application.

Deep dive into Routes
Now that we have our ProtectedRoute component and authentication context in place, we can proceed with defining our routes. By differentiating between public routes, authenticated routes, and routes for non-authenticated users, we can effectively handle navigation and access control based on JWT authentication. In this code snippet, we'll dive into the src > routes > index.jsx file and explore how we can incorporate JWT authentication into our routing structure. Let's get started!

Import necessary dependencies:
- RouterProvider and createBrowserRouter are components imported from the react-router-dom library. They are used for configuring and providing the routing functionality.
- useAuth is a custom hook imported from "../provider/authProvider". It allows us to access the authentication context.
- ProtectedRoute is a component imported from "./ProtectedRoute". It serves as a wrapper for authenticated routes.
```
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { useAuth } from "../provider/authProvider";
import { ProtectedRoute } from "./ProtectedRoute";
```
Define the Routes component:
- This functional component acts as the entry point for configuring the application routes.
```
const Routes = () => {
  const { token } = useAuth();
  // Route configurations go here
};
```
Access the authentication token using the useAuth hook:
- The useAuth hook is called to retrieve the token value from the authentication context. It allows us to access the authentication token within the Routes component.
```
const { token } = useAuth();
```
Define routes accessible to all users:
- The routesForPublic array contains route objects that can be accessed by all users. Each route object consists of a path and an element.
- The path property specifies the URL path for the route, and the element property contains the JSX element/component to render.
```
const routesForPublic = [
  {
    path: "/service",
    element: <div>Service Page</div>,
  },
  {
    path: "/about-us",
    element: <div>About Us</div>,
  },
];
```

Define routes accessible only to authenticated users:

The routesForAuthenticatedOnly array contains route objects that can be accessed only by authenticated users. It includes a protected root route ("/") wrapped in the ProtectedRoute component and additional child routes defined using the children property.

const routesForAuthenticatedOnly = [
  {
    path: "/",
    element: <ProtectedRoute />,
    children: [
      {
        path: "/",
        element: <div>User Home Page</div>,
      },
      {
        path: "/profile",
        element: <div>User Profile</div>,
      },
      {
        path: "/logout",
        element: <div>Logout</div>,
      },
    ],
  },
];

Define routes accessible only to non-authenticated users:
- The routesForNotAuthenticatedOnly array contains route objects that are accessible only to non-authenticated users. It includes a login route ("/login").
```
const routesForNotAuthenticatedOnly = [
  {
    path: "/",
    element: <div>Home Page</div>,
  },
  {
    path: "/login",
    element: <div>Login</div>,
  },
];
```
Combine and conditionally include routes based on authentication status:
- The createBrowserRouter function is used to create the router configuration. It takes an array of routes as its argument.
- The spread operator (...) is used to merge the route arrays into a single array.
- The conditional expression (!token ? routesForNotAuthenticatedOnly : []) checks if the user is authenticated (token exists). If not, it includes the routesForNotAuthenticatedOnly array; otherwise, it includes an empty array.
```
const router = createBrowserRouter([
  ...routesForPublic,
  ...(!token ? routesForNotAuthenticatedOnly : []),
  ...routesForAuthenticatedOnly,
]);
```
Provide the router configuration using RouterProvider:
- The RouterProvider component wraps the router configuration, making it available for the entire application.
```
return <RouterProvider router={router} />;
```

Complete Code:

import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { useAuth } from "../provider/authProvider";
import { ProtectedRoute } from "./ProtectedRoute";

const Routes = () => {
  const { token } = useAuth();

  // Define public routes accessible to all users
  const routesForPublic = [
    {
      path: "/service",
      element: <div>Service Page</div>,
    },
    {
      path: "/about-us",
      element: <div>About Us</div>,
    },
  ];

  // Define routes accessible only to authenticated users
  const routesForAuthenticatedOnly = [
    {
      path: "/",
      element: <ProtectedRoute />, // Wrap the component in ProtectedRoute
      children: [
        {
          path: "/",
          element: <div>User Home Page</div>,
        },
        {
          path: "/profile",
          element: <div>User Profile</div>,
        },
        {
          path: "/logout",
          element: <div>Logout</div>,
        },
      ],
    },
  ];

  // Define routes accessible only to non-authenticated users
  const routesForNotAuthenticatedOnly = [
    {
      path: "/",
      element: <div>Home Page</div>,
    },
    {
      path: "/login",
      element: <div>Login</div>,
    },
  ];

  // Combine and conditionally include routes based on authentication status
  const router = createBrowserRouter([
    ...routesForPublic,
    ...(!token ? routesForNotAuthenticatedOnly : []),
    ...routesForAuthenticatedOnly,
  ]);

  // Provide the router configuration using RouterProvider
  return <RouterProvider router={router} />;
};

export default Routes;

Final Integration

Now that we have our AuthContext, AuthProvider and Routes ready, let's integrate them together in App.jsx.

Import the necessary components and files:
- AuthProvider is a component imported from "./provider/authProvider". It provides the authentication context to the application.
- Routes is a component imported from "./routes". It defines the application routes.
```
import AuthProvider from "./provider/authProvider";
import Routes from "./routes";
```
Wrap the Routes component with the AuthProvider component:
- The AuthProvider component is used to provide the authentication context to the application. It wraps around the Routes component to make the authentication context available to all components within the Routes component tree.
```
return (
  <AuthProvider>
    <Routes />
  </AuthProvider>
);
```

Complete Code:

import AuthProvider from "./provider/authProvider";
import Routes from "./routes";

function App() {
  return (
    <AuthProvider>
      <Routes />
    </AuthProvider>
  );
}

export default App;

Now that everythings is in place, its time to implement `Login` and `Logout`.

Let's create a file for Login Page src > pages > Login.jsx
Login Page

const Login = () => {
  const { setToken } = useAuth();
  const navigate = useNavigate();

  const handleLogin = () => {
    setToken("this is a test token");
    navigate("/", { replace: true });
  };

  setTimeout(() => {
    handleLogin();
  }, 3 * 1000);

  return <>Login Page</>;
};

export default Login;

The Login component is a functional component that represents the login page.
It imports the setToken function from the authentication context using the useAuth hook.
The navigate function from the react-router-dom library is imported to handle navigation.
Inside the component, there is a handleLogin function that sets a test token using the setToken function from the context and navigates to the home page ("/") with the replace option set to true.
A setTimeout function is used to simulate a delay of 3 seconds before calling the handleLogin function.
The component returns the JSX for the login page, which in this case is a placeholder text.

Now we will create a file for Logout Page src > pages > Logout.jsx
Logout Page

import { useNavigate } from "react-router-dom";
import { useAuth } from "../provider/authProvider";

const Logout = () => {
  const { setToken } = useAuth();
  const navigate = useNavigate();

  const handleLogout = () => {
    setToken();
    navigate("/", { replace: true });
  };

  setTimeout(() => {
    handleLogout();
  }, 3 * 1000);

  return <>Logout Page</>;
};

export default Logout;

In Logout component, we call setToken function with no arguments, with is equal to setToken(null).

Now, we will replace the existing Login and Logout components in the Routes component with the updated versions.

const routesForNotAuthenticatedOnly = [
  {
    path: "/",
    element: <div>Home Page</div>,
  },
  {
    path: "/login",
    element: <Login />,
  },
];

In the routesForNotAuthenticatedOnly array, the element property of "/login" is set to <Login />, which means that the Login component will be rendered when the user visits the "/login" path.

const routesForAuthenticatedOnly = [
  {
    path: "/",
    element: <ProtectedRoute />, // Wrap the component in ProtectedRoute
    children: [
      {
        path: "/",
        element: <div>User Home Page</div>,
      },
      {
        path: "/profile",
        element: <div>User Profile</div>,
      },
      {
        path: "/logout",
        element: <Logout />,
      },
    ],
  },
];

In the routesForAuthenticatedOnly array, the element property of "/logout" is set to <Logout />, which means that the Logout component will be rendered when the user visits the "/logout" path.

Test Flow

When you first visit the root page /, you will see the "Home Page" from the routesForNotAuthenticatedOnly array.
If you navigate to /login, after a delay of 3 seconds, the login process will be simulated. It will set a test token using the setToken function from the authentication context, and then you will be redirected to the root page / using the navigate function from the react-router-dom library. After the redirect, you will see the "User Home Page" from the routesForAuthenticatedOnly array.
If you then visit /logout, after a delay of 3 seconds, the logout process will be simulated. It will clear the authentication token by calling the setToken function without any argument, and then you will be redirected to the root page / again. Since you are now logged out, we will see the "Home Page" from the routesForNotAuthenticatedOnly array.

This flow demonstrates the login and logout processes, where the user transitions between authenticated and non-authenticated states and the corresponding routes are displayed accordingly.

Source Code

Forem: Sanjay Arya

Dynamic Environment Variables for Dockerized React Apps

Streamline Task Automation and Management with Scheduler Service

The Need for a Scheduler Service

Introducing Scheduler Service

Explore Scheduler Service

JWT Authentication in React with react-router

Create a React Project

Installing Dependencies for React-Router v6 and Axios

Creating Routes in React for JWT Authentication

Final Integration

Now that everythings is in place, its time to implement Login and Logout.

Now that everythings is in place, its time to implement `Login` and `Logout`.