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
4 Likes

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.

4 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.

1 Like

Wasted almost 2 days on this, this post is an answer to some frustrated prayers.
Thank you.

2 Likes

Same here. Unbelievable.

Good afternoon everyone :wave:

I apologize for the delay in responding to this Community topic as it has just come to my attention. Reviewing what is detailed here, I can understand how frustrating an experience like this can be. My team and I will review what is described here and share the feedback. Thank you for your patience while I look into this.

3 Likes

For a few days, I was afraid I was the only one experiencing this problem. Thank-you to the other community members for confirming a similar experience ! And a proactive thanks to @James.Morrison
for some work on providing clarification and/or relief.

1 Like

Thanks for your patience everyone. I was able to confirm this behavior, and will submit a bug report.

To confirm, this issue occurs when you:

  • Create a new tenant
  • Switch the Default App Application Type to SPA
  • This should change the Token Endpoint Authentication Method to None, but it doesn’t. Instead, it stays at POST.
1 Like

I do have the same issue here ! do you folks have some resolution timeframe ?

1 Like

@timothee.clain_hommi You can fix this issue by switching to a regular web app then back to a SPA.

There is a fix incoming, but I don’t have an exact date.

1 Like

Same here! Took me an hour to find this topic, thanks for such good documentation Chad!

1 Like

@James.Morrison Can you provide ETA on when this will be properly repaired ?

1 Like

Hi @chad.burkins,

I don’t have an ETA, but a fix is actively being worked on and should be coming soon.

2 Likes

Thanks @dan.woda! This solved my issues.

1 Like

Glad this helped you figure it out @matthewrossanderson :smile: