Auth0-spa-js: Follow React example fails with 401 from POST to /oauth/token

[SaladFork]

Description

Following the example for integrating this library into a new React app, using an existing client ID and domain which work with an older implementation of Auth0, result in a 401 Unauthorized response from /oauth/token.

Reproduction

Follow steps in the docs: https://auth0.com/docs/quickstart/spa/react

• $ npx create-react-app my-app
• $ cd my-app
• $ npm install react-router-dom @auth0/auth0-spa-js
• Create src/utils/history.js with provided content
• Create src/react-auth0-spa.js with provided content
• Create src/components/NavBar.js with provided content
• Update src/index.js with provided content
• Create auth_config.json with my working domain and clientId
• Update src/App.js with provided content
• Read "At this point, you should be able to go through the complete authentication flow: logging in and logging out."
• On attempting, get 401 Unauthorized error thrown

Checking the Network tab of the dev tools, a POST to https://<mydomain>/oauth/token faled with a 401. It had a payload including client_id, code, code_verifier, grant_type, and redirect_uri (which is on the allowed list).

Environment

• Version of this library used: 1.8.2
• Version of the platform or framework used, if applicable: React 16.13.1
• Other relevant versions (language, server software, OS, browser): Chrome
• Other modules/plugins/libraries that might be involved:
  
  
  
  • React Router Dom 5.2.0
  
  
  • React Scripts 3.4.1
  
  

[stevehobbsdev]

@SaladFork Could you please check your Auth0 logs to see if you're getting any errors relating to silent authentication?

Most of the time when we see this problem it's because the Auth0 client has not been configured correctly (missing or incorrect Allowed Web Origins, for example).

[SaladFork]

It shows up in the Auth0 logs with Type Failed exchange and Description Unauthorized.

This is using a clientId and domain that are working with a production React app today (even works when run locally on the same localhost:port origin), though it uses auth0-js (what was recommended at the time). I am trying to update this app to the latest Auth0 recommendations (and take advantage of the new hook implementation).

[stevehobbsdev]

This feels like configuration - have you tried with any other Auth0 clients and/or different domain value?

For example, does the app exhibit the same problem with these values?

• Domain: brucke.auth0.com
• Client ID: BWDP9XS89CJq1w6Nzq7iFOHsTh6ChS2b

[benjefferies]

I'm also experiencing the exact same scenario with the error code feacft

[benjefferies]

So I managed to fix this problem by enabling OIDC compliant in the application (advanced settings) and token_endpoint_auth_method to none

[psehgal]

I get this too. I followed the instructions for setting up the single page app exactly. From the react app, I'm seeing the same stack trace as you have in your photo @SaladFork, and I'm also getting the feacft error code in the logs.

[psehgal]

@benjefferies, your solution works. I.e., setting token_endpoint_auth_method, but is the correct solution? Changing this setting is not mentioned anywhere in the guide.

Btw, @stevehobbsdev, that Domain/Client ID work for me without any issues as well. How is token_endpoint_auth_method configured for that app?

[benjefferies]

Looks like it should be set to none according to the dynamic registration page which is just a programmatic way of creating the application I believe. https://auth0.com/docs/api-auth/dynamic-client-registration

Optionally, you can set a value for token_endpoint_auth_method, which can be none or client_secret_post (default value). Use token_endpoint_auth_method: none in the request payload if creating a SPA.

It'd be nice to know the reasoning behind this?

[stevehobbsdev]

Let me dig into this, configuring token_endpoint_auth_method should not be needed here at all.

[stevehobbsdev]

Can you confirm that your dashboard is configured like so? Your Auth0 client "Application Type" settings should be set to "Single Page Application" when using this SDK. In this configuration, you should be unable to configure the Token Endpoint Authentication Method setting.

[benjefferies]

I was using the auth0 provider in terraform which allowed me to get passed this validation

[stevehobbsdev]

Ah! I see. Let me raise that internally.

[stevehobbsdev]

@SaladFork can you confirm that you're seeing the same configuration problem and can fix it?

If so, I'd like to close this as it's more Auth0 client config than an issue with the SDK.

[SaladFork]

Thanks for following up. I do not have it set to "Single Page Application" because we are using it not only for our React app but also in other service-based scenarios as well. We have one case where we are generating our own compatible JWT as well.

Enabling OIDC compliance does seem to get me past this error but breaks our desired user experience flow (it shows up as our internal service name requesting permission to some underscored fields?). Our login UX right now with auth0js is that you click a login button and then are either redirected to our SSO or, if you're already logged in to that, are just immediately reloaded into an authed version of the app. This newer flow is a no-go.

I've created an internal ticket to explore OIDC compliance internally as it does seem like this is the future Auth0 path:

Any new Auth0 features, examples and documentation moving forward will target only the OIDC-conformant pipeline. All Auth0 SDK versions that depend on the legacy pipeline are deprecated and will not receive updates for new features or non-critical security issues, and will eventually be discontinued.

Until then, am I to understand that we are not able to use this library or the official hook-based Auth0 approach?

[stevehobbsdev]

it shows up as our internal service name requesting permission to some underscored fields?

Have you got a screenshot of what you're seeing? Are you using the classic or the new login experience? There are some differing behaviours between the two, just want to be clear about what we're talking about.

it does seem like this is the future Auth0 path

It is, absolutely.

I do not have it set to "Single Page Application" because we are using it not only for our React app but also in other service-based scenarios as well

Do you have the opportunity to use different Auth0 client apps depending on where you're authenticating from? i.e. have one for your SPA, and other clients for your other services.

[stevehobbsdev]

Closing this issue as it does not relate directly to this SDK and is more Auth0 configuration. @SaladFork feel free to continue the conversation if need be, but also your questions around config and flow may be better answered in our Auth0 Community forums.

[cbrwizard]

I just had the same issue. I followed official React tutorial, but /oauth/token was returning 401 and the logs were not helpful at all. My solution was to go to Auth0 settings -> Applications -> Application Properties, change Application Type from Single Page Application to Regular Web Application, then switch Token Endpoint Authentication Method from POST to None, then switch Application Type back to Single Page Application. I'd say this is a dev UX bug at least.

[stevehobbsdev]

It feels to me like a possible bug on the dashboard side, let me raise it internally. Thanks for the report!

[stevehobbsdev]

@cbrwizard Just to check, do you know how your Auth0 client application was created? You can't create a SPA application type with the token endpoint auth method set to something other that None through the dashboard UI, but you _can_ if you use the Management API to create this app. Or were you using the Default application that is created for you automatically?

I would expect that if you were to create a new one now and configure you application to use that one, you probably wouldn't have run into this problem. Just trying to ascertain how you ended up with a SPA app with the token endpoint auth method set to POST.

[cbrwizard]

@stevehobbsdev I don't remember unfortunately. I did all actions through website UI

[Azatik1000]

I had the same problem. I switched to Single Page Application and everything started working.

[cfoust]

Just want to bump this up because I had the same issue. I did the same thing as @cbrwizard . It was disorienting as someone trying this out to find that it didn't work! For product onboarding it seems pretty critical.