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

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

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

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

2 Likes

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

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.