401/Unauthorized when obtaining token in Authorization Code grant

When using the react-auth0-spa.js and the auth0-spa-js, I have to go through an awkward sequence to make my Authorization Code grant work successfully. I’m suspicious it has nothing to do with auth0-spa-js. In short, creating a user works fine, obtaining the “code” works fine. However; when I try to exchange the code for a token via /oauth/token, I’m getting a 401/Unauthorized. I’m not really calling /oauth/token directly of course, I’m using auth0FromHook.handleRedirectCallback().

I can make this work without changing any of my code. But I have to go through a weird sequence of modifying “Application Type” several times. Ideally, I should be able to simply set it to “Single Page Application”; however, I have to go through a longer sequence of settings to arrive back at “Single Page Application”. And before you ask, simply setting to “Native” doesn’t work :slight_smile:

-Chad

I’m working to document the steps I’m going through to make this work, will post shortly.

Here’s the sequence I’m going through to get a basic (Quickstart) SPA application (in React) working. I’m guessing I could probably eliminate a step or two in the middle, but thought that listing my tested sequence accurately would be helpful:

  • Create new Auth0 tenant (which creates default app)
  • Within default app, fill in “http://localhost:3000” to the following:
    • “callback URL”, “Allowed Origins”, “Logout URL”
  • Veryify default settings and test login within SPA:
    • Application Type: is set to “Select an application type”
    • Token Endpoint Authentication Method: field is inactive (greyed out) and set to “Post”
    • Advanced Setting->Grant Types: The following are checked (and unable to be changed): Implicit, Authorization Code, Refresh Token, Client Credentials
  • When using “Authorization Code” flow within a SPA using Auth0 Quickstart example
    • new user: User creation works fine
    • code: Obtaining “code” works fine
    • token failure: When you exchange “code” for “token” via /oauth/token endpoint, you get a 401/Unauthorized
  • SPA: Changing “Application Type” from “Select an application type” to “Single Page Application”
    • “Token Endpoint Authentication Method” remains grayed out, and set to “Post”
    • Within Advanced Setting->Grant Types:
      • “Client Credentials” is now grayed out, but still checked.
      • Implicit, Authorization Code, and Refresh Token remain checked.
    • code: Obtaining “code” works fine
    • token failure: When you exchange “code” for “token” via /oauth/token endpoint, you get a 401/Unauthorized
  • Native: Changing “Application Type” from “Single Page Application” to “Native”
    • “Token Endpoint Authentication Method” remains grayed out, and set to “Post”
    • Within Advanced Setting->Grant Types:
      • “Client Credentials” is now grayed out, but still checked.
      • Implicit, Authorization Code, and Refresh Token remain checked.
    • code: Obtaining “code” works fine
    • token failure: When you exchange “code” for “token” via /oauth/token endpoint, you get a 401/Unauthorized
  • Regular Web Application: Changing “Application Type” from “Native” to “Regular Web Application”
    • “Token Endpoint Authentication Method” field is now active (not greyed out), and set to “Post”
    • Advanced Settings->Grant Types: Implicit, Authorization Code, Refresh Token, and Client Credentials are checked
    • code: Obtaining “code” works fine
    • token failure: When you exchange “code” for “token” via /oauth/token endpoint, you get a 401/Unauthorized
  • SPA: Changing “Application Type” from “Regular Web Application” to “Single Page Application”
    • Receive modal saying “Changing the Application Type from Regular Web Application to Single Page Application will disable the Client Credentials grant for this application”
    • Clicked on “confirm”
    • “Token Endpoint Authentication Method” is now grayed out, and set to “None”
    • Advanced Settings->Grant Types:
      • Implicit, Authorization Code, and Refresh Token are now checked.
      • Client Credentials is grayed out, and not checked
    • Still successfully get “code” when you login
    • Now get a 200/OK when exchanging code for token at /oauth/token
1 Like

Yup, there’s a much shorter (though still somewhat strange path) to achieve success:

  1. Create a new tenant
  2. Set it up (e.g. callback URL’s)
  3. Confirm 401’s when sending in a valid code to /oauth/token
  4. Change “Application Type” to “Regular Web Application”
  5. Change “Token Endpoint Authentication Method” from “POST” to “None”. (Seems to be important part
  6. Confirm modal “… will disable the Client Credentials grant for…”
  7. Confirm happy path (receive 200/OK when sending in that code to /oauth/token)

Here’s my ask:

Seems like when you set “Application Type” to “Single Page Application”, perhaps it should automatically set “Token Endpoint Authentication Method” to “None” ? Seems weird that I have to cycle through other app types, so that “Token Endpoint Authentication Method” field becomes active.

2 Likes

thank you for documenting all of this. I spent about 5 hours wondering why I kept getting 401’s on my /oauth/token route. This cycling through app types and setting none for the Auth method fixed it for me.

Oddly enough, the first tenant I created worked fine in SPA mode, it was the second tenant that wasted an entire day for me.