I am new to auth0 as well as react. Pardon any technical mistakes in question.
I am creating a web app using react and auth0. My app has 3 pages: ‘/’, ‘/admin’ and ‘dashboard’. When any user logs into my app, only then he can access ‘dashboard’ page. I have added this functionality already. But now, I want to add access control. I have added a role in my auth0 settings called ‘admin’.
I want that only an admin can access ‘/admin’ page. Rest all users should be redirected to ‘/’ when they try to access ‘/admin’.
To achieve your flow, you must create Router that will protect routes from access by unauthorized users. If you already created an Admin role with the correct privileges, the only thing to do in the Auth0 Dashboard is assigned a newly created Admin role to the desired users.
I highly encourage you to follow our blog post about integrating Auth0 Authentication with React with react-router. You can follow it along, and it will describe each detail. You can find the blog post here. If you prefer only to check for code snippets that you can use in your application, there is a dedicated GitHub repository that contains all of the information from the article. I hope it will help you with your problem.