I can not get this work for the life of me. I get the login/signup to run and then once I signup I am redirected back to the home page with this as the url:
console shows no errors and I’ve searched the entire directory for “you-app-domain” to no avail, subsequently clicking on “Log In” just refreshes the page.
I’ve also switched to the main branch thinking that maybe I messed up with my code and its still not working. React Dev tools are showing the correct clientId and domain in the component.
Edit*** Figured it out, it was one of the rules I had made for connecting with Hasura. Is there a way to make rules only apply to a single app?
You can make a rule app-specific by adding a check for the context.clientName at the beginning of your rule like this:
function ruleForSpecificApp(user, context, callback) {
// only run rule for NameOfTheApp
// bypass this rule for all other apps
if(context.clientName !== 'NameOfTheApp'){
return callback(null, user, context);
}
// add rule logic here
return callback(null, user, context);
}
@dan-auth0 Kudos on a great guide to React Auth, well written and explained!
Has there been any update on a Role-Based Access Control guide with the new SDK? I tried to follow the outdated article you put up on the subject before but was outdated with what I have at the moment.
My use case is for a SAAS app where there a few admin users for the app as a whole. The app can then be used by different organisations where each organisation has different roles that are restricted to certain components.
Be welcomed to the Auth0 Community, Tom! I have been doing extensive research on the RBAC solution that Auth0 offers and finding out the best use cases to which it applies. I am currently working on a project that will make it easier to share this type of knowledge with our developer community. Next week, I’ll be working on the RBAC draft for React.
What I have right now relies entirely on roles. Do you think that your multi-organization use case could still be fulfilled with roles only or would you need to access user permissions discretely in the client application?
First of all - and like everyone said before me - this was a great tutorial! Everything worked fine for me on first try (an I was previously having troubles with the Auth0 SPA SDK…).
To go further, I would like to redirect new users (i.e. after signup) to a specific path (say “/:locale/onboarding”). Do I create a rule which would override any redirect url (and how)? Or do I put a custom logic in the ProtectedRoute component (assuming I get access to the user stats like loginsCount)?
I can’t find a good example of using the claimCheck on the React SDK. I thought the Complete guide to react authentication would have it, but I do think this feature was only recently introduced to the SDK. When I try and use it, it says this function is not defined in the library. Any help would be greatly appreciated!
I want to add scope to my token, then I want react to route users away from routes they don’t have scope to view.
Any updates or plans to update this guide for React v17 along with React-Router V6? This guide is severely outdated at this point, particularly with the react-router v6 changes.
On the short list:
The recommended method of rendering something with a <Route> is to use children elements.
The <ProtectedRoute /> HOC does not do that. It uses <Route component> to call withAuthenticationRequired().
const ProtectedRoute = ({ component, ...args }) => (
<Route
// show the component passed here only after authentication.
// display the Loader component while redirecting to auth.
component={withAuthenticationRequired(component, {
onRedirecting: () => <Loader />,
})}
{...args}
/>
React Router ignores withAuthenticationRequired(), and route protection fails.
Warning: You should not use <Route component> and <Route children> in the same route; <Route component> will be ignored.
Guidance about protecting routes while using the best practices from React Router would be appreciated.
Howdy! I’ll be providing a code sample that uses React Route v6 in the next weeks. I would not say this guide is outdated in the sense that there are still many code bases depending on React Route v5. As such, this guide will continue to support that version of React Router. A new guide may be published early next year that covers React Router v6 and React 17 based on the upcoming code sample.
Great job with the guide. As I’m also using React Router v6, everything up to the Protected Routes part worked very well for me.
Hope you’re having a good holiday rest, and looking forward to seeing any updates with regards to the Auth0 updates for React Router v6 in the upcoming year.
Thanks again, and really good job, my friend! You’re doing great!
This is, by far, the most comprehensive guide to getting Auth0 set up on your React project.
I would have greatly appreciated this link being included in the Quick Start React guide when I was getting started.
I ran into one problem however where components making an API call with useEffect create an infinitie loop only when using Private Routes.
I have a form component protected by the Private Route as setup in this guide. The form component has a useEffect hook with an empty array dependency to only run on componentDidMount.
This useEffect hook calls a basic Axios.get function to populate a global context component which in turn populates our form fields.
This was working before adding the Private Routes, and continues to work if using a normal route.
Under the private route, the browser begins to chug and throws:
Uncaught (in promise) Error: Maximum update depth exceeded.
This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.
React limits the number of nested updates to prevent infinite loops.
Is there a better way to construct this? Is it possible to include an example in this guide?
I’ve combed through the many different forms of React documentation, but nothing seems to blend Private routes with API calls.
This seems like something that should be easy to setup.
