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

**URL:** <https://community.auth0.com/t/how-can-i-control-the-api-access-from-my-react-application-with-permission/59449>\
**Category:** Get Help\
**Tags:** jwt, rules, auth0\
**Created:** [March 15, 2021, 2:38pm UTC](https://community.auth0.com/t/how-can-i-control-the-api-access-from-my-react-application-with-permission/59449 "2021-03-15T14:38:04Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ikkitang](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/ikkitang/32/28169_2.png) [@ikkitang](https://community.auth0.com/u/ikkitang)\
**Post date:** [March 15, 2021, 2:38pm UTC](https://community.auth0.com/t/how-can-i-control-the-api-access-from-my-react-application-with-permission/59449/1 "2021-03-15T14:38:04Z")

</div>

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.

> **[GitHub - TakahashiIkki/auth0-react-admin](https://github.com/TakahashiIkki/auth0-react-admin)**
>
> Contribute to TakahashiIkki/auth0-react-admin development by creating an account on GitHub.

## 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.

> **[GitHub - mcueto/djangorestframework-auth0\_sample: Sample Django project for...](https://github.com/mcueto/djangorestframework-auth0_sample)**
>
> Sample Django project for djangorestframework-auth0

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

> <https://github.com/mcueto/djangorestframework-auth0/blob/master/rest_framework_auth0/permissions.py#L19-L61>

# 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?

---

<div class="post-metadata">

**Author:** ![colin.coutts](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/colin.coutts/32/17217_2.png) [@colin.coutts](https://community.auth0.com/u/colin.coutts)\
**Post date:** [March 16, 2021, 10:57pm UTC](https://community.auth0.com/t/how-can-i-control-the-api-access-from-my-react-application-with-permission/59449/2 "2021-03-16T22:57:16Z")

</div>

Hi, @ikkitang thanks for contacting us, and welcome to the Auth0 Community! 🤩 🎉

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:

> **[Authorization Core vs. Authorization Extension](https://auth0.com/docs/manage-users/access-control/authorization-core-vs-authorization-extension?_ga=2.93680925.1816220382.1615818691-965216513.1592492807)**
>
> Understand the differences between Auth0's core RBAC release and the Authorization Extension.

> **[Configure Authorization Extension](https://auth0.com/docs/customize/extensions/authorization-extension/configure-authorization-extension)**
>
> Learn how to configure the Authorization Extension.

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

---

<div class="post-metadata">

**Author:** ![konrad.sopala](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/konrad.sopala/32/13516_2.png) [@konrad.sopala](https://community.auth0.com/u/konrad.sopala)\
**Post date:** [March 17, 2021, 12:21pm UTC](https://community.auth0.com/t/how-can-i-control-the-api-access-from-my-react-application-with-permission/59449/3 "2021-03-17T12:21:23Z")

</div>

Thanks Colin for helping with this one!

---

<div class="post-metadata">

**Author:** ![ikkitang](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/ikkitang/32/28169_2.png) [@ikkitang](https://community.auth0.com/u/ikkitang)\
**Post date:** [March 17, 2021, 12:24pm UTC](https://community.auth0.com/t/how-can-i-control-the-api-access-from-my-react-application-with-permission/59449/4 "2021-03-17T12:24:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![konrad.sopala](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/konrad.sopala/32/13516_2.png) [@konrad.sopala](https://community.auth0.com/u/konrad.sopala)\
**Post date:** [March 17, 2021, 1:07pm UTC](https://community.auth0.com/t/how-can-i-control-the-api-access-from-my-react-application-with-permission/59449/5 "2021-03-17T13:07:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ikkitang](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/ikkitang/32/28169_2.png) [@ikkitang](https://community.auth0.com/u/ikkitang)\
**Post date:** [March 17, 2021, 1:55pm UTC](https://community.auth0.com/t/how-can-i-control-the-api-access-from-my-react-application-with-permission/59449/6 "2021-03-17T13:55:49Z")

</div>

@colin.coutts @konrad.sopala

Thank you for your kind!!!

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

---

<div class="post-metadata">

**Author:** ![konrad.sopala](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/konrad.sopala/32/13516_2.png) [@konrad.sopala](https://community.auth0.com/u/konrad.sopala)\
**Post date:** [March 17, 2021, 2:08pm UTC](https://community.auth0.com/t/how-can-i-control-the-api-access-from-my-react-application-with-permission/59449/7 "2021-03-17T14:08:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![konrad.sopala](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/konrad.sopala/32/13516_2.png) [@konrad.sopala](https://community.auth0.com/u/konrad.sopala)\
**Post date:** [March 25, 2021, 10:13am UTC](https://community.auth0.com/t/how-can-i-control-the-api-access-from-my-react-application-with-permission/59449/8 "2021-03-25T10:13:23Z")

</div>


