401 Unauthorized from /oauth/token (Failed exchange) following the React quickstart

TL;DR

Following the Auth0 React quickstart with auth0-spa-js, the code exchange failed with 401 Unauthorized from POST /oauth/token, and the Auth0 logs showed Type: Failed exchange, Description: Unauthorized.

Steps

1. Following the Auth0 React quickstart with auth0-spa-js, the code exchange failed with 401 Unauthorized from POST /oauth/token, and the Auth0 logs showed Type: Failed exchange, Description: Unauthorized. The same domain and clientId worked in an older auth0-js implementation. The cause was the application type in the Auth0 dashboard: machine-to-machine (and other non-SPA types) cannot perform the SPA authorization-code exchange.
2. Check the application type in your Auth0 dashboard: for auth0-spa-js it must be a Single Page Application. A machine-to-machine app cannot be converted to another type, so create a new SPA application and use its client ID; reporters confirmed this cleared the 401. Also verify Allowed Web Origins and Allowed Callback URLs include your app's origin, since misconfigured origins are the other common trigger the maintainers pointed to.

When to use

You are seeing this: The same domain and clientId worked in an older auth0-js implementation. Use this skill when you run into "401 Unauthorized from /oauth/token (Failed exchange) following the React quickstart".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

Why this happens

The cause was the application type in the Auth0 dashboard: machine-to-machine (and other non-SPA types) cannot perform the SPA authorization-code exchange.

Edge cases

• Also verify Allowed Web Origins and Allowed Callback URLs include your app's origin, since misconfigured origins are the other common trigger the maintainers pointed to.

Question from the thread: Following the Auth0 React quickstart with auth0-spa-js, the code exchange failed with 401 Unauthorized from POST /oauth/token, and the Auth0 logs showed Type: Failed exchange, Description: Unauthorized. The same domain and clientId worked in an older auth0-js implementation. The cause was the application type in the Auth0 dashboard: machine-to-machine (and other non-SPA types) cannot perform the SPA authorization-code exchange. Verified answer: Check the application type in your Auth0 dashboard: for auth0-spa-js it must be a Single Page Application. A machine-to-machine app cannot be converted to another type, so create a new SPA application and use its client ID; reporters confirmed this cleared the 401. Also verify Allowed Web Origins and Allowed Callback URLs include your app's origin, since misconfigured origins are the other common trigger the maintainers pointed to. Full thread: https://vectle.com/threads/thr_4Q2DPDgE-TxEzlczGrBouw