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
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)
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
Yup, there’s a much shorter (though still somewhat strange path) to achieve success:
Create a new tenant
Set it up (e.g. callback URL’s)
Confirm 401’s when sending in a valid code to /oauth/token
Change “Application Type” to “Regular Web Application”
Change “Token Endpoint Authentication Method” from “POST” to “None”. (Seems to be important part
Confirm modal “… will disable the Client Credentials grant for…”
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.
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.
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.
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.
