Hey, so I’ve followed the quickstart guide for a React SPA, and managed to get my auth system working locally. In the relevant fields of my Application Setting, I’ve put localhost:3000, alongside the live domain and all the necessary routes for both too. (E.g. localhost:300/App, domain.com/App).
As mentioned in the subject, this setup works great locally. After met with auth0’s login screen, I get redirected to /App with access to the returned Token.
However, when on my domain, after clicking login via auth0’s login screen, I do not have a Token returned to me. The Network tab on my console shows a 404 vs a 200 when comparing the live environment to localhost.
Not entirely sure why this is the case, and would appreciate some pointers:
EDIT: So, I switched loginWithRedirect() for loginWithPopup() and now it seems to be working fine (par the redirect, but I can implement that manually). This seems more like a workaround than a fix though, so would still appreciate help on why loginWithRedirect() isn’t working as intended
Glad to hear your app is working with loginWithPopup. Regarding loginWithRedirect, looking at the network requests, it looks like the 404 is returned for the /App route in your app. When you use loginWithPopup and visit the /App route, are you still getting a 404? It looks like that route might be missing in your deployed app or there could potentially be some CORS issues preventing the page from loading. If it is a CORS issue, a failing OPTIONS request might be hidden in Chrome, but there should be an error in the console tab if that is the case.
Since it’s not the /token and /authorize requests that are failing, I think your Auth0 settings are fine.
With loginWithRedirect, I get the 404 on the redirect to /App (via the callback url). This was the cause for my original post. There doesn’t seem to be a CORS error in my console, but I did notice this:
Which is obviously interesting because /App definitely exists. When I navigate to it manually (either by following the logic of the code snippet above, or by manually typing /App in the URL bar), I see the expected page for when the user still isn’t logged in (i.e. isAuthenticated is false). How could I check whether this is a React Router error or an error with Auth0? Again, want to emphasise that this isn’t happening on on localhost…
That is strange about the /404 for /App. Since it is working with loginWithPopup and your tenant is not returning any errors, I believe this is a React Router error.
You may want to take a look at this example app in this blog which uses react router: