DEV Community: Guillaume Duhan

I've build permissions for my Next.js 15 app with Permit.io

Guillaume Duhan — Tue, 01 Apr 2025 11:39:37 +0000

In this article, I’ll walk you through all the steps to integrate and manage fine-grained permissions in your application using Next.js, Permit.io, and the Permit SDK. By the end of this tutorial, you’ll be able to create a fully working permission system where users have role-based access to specific resources—like products—in real time, all powered by Permit.io.

You can check the video OR get the full code available in this GitHub repo. You’ll see how the SDK handles user-role-resource checks cleanly.

What are we going to learn?

To get started, we’ll build a modern web application using Next.js and connect it to Permit.io, which will handle all our authorization logic externally. Permit.io is a powerful, API-driven access control service that lets you build complex RBAC and ABAC systems with minimal configuration. I highly recommend it for any project where user access levels matter.

1. Create a free account on Permit.io

Start by creating a free account at Permit.io. Once logged in, you’ll land in the default project named development. Navigate to the Policies tab from the sidebar to begin configuring your permission system.

2. Create Your First Resources

Resources in Permit.io represent entities you want to protect. In our case, we’ll create three products:

product_1 (key: product_1)
product_2 (key: product_2)
product_3 (key: product_3)

Note: The name and the resource key can be different. What's important for integration is the resource key, which — in my case — match the IDs I’ll use in my app.

As soon as you create these resources, Permit.io automatically generates common roles for each: admin, editor, and viewer. But you can create new ones if you want to.

3. Explore and Use the Policy Editor

Inside the Policy Editor, you’ll see a matrix of roles for each product. This is where you define what each role can do.

Permit.io makes it incredibly easy to customize permissions per resource and per role.

4. Add Users and Assign Roles

Go to the Directory tab, and under Users, you can start adding users via email. For this demo, we’ll create three users:

An admin user
An editor user
A viewer user

Assign the relevant roles to each user for the resources you've created

Note: you can also do this programmatically using the Permit SDK.

5. Install the Permit.io SDK in Your Next.js App

Permit.io is API-driven, which means you can integrate permissions seamlessly in your codebase.

npm install permitio

I’ve created a route in api/permission/route.ts which checks the permission of the current user.

import { NextRequest } from 'next/server';
import { Permit } from 'permitio';

interface User {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
}

const permit = new Permit({
  pdp: process.env.NEXT_PUBLIC_PERMIT_PDP,
  token: process.env.NEXT_PUBLIC_PERMIT_TOKEN,
});

export async function GET(request: NextRequest) {
  try {
    const searchParams = request.nextUrl.searchParams;
    const action = searchParams.get('action') || 'read';
    const resource = searchParams.get('resource') || 'document';
    const userId = searchParams.get('userId') || 'unknown';

    const permitted: boolean = await permit.check(userId, action, resource);

    if (permitted) {
      return new Response(
        `${userId} is PERMITTED to ${action} ${resource} !`,
        { status: 200 }
      );
    } else {
      return new Response(
        `${userId} is NOT PERMITTED to ${action} ${resource} !`,
        { status: 403 }
      );
    }
  } catch (error) {
    console.error('Permission check error:', error);
    return new Response('Error checking permissions', { status: 500 });
  }
}

On the front-end, I have this complete page displaying products.

I call this route with a helper function checkPermission() to verify access before displaying content.

'use client';
import Image from 'next/image';
import { useEffect, useState } from 'react';
import iphone from "../../public/iphone.jpg";
import macbook from "../../public/macbook.jpg";
import watch from "../../public/watch.jpg";

const HeaderComponent = ({ user }: any) => {
  return <header className="flex items-center gap-4">
    {!user && <span className="font-[600]">Login</span>}
    {user && <div className="flex items-center gap-4">
      <span className="font-[600]">Logged in as</span>
      <div className="flex items-center gap-2 border rounded p-2 border-neutral-200 shadow cursor-pointer min-w-[200px]">
        <div className="rounded-full bg-red-500 w-8 h-8 bg-cover bg-center" style={{
          backgroundImage: "url('https://avatars.githubusercontent.com/u/31253241?v=4')"
        }} />
        <div className="text-sm">
          <p className="font-[600]" style={{
            lineHeight: 1
          }}>{user.name}</p>
          <p className="text-xs text-neutral-500">{user.userId}</p>
        </div>
      </div>
    </div>}
  </header>
}

