In this tutorial, I will show you how to implement access control to your Next.js application using Permify. For client side access control checks we will use Permify React library and for server side access control we will use Node.js SDK of Permify.

Before we start, I am assuming that you have a Permify account. if you don't have one you can sign up from here.

As a start we need to create our demo Next.js application with running following command

Authorization Set up

Before performing access checks we need to implement Permify both on our frontend and server-side as well. So install Permify SDKs to our demo application in a single command;

Client-Side Setup

We need to Wrap our application with PermifyProvider in order to get react-permify components, hooks and helper methods in client side.

So let's open our _app.js and update;

As you notice we passed some parameters which you can find on Permify Panel

• workspaceId - The Id of the workspace you are working on.
• publicToken - API key which was provided from Permify.

After wrapping up our application with PermifyProvider component we need to get the user for auth check function.

We can use set user Id with Permify setUserId function. The easiest way to collect logged in users id is setting user id in our application login functions promise.

So lets create a auth/login.js in our pages folder and set the user id using the usePermify hook in our login page;

As you notice in our login function we call an API to get user. We will create this endpoint in the server side setup section.
Since we complete the auth set up for the frontend part we can easily get logged in users to Permify, and perform access checks in our client site.

Before getting into the access check section, I’ll cover the first part of the server side.

Server-Side Setup

Open up your _app.js add the following code to create a Permify Client instance. We will use this client to reach out to all Permify server side functions.

Then, we should set our user on the server side as we did on our client side, just set a cookie. In our login function we call an API to get user, this is where we will set our user, so lets create an api endpoint pages/api folder.

Create auth folder, and login.js within;

I used a sample user object for simplicity. You can add any authentication and user management logic to here.

Also implement simple cookie management to get logged in user when performing server-side access checks.

Remember that we need to return userId to set it on client side.

With this last operation, we completed Permify setup for our app. Now we need to define sample conditions and restricted parts to demonstrate and enforce Permify access checks.

Let's start with server side access checks.

Server-Side Access Check

Create a users page directory and an index.js file within. This page is responsible for showing all list of all users to authorized users.

Assume that we have a policy named users–index which consists of rules and options for enforcing access checks to this list.

So that only users who met certain criteria can access  to this list.

Check out Permify Policies to learn more about Permify policies, options and rules.

If you got the idea let's implement our access check.

We will use getServerSideProps to perform an access check when the page is rendered server-side.

If the user is authorized to see the page, the page will be rendered successfully. If a user doesn't have access, they'll be redirected to the Home page which is pages/index.js.

We can check the authorization with giving policy name and user id params to Permify isAuthorized() function in our users/index.js file as follows:

Client Side Access Check

It's time to hop on the frontend access check. We can use the Home page (pages/index.js) for this. For simplicity let's use the users-index policy again for this case.

Clear all of the content in index.js and add simple Link and give /users as href. We will hide this link if users do not have access. To enforce access check we can use the permify-react isAuthorized() function.

The only difference between server side isAuthorized from the client sode, you just need to pass a policy name since we already set the user to Permify on login.

That's how you can set up authorization to Nextjs app with Permify.

If you have any questions or doubts, feel free to ask them.

For more content like this, join our newsletter. Get best practices on Authentication, Authorization and Subscriptions to build ultimate B2B SaaS apps.