CORS problem using Express + Create React App + Auth0

[rene]

Hi,
I’m building an app with express as backend (running on localhost:9000) and create-react-app as frontend (in development running on localhost:3000).

I use the auth0 middleware on the backend to authenticate users and everything works fine if I access localhost:9000.

To make development easier, I’d like to serve the frontend on localhost:3000 and have configured a proxy for localhost:3000/api …/login …/callback …/logout to localhost:9000.

Tried various methods here:

Proxying API Requests in Development | Create React App

I now however get the following error in the browser:

Access to fetch at ‘https://[…].auth0.com/authorize?nonce=[…]’ (redirected from ‘http://localhost:3000/api/[...]’) from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

I see

access-control-allow-origin: *

on localhost:3000/login but not for the auth0 urls.

Seems …auth0.com/authorize is redirecting to the relative path ‘/login’ which is proxied by localhost:3000. Strangely it works if I proxy all requests or access localhost:9000. Anyone have an idea how to make this work?

[rene]

I overlooked that I’m also using passport to handle the implementation of auth0 in the backend.

Did some further reading and found this helpful:
https://github.com/auth0/passport-linkedin-oauth2/issues/43

Seems passport is somehow redirecting the browser to auth0, different from just making a call to it. If I access the backend via the create-react-app proxy its not getting back a redirect but the call is made from origin localhost:3000.

Probably would need to change the passport middleware to make this work. Ideas appreciated.

[rene]

Think I figured this out, my desired setup is not possible.

In my case the backend is taking care of authentication. If a user is not logged in, it redirects on the initial pageload to the auth0 login site.

If I’m accessing the frontend separately not through the backend, the initial login succeeds and the redirect is triggered on a subsequent api call. this api call gets a 302 redirect response but this is just a fetch in the app and will not cause a redirect of the browser. comparing the subsequent requests to /authorize

Proper request header following initial pageload

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate, br
Accept-Language: de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7,pt;q=0.6
Cache-Control: no-cache
Connection: keep-alive
Cookie: […]
Host: localhost:9000
Pragma: no-cache
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1

And this is how the fetch requests the /authorize url

Accept: /
Accept-Encoding: gzip, deflate, br
Accept-Language: de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7,pt;q=0.6
Cache-Control: no-cache
Connection: keep-alive
Cookie: connect.sid=s%3AXz-Tvz5gHOsT8zfyrYe2piXtCwNXGtsl.p0rJSllGURcucIpcCohn354WkddsOH%2Fj45HUjr6SKAQ
Host: localhost:3000
Pragma: no-cache
Referer: http://localhost:3000/
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin

Think I need to implement authentication client side if i want the page to redirect if user is not logged in.

[konrad.sopala]

Thanks a lot for sharing that with the rest of community!