After looking at the requests being sent in the dev console I saw that only the
response_mode parameter “web_message” was throwing errors. From the documentation I saw:
This response mode is defined in OAuth 2.0 Web Message Response Mode specification. It uses HTML5 Web Messaging instead of the redirect for the authorization response from the /authorization endpoint. This is particularly useful when using Silent Authentication. To do this response mode, you must register your app’s URL at the Allowed Web Origins field in your Auth0 application settings.
Obviously, I had forgotten to put the URL in the
Allowed Web Origins section in the settings.
For the authors: Since I’m a beginner and I stumbled upon this issue, maybe it’s useful to explain how the caching works and that you have to set up the
Allowed Web Origins field as well. Right now, I know that it works but am not sure how the
I’ve been going through this guide and implemented my own react app.
However, I have the problem that the user information will not be cached for navigation after the login.
So what happens is that the user logs in & I can render user information. However, as soon as I navigate to a different page the user is cleared and has to login again.
Now, from the guide I understand that Auth0Context should provide & cache that user information. In order to expose the Auth0Context to child components of my app, I have to wrap the
<Auth0Provider/> component around it, which I did. Also, I push the redirect call to React Router’s history with the
<Auth0ProviderWithHistory /> component.
From my understand this should be sufficient for Auth0 Provider to correctly cache the user information, which it unfortunately does not do.
Here’s a screenshot of the hierarchy of React components after a successful login (but, like I said, upon navigation it will clear the authentication).