I’m new to auth0 and this kind of auth in general, I only used auth on server side PHP in the past. I examined every resource here/github and even many Youtube channels/tutorials. There are way too many modules and methods. So I need help. Here is my scenario I’ve chosen (a starter learning project which will form base of a larger one):
I have 3 objects, user, team and project. But the users/teams/projects have a rather complex relationships like in a forum application, e.g. a user can be admin/manager/moderator/user (or non-logged=visitor) and each resource has a visibility (access right) property (e.g. public, team, none etc). I.e. a user can make himself visible to only team members, or a project can be seen only by team members, but public ones can be seen by everyone. Thus the classic approach of ProtectedAPI does not work here (I think).
I implemented most of it, client side auth0 (@auth0/auth0-react) and the API and it is working with public resources returned. Now I need to pass client side info with additional properties (profile info) to the server after registration or login and afterwards the server must use this info to return enlarged set of objects, or only allowing a registered user can create a project etc.
I could not find any specific examples like this scenario, maybe I’m doing it totally wrong, maybe I’m trying to re-implement the wheel or I’m in the right direction but lack knowledge.
Can you please advise and/or forward me to the right scenario/example?
Thank you in advance…
If I’m not implementing a total mess, I might have found a solution…
First of all, this helped me a lot:
I had axios, and on top of that useApi custom hooks as react-query implementations. Under the useApi I could use my custom useAuthToken hook which gets the token. But, there, if the user is not logged in, I set it to an empty string (in catch error) and do not send a bearer token through axios.
On the server side, to not duplicate every route, I cannot use protected routes and cannot use the auth0.middleware in examples directly. I think I need to implement special code to get the logged in status and decide the database queries checking that status. I wonder if I can also use the scopes in here, such as read:public, read:moderator etc…
Please consult our newly released React Authentication By Example: Using React Router 6 for guidance on how to integrate Auth0 with a React Router v6 application. While the guide uses React v18, the same architecture would apply to an app that uses React v17.
For the application that you described, you may benefit from this code sample which includes Role-Based Access Control (RBAC):
However, for the type of access that you are establishing, you may benefit from Relationship-Based Access Control (https://openfga.dev/) or Auth0 Fine Grained Authorization (https://docs.fga.dev/, which is on Dev Preview).
Another resource that can help you is the following blog post:
This tutorial covers the concept of an admin role in much more detail than the Authorization Guide for Express.js.
While we are not able to provide too much guidance into a specific architecture for an application, we believe that these resources can get you on the right track.
for guidance on how to integrate Auth0 with a React Router 