const PostItem = ({ post, user }: any) => {
  const [canRead, setCanRead] = useState(false);

  const checkPermission = async () => {
    try {
      const response = await fetch(`/api/permission?userId=${user.id || 'unknown'}&resource=${post.id}&action=read`);
      const isPermitted = response.status === 200;
      setCanRead(isPermitted);
    } catch (error) {
      console.error('Error checking permissions:', error);
      setCanRead(false);
    }
  };

  useEffect(() => {
    checkPermission();
  }, [post.resource]);

  if (!canRead) {
    return null;
  }

  return (
    <div className="border border-neutral-100 dark:text-white text-center">
      {/* Background Image */}
      <div className="flex items-center justify-center min-h-[200px] max-h-[200px] overflow-hidden">
        <Image alt={post.title} src={post.img} />
      </div>

      {/* Content */}
      <div className="grid gap-4 p-4">
        <header className="grid gap-2">
          <div>
            <h2 className="text-lg text-center font-semibold text-black">{post.title}</h2>
            <p className="text-gray-500 text-sm m-0">{post.content}</p>
          </div>
        </header>
        <div className="h-3 mb-2">
          {post.id === 'product_1' && <div>
            <span className="text-black text-xs bg-yellow-500 rounded px-2 py-1 text-white font-[500]">Exclusive to admins</span>
          </div>}
          {post.id === 'product_2' && <div>
            <span className="text-black text-xs bg-emerald-500 rounded px-2 py-1 text-white font-[500]">Exclusive to editors</span>
          </div>}
        </div>
        {/* Price & Reserve Button */}
        <div className="flex justify-center items-center">
          <button className="border rounded-lg hover:bg-blue-400 transition border-blue-500 bg-blue-500 text-[13px] px-4 py-2 font-[600] cursor-pointer">Order – ${post.price}</button>
        </div>

      </div>
    </div >
  );
};

const Dashboard = () => {
  const [user, setUser] = useState({
    name: "Codewithguillaume",
    id: "codewithg"
  })
  const posts = [
    {
      id: "product_1",
      img: iphone,
      title: "iPhone 16 Pro",
      content: "The latest and greatest iPhone.",
      price: 1299,
      type: "document_admin"
    },
    {
      id: "product_2",
      img: macbook,
      title: "MacBook Pro 2025",
      content: "Powerful and portable.",
      price: 1599,
      type: "document_employee"
    },
    {
      id: "product_3",
      img: watch,
      title: "Apple Watch 8",
      content: "Stay connected and healthy.",
      price: 399,
      type: "document_viewer"
    }
  ];

  return <main>
    <div className="container grid gap-8 py-16 max-w-[1000px] mx-auto">
      <HeaderComponent {...{ user }} />
      <div className="grid lg:grid-cols-3 gap-4">
        {posts.map((post) => (
          <PostItem key={post.id} {...{ post, user }} />
        ))}
      </div>
    </div>
  </main>
};

export default Dashboard;

6. Test Your Complete Permission System

Switch between users and test what each one can see:

Admin: Can access all 3 products
Editor: Can access 2 products
Viewer: Can access only 1 product

This is the power of Permit.io: you can instantly change permissions, roles, and access directly from the dashboard—no redeploy needed.

Conclusion

Permit.io makes access control simple, powerful, and scalable. Whether you’re managing a few resources or an enterprise-grade system, the flexibility and ease-of-use are impressive.

Try it yourself and simplify your permission management!

Guillaume Duhan aka Codewithguillaume.

Customization with Tailwindcss

Guillaume Duhan — Sun, 27 Nov 2022 14:23:16 +0000

Without any doubt, Tailwindcss became famous because of its customization system. By the time, Bootstrap was dominating CSS libraries — was it the first ever by the way? — and we owe a lot to it, thanks to Twitter’s team. However, Javascript’s frameworks dominance oriented customization on the JS side instead of CSS/SASS/LESS… chosen by Bootstrap.

Tailwind.config.js — a file to customize your theme

In my previous article, I explained how to setup Tailwindcss.

When you init Tailwind, at the root of your project, it creates a tailwind.config.js. This file is read by Tailwind to build your final css sheet.

