Authorize:1 Failed to load resource: the server responded with a status of 400 () in VUE SPA

Get Help
1

I have developed a VUE SPA that uses Auth0 authentication and authorization platform.
I used @auth0/auth0-spa-js implementing also social logins.
This VUE SPA works fine except for the following scenario that, sadly, for some users/clients is quite common.

  • Using the login button the user authenticates and is correctly redirected to a general page
  • VUE protected routes, on the client-side, and REST API with a protection middleware based on JWT, rules access to “reserved” portions of the VUE SPA
  • finally, the user closes the browser, without logging off!!!
  • later on (authentication token expires after 90’, here I’m meaning after at least this amount of time), the user re-open the browser and tries to log in again

This causes the following error:
authorize:1 Failed to load resource: the server responded with a status of 400 ()

What is wrong with it? How to fix this issue?

Below further details (some fields replaced with XXX):

https://airheritage.eu.auth0.com/authorize?clientId=XXXXXXXX&audience=https%3A%2F%2Fairheritage.portici.enea.it%2Frest%2Fapi&client_id=l3OmvfIx4dfqzLWkbpp1Zv5srtGGf22K&redirect_uri=https%3A%2F%2Fairheritage.portici.enea.it&scope=openid%20profile%20email&response_type=code&response_mode=web_message&state=XXXX&nonce=XXXX&code_challenge=XXXXX&code_challenge_method=S256&prompt=none&auth0Client=XXXX

image
image936×924 48.9 KB

  • SDK is regarding: @auth0/auth0-spa-js
  • SDK Version: 1.15.0
  • Node: 14.17.0
2

Finally solved…I had to add the correct url (domain from which the VUE SPA is served) to “Allowed web origins” & “Allowed Origins (CORS)” !!!

3

Glad you have figured it out and thanks for sharing with the rest of community!