How can I control the API access from my React application with Permission?

Hi there!

I am an Software engineer living in Japan.
I am having trouble developing a product using Auth0, and I would like to ask for your support.

premise

I am currently creating an application with a SPA + API configuration.
The front-end is written in React, and the back-end is written by the Django framework in Python.
The authentication function is built using Auth0, and we aim to use RBAC to verify the JWT for requests from Frontend and whether it has the authority to execute the requested API.

OSS in use

Fronend

I have cut out as much of the OSS as possible.

backend

Install the Module djangorestframework-auth0 with pip.
It has the same implementation as the following sample, e.g. it checks if the user has read:todos permission.

As I found out, this OSS requires the Role and Permissions to be included in the app_metadata in the JWT.

What I want to achieve

I want the JWT’s app_metadata to contain roles and permissions. This is how we want to control access to the API.

Also, I haven’t imagined the operational flow when app_metadata is included in JWT, and I’d like you to introduce that information.
When a user logs in for the first time, the JWT is retrieved. If they then add a new Permission, I assume the new Permission is not added to the JWT issued at the first login, but is the only way to ask the user to re-login?

Hi, @ikkitang thanks for contacting us, and welcome to the Auth0 Community! :star_struck: :tada:

Your use-case sounds like it would be best managed by the Authorization Extension if you want to have Role-based information in the user’s app_metadata. I’ll include links that talk about the difference between Authorization Core and the Extension along with other docs that touch more specifically on your use-case:

To your other question about adding Permissions to a user who is already logged in, if I understand your implementation correctly then yes they’d have to login again to get a new token. However, if you’re using the app_metadata as a means to restrict access, you may be able to let your backend PATCH the user in question to update their metadata accordingly.

Best Regards,
Colin

2 Likes

Thanks Colin for helping with this one!

1 Like

@colin.coutts @konrad.sopala
Thank you!!!
I will give it a try.

1 Like

Perfect! Let us know if you have any other questions down the road!

1 Like

@colin.coutts @konrad.sopala

Thank you for your kind!!!

Thanks to you, I was able to solve the problem successfully.

1 Like

Perfect glad to hear that. @colin.coutts made all the magic!

1 Like