CORS issue with Single-Page App Authentication Using Cookies

Help
, ,
1

Our application is exactly the scenario mentioned here: Authenticate Single-Page Apps With Cookies

What is done?

  1. I used the GitHub - auth0/express-openid-connect: An Express.js middleware to protect OpenID Connect web applications. nodejs middleware to provide the /login and /logout APIs as required

  2. Certain paths to my application is protected using the above middleware

Observed behavior:

  1. User is NOT logged in via the authorization server (my tenant)

  2. User tries to access the protected web page which makes call to a protected path

  3. JS code on the page tries to call the path to the backend server

  4. Backend server detects the user is NOT logged in, and sends 302 redirect to Auth0 authorization endpoint on my tenant viz. /authorize

  5. The /authorize endpoint is then redirecting the browser to the /login endpoint

  6. The /login API is sending back a HTML with the embedded auth0.js lock script

Is this the expected behaviour of this approach? This means that every separate page that wants this authentication will need to re-render the whole page using the HTML with the embedded auth0.js lock script sent back as response.

At step 6, when I logged in as the user (Auth0 database connection), the login fails with the errors below:

auth0_error
auth0_error3310Ă—154 47.9 KB

Question:

  1. I understand the CORS issue, but if Auth0 server does not include “Access-Control-Allow-Origin” set to “localhost” (as expected when set in the Application’s Allowed Web Origins and CORS settings), then how can we test this against a local dev server? The browser is enforcing CORS policy because Auth0 is not sending back the “Access-Control-Allow-Origin” set to the value (https://localhost) defined in the “Allowed Web Origins/CORS” (localhost for local dev).

  2. As per the tutorial here: Authenticate Single-Page Apps With Cookies

  1. The user is prompted to authenticate themselves using whatever method the authorization server presents
  2. The authorization server POSTs the tokens to the redirect URI as a URL-encoded form post. The backend is able to retrieve those tokens by parsing the body data.

How can the Authorization Server POST to localhost? How can we test this in local setup?

1 Like
3

Hi @veetil09,

Thank you for posting in Auth0 community!

Do you know if you are using auth0.js for your custom login? If so, it looks like you should be using the webauth.login() method. Here is some documentation for the webauth.login() method: https://auth0.com/docs/libraries/auth0js/v9#webauth-login-.

Can you try to updating the cross-origin-auth parameter to true in your app using the Management API. I would suggest to first do a Get Client to get the body schema, so as not to lose any data. Once you have the body from the get client endpoint, you can use the Update a Client endpoint to update the cross-origin-auth parameter.

Please let me know if you have any questions.

4

I’m facing that same problem. It seens that the prefligth request is not sent from the browse.
I beleive that it is not an Auth0 problem, it is the browser that didn’t make the preflight request.