I’m currently using Webpack + React + ReactHotLoader for prototyping, and I find it annoying that whenever I make a change in my code, that when the page automatically refreshes, all of the page content is gone (it’s just a blank white page). I have to somehow fix this by changing the url to localhost:8080, and manually clicking buttons back to the page that I was on. Also this is a SPA using react-router.
Am I the only one having this problem? Is there other people who can successfully make changes in their code, and have their app refresh normally? My app used to work normally like that, but now that I added auth0 into it, I’ve been getting problems.
Edit:
Simply added this code before returning my <BrowserRouter> component in the App/Root component:
if (loading) { return <div>Loading</div>; }
Essentially, I didn’t want to run any kind of code relating to the PrivateRouter, until Auth0 had finished loading.
However, now that I have fixed it, every time I load a url that’s a private route (e.g. localhost:8080/home/ using the PrivateRoute component code snippet provided by Auth0), the page will load the page and it will appear on the screen for a few ms, and the url will change to something like localhost:8080/?code, auth and then refresh back to the page where I was at (localhost:8080/home).
Is there a reason as to why the PrivateRoute needs to auth me in again, even if I reload the page or paste the url in another tab in the same window? I thought there would be some things stored in localhost so that it knows that the user is already authenticated?
Note: that when the page gets refreshed automatically with changes in the code, things work as normal (with react hot loader).
However, I should clarify that the new problem is that when you enter a url, it flashes the content for a brief moment, does the auth stuff and then returns a blank page.
The Auth0 JS SDK doesn’t store anything locally unless you do it through your SPA application logic yourself, such as setting a flag isLoggedIn: true in localStorage or alike.
Note though that you shouldn’t store access and ID tokens in a SPA other than keeping it volatile in memory (see Token Storage):
If you have a single-page app (SPA) with no corresponding backend server, your SPA should request new tokens on login and store them in memory without any persistence. To make API calls, your SPA would then use the in-memory copy of the token.
This can happen silently without user interaction as long as the user still has a valid session with Auth0. See the Auth0Client.getTokenSilently method here:
@mathiasconradt Given that I have a backend node.js server, would I be able to fix my issue and allow the user to remain logged in after refresh with this tutorial of yours: Auth0 Express SDK Quickstarts: Login?
I figured I would go with your suggestion and implement in-memory session storing for the time being for development and later add server side session storing.
I’ve done some testing and I figured out why my app always refreshes on its on when entering a page via a url.
Basically, react-auth0-wrapper.js # initAuth0() is being called after the PrivateRoute.js’s useEffect. So essentially PrivateRoute says that the user isn’t authenticated, and then a few moments later, initAuth is called and says that the user is authenticated. But by then its too late and the page has refreshed once.
I’m wondering, is this meant to be normal functionality of Auth0? Are we to manually put in some check (whether in memory or server-side) in the PrivateRoute component to check if the user is authed, prior to initAuth being called?
Simply added this code before returning my <BrowserRouter> component in the App/Root component:
if (loading) { return <div>Loading</div>; }
Essentially, I didn’t want to run any kind of code relating to the PrivateRouter, until Auth0 had finished loading.