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

Help
1

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?
2 Likes
2

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 (Auth0 - Enrich ID tokens with custom data). This is for front-end, not backend API so you don’t have access tokens at this point where you could potentially use RBACK.

2 Likes
3

Sorry for not replying to this sooner, just saw it searching for a similar query.

I was able to add RBAC checks to the withAuthenticationRequired React component and I recommend using that.

See https://github.com/auth0/auth0-react/pull/211.

4

It would be really awesome to see an official guide for next.js on authentication/roles/authorizing/scopes to allow certain users, certain access to pages.

3 Likes
5

Relaying the feedback to our teams. Thank you!