PKCE flow with securing-vue sample app. POST to /oauth/token yields 401 forbidden

Hello,

I’m following the Getting Started guide at GitHub - NotMyself/securing-vue: A Vue.js example application for demos. to get that sample app set up. (I am planning on adding oauth2 support to an existing Vue.js application, and am training up using this sample app.) Looking at the network traffic in Chrome for the PKCE flow as seen at Authorization Code Flow with Proof Key for Code Exchange (PKCE), everything seems to be going OK, including logging in, up until step 7 described in that page.

The POST to https://dev-ddubois.us.auth0.com/oauth/token is failing with a 401 {“error”:“access_denied”,“error_description”:“Unauthorized”}. The payload for the request is:

{
“grant_type”:“authorization_code”,
“redirect_uri”:“http://localhost:8080”,
“audience”:“https://startup-battle”,
“client_id”:“Nl…tx”,
“code_verifier”:“hb…Jl”,
“code”:“AI…OG”
}

As instructed in the securing-vue guide, I have created up an API at https://manage.auth0.com/dashboard/us/dev-ddubois/apis called “API for securing-vue” that has the “https://startup-battle” Identifier.

The document does not describe making any changes Permissions tab, and I have not done so. Should I? I see that an earlier GET call in the flow to https://dev-ddubois.us.auth0.com/authorize?client_id=Nl… had references to “scope: openid profile email” in the query string, so I thougt mayb eI was supposed to add those? However, if I try to add “openid”, or “profile”, or “email” to the Permissions (scope) section, I get an red popup “Unexpected failure trying to update api” rejecting the input.

What is causing the 401?

Hi ddubois

I had a similar issue, but with a Spring Boot application.

I fixed it by adding the client_secret to the post request

Hope this helps

Kind regards

Richard