Content type wrong when getting an Oauth token

Help
, , ,
1

Hi,

I’m trying to implement the SPA login flow (Auth0 Vue SDK Quickstarts: Login) for an existing Auth0 application. We are migrating from machine-machine login to OAuth login in the browser.

I’m seeing an error when trying to exchange a “code” for an oauth token use the Auth0 SPA JS library. The response from Auth0 is {"error":"access_denied","error_description":"Unauthorized"} and this is caused because the request is sent with the application/json content type (due to auth0-spa-js/utils.ts at fd21bc5806fa3bc30a854779bbffeb648fb6e7bd · auth0/auth0-spa-js · GitHub). If I construct an equivalent request with the application/x-www-form-urlencoded content type then I get a token back in the response and everything works.

Is there a setting on my Auth0 Application that I can change to allow application/json requests?

Here’s the failing request (copied from dev tools)

curl 'https://redacted.eu.auth0.com/oauth/token' -H 'Sec-Fetch-Mode: cors' -H 'Referer: http://localhost:8081/login?code=redacted&state=Q0otOC1jMW0wVlJvR0h1MUJVSkhqaWxSdlpmVWp6fkNwd010QkNNUTdmMQ%3D%3D' -H 'Origin: http://localhost:8081' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36' -H 'Content-type: application/json' --data-binary '{"grant_type":"authorization_code","redirect_uri":"http://localhost:8081","client_id":"redacted","code_verifier":"RZ88iGYNaJIcb~GxUocHEhHdOVfOErwqIuZUpmdieoE","code":"redacted"}' --compressed
2

Found it!

You have to set the Application Type to “Single Page App” in the Application settings.

1 Like
3

I had a difficult to diagnose issue with this.

The issue was that whilst my Application Settings, were set to “Single Page App”, the setting had not be saved.

I had to change the Application Type to something else, save the Application Settings, and then change the Application Type back to “Single Page App”, and save the Application Settings again

1 Like