This project demonstrates how to implement fine-grained authorization in a Next.js application using Permit.io. It's a document management system where users can create, view, edit, and delete documents based on their roles and document ownership.

• Role-Based Access Control (RBAC): Different roles (Admin, Editor, Viewer) have different permissions
• Attribute-Based Access Control (ABAC): Document owners have special privileges
• Fine-Grained Authorization: Using Permit.io to implement complex authorization rules
• Next.js App Router: Modern React application with server components and server actions
• Responsive UI: Using Tailwind CSS and shadcn/ui components

The application implements the following authorization model:

• Admin: Can create, view, edit, and delete any document, and access the admin panel
• Editor: Can create, view, and edit documents, but can only delete their own documents
• Viewer: Can only view documents

Additionally, document owners have full control over their own documents regardless of their role.

If you're a reader, then this blog is for you: https://dev.to/rohan_sharma/access-control-handled-heres-how-i-built-my-dms-212

• Node.js 18+
• Permit.io account

1. Clone the repository

2. Install dependencies:

   npm install

   or

    yarn install

   or

   bun install

3. Set up environment variables:

   PERMIT_PDP_URL=your-permit-pdp-url
   PERMIT_SDK_TOKEN=your-permit-sdk-token
   

npm run dev

The application will be available at http://localhost:3000.

• Admin:
  • Username: admin
  • Password: 2025DEVChallenge
• Regular User:
  • Username: newuser
  • Password: 2025DEVChallenge
• View:
  • Username: viewer
  • Password: 2025DEVChallenge

npm install -g @permitio/permit-cli

permit login

permit init

The application integrates with Permit.io through the permit.ts file, which provides functions for checking permissions:

import { Permit } from 'permitio'

// Initialize Permit SDK
const permit = new Permit({
  pdp: process.env.PERMIT_PDP_URL,
  token: process.env.PERMIT_SDK_TOKEN,
})

// Check if a user can perform an action on a resource
export async function checkPermission(
  userId: string,
  action: string,
  resourceType: string,
  resourceAttributes: Record<string, any> = {}
): Promise<boolean> {
  try {
    const permitted = await permit.check(userId, action, {
      type: resourceType,
      ...resourceAttributes,
    })
    return permitted
  } catch (error) {
    console.error('Permission check failed:', error)
    return false
  }
}

Server actions use the Permit.io SDK to check permissions before performing operations:

export async function createDocument(data: { title: string; content: string; isPublic: boolean }, userId: string) {
  // Check if user has permission to create documents
  const hasPermission = await checkPermission(
    userId,
    ACTIONS.CREATE,
    RESOURCES.DOCUMENT
  )
  
  if (!hasPermission) {
    throw new Error('You do not have permission to create documents')
  }
  
  // Create document...
}

The UI uses a simplified client-side permission check to determine what actions to show:

const canUpdateDocument = hasPermission(
  user.role,
  ACTIONS.UPDATE,
  RESOURCES.DOCUMENT,
  { id: document.id, ownerId: document.ownerId, userId: user.id }
)

// Only show edit button if user has permission
{canUpdateDocument && (
  <Button onClick={() => setIsEditing(true)}>
    Edit
  </Button>
)}

1. Separation of Concerns: Authorization logic is separated from application code
2. Centralized Policy Management: All authorization rules are defined in one place
3. Consistent Enforcement: Authorization is enforced consistently across the application
4. Reduced Complexity: Complex authorization rules are handled by Permit.io
5. Easier Maintenance: Changes to authorization rules don't require code changes
6. Audit Trail: All authorization decisions can be logged and audited

This project demonstrates how to implement fine-grained authorization in a Next.js application using Permit.io. By externalizing authorization, we can create more secure, maintainable, and flexible applications.

Set Up Your Environment

1. Fork our repository to your GitHub account.
2. Clone your fork to your local machine. Use the command git clone https://github.com/RS-labhub/Document_Management_System.git.
3. Create a new branch for your work. Use a descriptive name, like fix-login-bug or add-user-profile-page.

Commit Your Changes

• Commit your changes with a clear commit message. e.g git commit -m "Fix login bug by updating auth logic".

Submit a Pull Request

• Push your branch and changes to your fork on GitHub.
• Create a pull request, compare branches and submit.
• Provide a detailed description of what changes you've made and why. Link the pull request to the issue it resolves. 🔗

Review and Merge

• I will review your pull request and provide feedback or request changes if necessary.
• Once your pull request is approved, we will merge it into the main codebase 🥳

$~$

• Email: [email protected]
• Head over to my github handle from here

Thank you for visting this Repo
If you like it, star ⭐ it