I have this same issue. Another person said that the URL should be in “Allowed Web Origin” too, but it already is. So, I don’t know what I’m doing wrong. I tried to run the guide in 3 situations:
Adapting it to my project;
Following what is exactly in the guide (using the same starter project);
Using the main branch of the guide.
All of them the login information is not persisted when reloading the page. Any help?
Who is having the issue that login isn’t persisted when page is refreshed, you’ll need to activate the “Refresh Token Rotation > Rotation” option and add it to your Auth0Provider props. So it’ll be like that (useRefreshTokens and cacheLocation added):
Are you using a linter addon like Eslint/Prettier? So you could know where the problem is. It’s a syntax problem, maybe you have mistyped a bracket or something like that.
Warning: React version was set to “detect” in eslint-plugin-react settings, but the “react” package is not installed. Assuming latest React version for linting.
Sorry for the late response, I completely forgot about this issue. Meanwhile, I was rewriting my React app to TypeScript. I was going to confirm the SDK version that I’m using and I tried to remove useRefreshTokens and cacheLocation props that I mentioned above. Turns out that it is working now… I really didn’t change anything. I’m a inexperienced developer and I’m just doing a hobby project, but I really didn’t change anything from the code I wrote before. I’m literally “copying and pasting” my old JS repository and trying to use TS.
Well… Thank you anyway for being so attentive with me. I really don’t know how to feedback you about what happened so we could try to solve this possible issue. It’s curious that this didn’t happen only with me. Anyway, thank you again.
Howdy, Uferekalu! Thanks for reading the tutorial.
If you are getting that error message, please be sure that the API has CORS enabled for the client domain. The API sample provided has that in place If you are using the sample, try to refresh the page, please.
I am having an issue with the ProtectedRoute component that doesn’t exist if I use withAuthenticationRequired directly in the export statement of the component that I am trying to protect. I have a web app that contains routes like the following:
This creates an error that I can’t really explain, but it prevents the state within the Sidebar component from changing the sidebar’s appearance and rendered components.
Here is a link to a codesandbox on how the sidebar should work (no auth0).
When using ProtectedRoute as in the code above, the active class on the navbar links changes, but the rest of the content stays the same.
However, if I instead take the ProtectedRoute off of the Home component, but use withAuthenticationRequired on the export of the Home component, like so:
export default withAuthenticationRequired(Home, {
onRedirecting: () => (<div>Redirecting you to the login page...</div>)
});
and
<Route path='/home' component={Home}/> //instead of ProtectedRoute
Then everything works as it should.
My questions are:
Why is the ProtectedRoute component behaving differently from when withAuthenticationRequired is at the export level?
Do I need to protect routes that are nested within a protected route?