Nextjs Role Based Protected Routes (not for API's)

Please include the following information in your post:

Which SDK this is regarding: nextjs-auth0
SDK Version: 1.1.0
Platform Version: Node v14.15.4

This auth0 document explains what I am trying to achieve but I will elaborate below:
https://auth0.com/docs/authorization/sample-use-cases-role-based-access-control?_ga=2.60164527.322087514.1614695020-1290724891.1612412079

What I am trying to achieve:

  1. There are two types of “roles” I would like to define for my nextjs application, let’s call them Admin and Visitor
  2. Admins have there own page, let’s call it /admin
  3. Visitors should not be able to access the route /admin
    (This is basically what is described above in the Auth0 doc)

My overarching question is: How do I accomplish the above with the nextjs SDK?

Where my confusion lies:

  1. Nextjs SDK suggests creating a Regular Web Application in the Auth0 dashboard which I have done but RBAC is a feature of API’s.
  2. Let’s say I create an API along side my Regular Web Application and assign my users with the roles and permissions from the new API, how to I have access to these “roles” or “permissions” in my nextjs app?
  3. I would assume that restricting a Visitor from the /admin route would happen in the getServerSideProps but, again, how is this accomplished?

I am not sure if it is the recommended way but you could potentially extend the ID token to pass the roles to the Next.js application. Here is how you can inject roles in an ID token (Pablo Cibraro). This is for front-end, not backend API so you don’t have access tokens at this point where you could potentially use RBACK.

1 Like