DEV Community

Cover image for How to Build a Request Access Approval System in Next.js
Arindam Majumder
Arindam Majumder

Posted on • Updated on

How to Build a Request Access Approval System in Next.js

Introduction

Next.js is a powerful React framework for creating fast, scalable web applications with server-side rendering and static site generation. As applications grow, managing access to sensitive data and resources becomes essential for maintaining security and control. This is where a Request Access Approval System becomes very useful.

A Request Access Approval System enables fine-grained access control within an organization's digital infrastructure. Employees can request access to specific resources, such as confidential files or specialized software, while designated approvers review and manage these requests.

While Next.js doesn't offer built-in functionality for this system, we can integrate it using Permit.io, a robust authorization tool. It simplifies configuring and managing permissions, making it an ideal solution for implementing complex access control in Next.js applications.

In this guide, we'll walk through building a Request Access Approval System using Next.js and Permit.io. We'll create a demo application to demonstrate how to handle access requests, manage approvals, and enforce permissions, ensuring only authorized individuals can access sensitive information within your organization.

What is Request Access Approval?

Before we move further, let’s understand what RAA (Request Access Approval) is. For instance, if a developer needs access to a production database, they would submit a request through the system. This request lands with a manager or an authorized person for review. They validate if the requester needs access according to their role and what is required of them.

If all is right, they accept the request. If not, they can deny it. This ensures only the correct people have legible data. This practice is called Request Access Approval.

flowchart

Why do we need this?

So far, we have explored RAA (Request Access Approval), but why do we need this? It’s a powerful way to protect sensitive data from unauthorized access, ensuring that only those needing it can see it. This reduces the risk of data breaches and helps the organization comply with various security regulations. It also helps with the process of granting access, making it faster and more efficient.

The RAA system adds an extra layer of security to protect critical information. Organizations can restrict unauthorized users from accessing sensitive data, which is essential for safeguarding customer information and other confidential data.

The RAA System streamlines the process of managing access requests. Administrators can review and approve multiple requests efficiently, and employees can quickly submit their access needs. This improves both security and efficiency within the organization.

For example, an employee might submit a request through the system, which a manager or authorized individual would then review. They consider factors like the employee's role and the sensitivity of the information before granting or denying access.

Prerequisites

To understand more about this topic, you should have a basic knowledge of the Next.js structure. You can explore more about Next.js here.

As well, it is vital to know end-user authentication and approval. Such as session management, OAuth integration, role-based access control (RBAC), and implementing secure password hashing and storage practices.

Step-by-Step Guide:

Setup Next.js project

To get started, let’s create a Next.js project. To save time, we already have a starter template setup that you can use for the project.

Open a terminal and clone the GitHub repository.



git clone <https://github.com/Arindam200/nextjs-starter>


Enter fullscreen mode Exit fullscreen mode

This will create a Next.js project. After that, move into the newly created project folder:



cd nextjs-starter


Enter fullscreen mode Exit fullscreen mode

Now, we’ll Install the required dependencies



npm install @permitio/permit-js permitio dotenv


Enter fullscreen mode Exit fullscreen mode

Next, we’ll create a .env file in the root of our project to store our environment variables



//.env

JWT=your_jwt_token
ENV=your_environment_key


Enter fullscreen mode Exit fullscreen mode

Make sure to replace your_jwt_token and your_environment_key with actual values

With that, our basic Next.js Project setup is done.

Create an User Management element:

To create an access request element, it’s essential to create a user management element first. Let’s create it.

  1. Go to the Elements section

  2. Under User Management, click on “Create Element”

Screenshot of a user interface showing a sidebar menu on the left with items

  1. Create a User Management Element by assigning roles as follows:

    1. Add a name, i.e. “User Management
    2. Select the RBAC role
    3. Drag the admin role from the ”Hidden Roles” section to the “Level 1 - Workspace Owner
    4. Create the element.

Create an Access Request Element

  1. Click on the Elements option

  2. Under the Access request, click on “Create Element”

Permit Dashboard

  1. Select the user management element to which you want to connect.

  2. Customize the element according to your choice.

Implement the Access Request and User Management Element

Now we'll integrate Permit.io's Access Request element and User Management element into the Next.js application.

  1. First,Under the components folder, create a component AccessRequest.tsx for the Access Request element:


import React from 'react'

function AccessRequest() {
  return (
    <iframe
            title="Permit Element AR"
            src="https://embed.permit.io/ar?envId=e0ffba3632274e8085d92c793d34f0c1&darkMode=false&tenantKey=default"
            width="100%"
            height="100%"
            style={{ border: 'none' }}
    />
  )
}

export default AccessRequest;


Enter fullscreen mode Exit fullscreen mode
  1. Next, create a component for the User Management element to manage user permissions. Add the following code in UserManagement.tsx:


