Correctly brought to login portal through backend, but not through frontend

Help
1

I’m building an Express backend to a React app. I am at the step where I am using OIDC to authorize through Auth0.

I would like to be able to bring up the login portal in my React app.

I am currently able to bring up my login portal if I go directly to the Express URL in the browser, but I get an error if I press my login button in my React frontend.

My backend code is based off of [this code](My code is based off of this code. My frontend code is very basic:

...
function App() {
  async function login() {
    let res = await fetch('https://localhost:4000/auth',
      {
        method: 'GET',
      }
    }
  }

  return (
    <div>
      <Button onClick={login}>Login</Button>
    </div>
  )
}
...
/*
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://xxx.auth0.com/authorize?client_id=xxx&scope=openid&response_type=code&state=xxx&code_challenge=xxx&code_challenge_method=S256. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Login:  TypeError: NetworkError when attempting to fetch resource. App.js:19
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://xxx.auth0.com/authorize?client_id=xxx&scope=openid&response_type=code&state=xxx&code_challenge=xxx&code_challenge_method=S256. (Reason: CORS request did not succeed).
*/

I am running both the express and react dev servers behind a caddy reverse proxy so that they are secured by TLS during local testing.

When I try to press the login button, I get a 302 response from express, then another 302 response after the request is redirected to xxx.auth0.com. Then the error occurs. When I just go to the express backend URL in the browser (e.g. https://localhost:4000/auth ), then I am redirected correctly to the Auth0 login prompt.

Why am I not redirected properly in the React app? Why does it generate an error? What should I do to fix this?

2

The backend endpoint is redirecting to Auth0 (HTTP redirect) which will then display a login page to the user so that the user can interactively authenticate (provide credentials and so on).

However, your React application is calling the backend endpoint programatically (using fetch) which means the code just tries to process the redirects in order to get a final HTTP response that would be returned. However, the final HTTP response is the login page HTML and that is not meant to be returned to code; it’s meant to be display by the browser so it does not allow CORS.

If you replace the fetch call with a simple window navigation (window.location.href = "https://localhost:4000/auth") or completely replace the button with just a link you should see the redirect and the login page being shown by the browser.