Tailwindcss is building all its CSS classes based on this customization file. When your file is empty, Tailwind heritates from its basic styling (colors, sizes, spacing…). Here’s a quick code snippet to show an example:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    fontSize: {}, // overwrite tailwindcss sizes for yours...
    fontFamily: {},
    fontWeight: {},
    borderRadius: {},
    extend: { // extend existing classes
      colors: {},
      spacing: {}
    },
  },
  plugins: [],
}

Of course when you look for customization, you may not want to use Tailwindcss basic styling. However, I always do both.

Do you need to always customize Tailwindcss?

The answer is… no. Tailwind is providing everything you need to start developing. Its initial stylesheet is enough — and I have to admit that I use this one 80% of the time.

What I like is to have the choice. I don’t necessarely have to customize; however I always do. On top of initial Tailwindcss. Because I don’t have time to rewrite an entire CSS library. But Tailwind is giving me the opportunity to do it on top of the work already done.

Tailwindcss vs Boostrap?

This is the strength of Tailwind — you start with a CSS stylesheet really optimized for Front-End devs. In short, you won hours of course. But you’ll tell me: exactly like Bootstrap, right?

In short: Bootstrap is providing a CSS lib. Tailwind does too. Bootstrap is providing a component lib. Tailwind doesn’t.

In my opinion: I’d say that Tailwind went further way in the developers needs in comparison to Bootstrap. We don’t necessarely refuse to write CSS; however we want to be able to use an existing library that gives us the choice to customize.

Guillaume

Colors with Tailwindcss

Guillaume Duhan — Thu, 24 Nov 2022 19:50:22 +0000

Note: this is the first article of a long serie to teach the entire CSS library Tailwindcss.

Introduction to Tailwindcss

Tailwind CSS is a utility-first CSS framework that helps you quickly and reliably create a completely custom, fully responsive website design. With Tailwind, you can use utility classes to control the layout, color, spacing and typography in your application — without needing to write any custom CSS or leaving your HTML.

Depending on what framework you are using, please refer to officials installation documentation to install it.

How to use colors with Tailwindcss?

Tailwind means you have to write less custom CSS. Instead of building custom designs with cascading stylesheets, you style your elements by applying pre-existing classes directly in your HTML. By using utility classes in this way, you can build custom designs without writing CSS!

Also it helps you write clean and maintainable code by providing a flexible grid, fast typography, CSS variables, and more.

With Tailwind, you don’t have to go from blank slate to brand-ready in a single step. Instead, we include an expertly-crafted default palette out-of-the-box that’s ready for you to start with or customize.

<h1 class="text-blue-500 border border-blue-500 bg-slate-100">Blue title</h1>

In this example, we’ll have a blue title with blue borders and a background grey-light.

Customization

Tailwind is a framework for building bespoke user interfaces, so it doesn’t come with a lot of built-in frameworks. As you’re building your application, you might wonder how to handle web typography or CSS transitions, or why you can’t just use .css styles instead of the built-in class system.

By default, Tailwind will look for a tailwind.config.js at the root of your project where you can define any customizations.

However do not write directly colors into colors entries. Please place your news colors into extend.

If you are looking for a complete lesson on how to use colors with Tailwindcss, I highly recommend you to watch my video above.

See you for the next lesson,

Guillaume

How to become a developer in 2023?

Guillaume Duhan — Sat, 19 Nov 2022 13:50:34 +0000

Four month ago I launched my YouTube channel to teach how to code. And I have been surprised to discover that many of my viewers were asking me: how to become a developer?

After 10 years of experience as a freelance developer, I have a clear view on how a junior can start his career.

I’ve summarize these points:

Try different langages, frameworks and pick one you like,
Dive deep into programming concepts – also into your framework,
Your goal is to become a master of your framework/langage,
Create a LinkedIn / GitHub profile, synthetic and professional as much as possible (your profile picture has to be serious),
Multiply personal projects on your GitHub profile (at least 2–3),
Contribute if you can to open source projects,
Apply only to jobs that fits with your skills and wishes – that’s the most important condition,
If you got interviews for jobs you really want, my best advice is to create a clone project and to present it during your interview.
I got several others points but they are in the video I made this weekend.

At the end I even share my own story and how I became a developer/CTO.

Best,

Guillaume Duhan