Success Login and a Failed Exchange

[filip.debacker]

I configured an API and application.
I have an angular app. I can login wit my user.
I see that in the logs (success login).
But than I have a Failed Exchange.
In the chrome dev tools, I see the following:

POST https://xxx.eu.auth0.com/oauth/token 401

[colin.coutts]

hi @filip.debacker and thanks for reaching out to Auth0 Support!

Sounds like that error is related to your Authorization code flow not working as expected, here’s a list of our event type codes which may be useful.

https://auth0.com/docs/logs/references/log-event-type-codes

You mentioned having an Angular application, is it modeled in Auth0 as a SPA or Regular Web Application (RWA)? For front end applications like that we recommend it being a SPA, in which case the Auth Code Flow is not recommended and should use the Implicit Flow, more on that here:

https://auth0.com/docs/architecture-scenarios/spa-api/part-1#implicit-grant

Please review those materials and if you’re still facing issues, could you please send me your tenant in a DM and I can review your setup further.

Best Regards,
Colin

[filip.debacker]

Thanks for the info.
I’ve implemented the authorization like described in the Login and API sample. So that is the Implicit Flow.

https://auth0.com/docs/quickstart/spa/angular2/01-login
https://auth0.com/docs/quickstart/spa/angular2/02-calling-an-api

[filip.debacker]

I created a new Application, now I can login.
But when I check my token with jwt.io, I get a signature error due to padding.

Also, localhost works fine, no error in dev console.

On the prod server, I got an error:

ERROR NullInjectorError: StaticInjectorError[t → t]:
StaticInjectorError(Platform: core)[t → t]:
NullInjectorError: No provider for t!
at t.get (https://fdbapps.filipdebacker.be/main.da36deeb0148d50b543f.js:1:53846)

[sagun786]

@colin.coutts I am getting the same error with my Angular SPA. I followed the Securing Angular Applications with Auth0 and Deploying to Netlify tutorial and I am also getting the FAILED EXCHANGE ERROR for both Google/Facebook Social Logins

{
  "date": "2020-08-13T08:12:55.226Z",
  "type": "feacft",
  "description": "Unauthorized",
  "connection_id": "",
  "client_id": "gNkJFP7YEvD4OrBdbgjHYZzM8XwkhjYS",
  "client_name": null,
  "ip": "116.86.21.67",
  "user_agent": "Safari 13.1.0 / Mac OS X 10.15.4",
  "details": {
    "code": "*************4s5"
  },
  "hostname": "vanna.au.auth0.com",
  "user_id": "",
  "user_name": "",
  "log_id": "90020200813081256620000465921382865527023048504050188338",
  "_id": "90020200813081256620000465921382865527023048504050188338",
  "isMobile": false
}

I am getting this error even after successful SignUp for Angular SPA https://vannatok.netlify.app/

[masaki]

I found the same issue with my react app today.
You can try this.

First, I created a new app setting.
Then I exported my settings, and compare it.
I found differences between old app and new app.
that differences are grant_types and token_endpoint_auth_method.

[colin.coutts]

Hi @masaki @sagun786 and @filip.debacker!

Thanks for reaching out! Let’s see what we can do

Would you mind all sending me your tenant name in a DM as well as a .har file for me to look into this further? More details on that here:

Generate and Analyze HAR Files

Just so I have some clarity on this, are you seeing these errors on all logins or are they specific only to Social Logins (Facebook/Google etc.)? Also is this issue only when you deploy your app or is it reproducible locally as well?

@masaki

I found differences between old app and new app.
that differences are grant_types and token_endpoint_auth_method.

@masaki what were the differences that you noticed? The token_endpoint_auth_method should be set to none for a SPA, this would be worth confirming as that could cause an Unauthorized error.

Best Regards,
Colin

[sagun786]

I have shared the details on an email(DM) with you @colin.coutts. I am still not sure what’s not working inspite of a well laid out tutorial. @masaki did you find any luck resolving this bug (please can you share some links if you have managed to resolve this)

[masaki]

@sagun786 @colin.coutts
Our issue has been solved by the following changes.

before

grant_types:
  - authorization_code
  - implicit
  - refresh_token
  - client_credentials
token_endpoint_auth_method: client_secret_post

after

grant_types:
  - authorization_code
  - implicit
  - refresh_token
token_endpoint_auth_method: none

[konrad.sopala]

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

[zac.burrage]

Hi all,

Wanted to bubble this up incase this happens to others in the future. I noticed that with the new ‘Credentials’ tab in Application Settings (shown below) in some cases there can be two places to change the token auth method. This tab and the application settings tab, below application type.

If these get out of sync, and they both aren’t set to ‘None’ this can cause problems with the code exchange similar to the problem above (this picture shows what the settings tab should look like, but for some tenants there will still be a dropdown for token auth method. The selection in the credentials tab will override whatever is set here)

For reference I discovered this using the auth0-spa-js library with standard JavaScript in a Blazor Appliction.