Auth0 works locally, but 404s on domain

[nihir]

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).

My Auth0Provider component:

<Auth0Provider
domain=<AUTH0_DOMAIN>
clientId=<CLIENT_ID>
redirectUri={`${window.location.origin}/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:

Live (on domain.com)

Localhost

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

[stephanie.chamblee]

Hi @nihir,

Welcome to the Community!

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.

[nihir]

Hey Stephanie! Thanks for the response.

So, when I use loginWithPopup, I use an await for its completion, and then when ifAuthenticated is true, I manually redirect the user:

  const handleActualLogin = async () => {
    await loginWithPopup();
    if (isAuthenticated) {
      setJustLoggedInState(true);
    }
  };

  if (justLoggedInState) {
    return <Redirect to="/App" />;
  }

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…

[stephanie.chamblee]

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:

The Complete Guide to React User Authentication with Auth0