import React from 'react'

function UserManagement() {
  return (
    <iframe
        title="Permit Element user-management"
        src="https://embed.permit.io/user-management?envId=0ce2a34be877476f958a43b354e06756&darkMode=false"
        width="100%"
        height="100%"
        style="border: none;"
    />
  )
}

export default UserManagement;


Enter fullscreen mode Exit fullscreen mode
  1. Now, Create a Dashboard.tsx component. This component will handle the login process using Permit.io and embed both the Access Request and User Management elements.


'use client';
import permit, { LoginMethod } from '@permitio/permit-js';
import AccessRequest from './AccessRequest';
import UserManagement from './UserManagement';
import 'dotenv/config';
import { useEffect } from 'react';

const Dashboard = () => {
    useEffect(() => {
        const login = async () => {
            try {
                await permit.elements.login({
                    loginMethod: LoginMethod.frontendOnly,
                    userJwt: process.env.JWT,
                    tenant: 'default',
                    envId: process.env.ENV,
                });
                console.log('Login successful');
            } catch (err) {
                console.error('Login error:', err);
            }
        };

        if (process.env.JWT && process.env.ENV) {
            login();
        } else {
            console.error('JWT token or ENV variable is not defined.');
        }
    }, []);

    return (
        <div>
            <AccessRequest />
            <UserManagement />
        </div>
    );
};

export default Dashboard;


Enter fullscreen mode Exit fullscreen mode

The component uses the useEffect hook to run a login function when the component mounts.

The login function uses permit.elements.login() to authenticate the user:

  • It uses LoginMethod.frontendOnly for client-side authentication.

  • It retrieves the JWT token and environment ID from environment variables.

  • If login is successful, it logs a success message; otherwise, it logs an error.

The component renders two iframes that embed the Permit.io Access Request and User Management elements.

  1. To use the Dashboard component, we’ll have to add the component where we want to display the access request element and user management element. For this example, add this to page.tsx :


import Dashboard from "@/components/Dashboard";

export default function Home() {
  return (
    <main>
      <div >
        <Dashboard />
      </div>
    </main>
  );
}


Enter fullscreen mode Exit fullscreen mode

All done. That’s how you can implement the Permit.io Request Access feature using Next.js. This is a client-side implementation. You can use server-side implementation too.

Running the Application

To start the project, let’s run the following command in our terminal:



npm run dev


Enter fullscreen mode Exit fullscreen mode

This will start our project.

Now, Let’s go to localhost:3000 ,we'll get the following page:

**localhost:3000**

Now, when we request for the access, the admin will get the following:

Admin View

And if the admin gives access to us then we'll be able to access the restricted or private page.

With this, only authorized users access restricted areas of our application and if we give them the permission, then only they can view those contents.

Conclusion

In this tutorial, we have explored how to implement the Request Access Approval feature in Next.js using Permit.io. By following these steps, you can enhance the security and efficiency of access management in your applications.

If you found this post helpful, feel free to share it with others who might benefit.

Want to learn more about implementing authorization? Have questions? Join the Slack community to reach out to the team.

Thank you for Reading : )

Top comments (16)

Collapse
 
akshaybond30160 profile image
Akshay bondre

Wow! This looks cool, Will check this out!

Thanks Arindam

Collapse
 
arindam_1729 profile image
Arindam Majumder

Thanks for checking out Akshay 😀

Collapse
 
tanmoys95268896 profile image
Tanmoy Sinha

Interesting, I'll explore this more

Collapse
 
hemath923604 profile image
Hemath

Great Share Arindam!

Collapse
 
arindam_1729 profile image
Arindam Majumder

Glad you found it useful

Collapse
 
ddebajyati profile image
Debajyati Dey

Wow! Looks amazing!

Collapse
 
arindam_1729 profile image
Arindam Majumder

Thanks for checking out Debajyati

Collapse
 
soumyodeep_dey_c6cb5e8c97 profile image
SOUMYODEEP DEY

Great Work bro

Collapse
 
arindam_1729 profile image
Arindam Majumder

Thanks Buddy

Collapse
 
sander76 profile image
Sander

great work

Collapse
 
arindam_1729 profile image
Arindam Majumder

Thanks Sander 😀

Collapse
 
gemanor profile image
Gabriel L. Manor

Great writing, @arindam_1729, thanks for trying Share-If!

Collapse
 
arindam_1729 profile image
Arindam Majumder

Thanks Gabriel! Permit Share-if is Super Awesome 🔥🔥

Collapse
 
noman0305 profile image
Mohammed Noman

Interesting

Collapse
 
arindam_1729 profile image
Arindam Majumder

Thanks

Collapse
 
v1shalb profile image
Vishal Bhamare

This was great study. I'll try to implement same in my java application. If you have any tips will be grateful.