auth0-spa-js: Follow React example fails with 401 from POST to /oauth/token
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.jswith provided content - Create
src/react-auth0-spa.jswith provided content - Create
src/components/NavBar.jswith provided content - Update
src/index.jswith provided content - Create
auth_config.jsonwith my workingdomainandclientId - Update
src/App.jswith 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
- React Router Dom
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 29 (12 by maintainers)
I just had the same issue. I followed official React tutorial, but
/oauth/tokenwas 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.I literally just spent 4-6 hours of my life, trying to configure Auth0 (for the first time): banging my head into the wall for the past 2-3 hours trying hundreds of different solutions and workarounds. Did hundreds of ‘sanity-checks’, searching for overrendering in my React app, searching for typos in config. I was even mean to ChatGPT 4 for being useless 😢 …,
Just now found this issue, tried it, and it worked 🙃
TLDR; My app was set to SPA, but I kept getting 401’s. Saw this ticket, switched to ‘Reguler Web App’, switched back to ‘SPA’, and wolla! 🎉
P.S: This is not an SDK problem, as you mentioned before, but I don’t know where else to share this.
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.