Get a 3-Legged Token with Authorization Code Grant (PKCE) for Public Clients

Question

tl;dr: Turns out it was an fetch-request error. Although, in the comments of the answer, it was found that you have to send the code_challenge as code_verifier to the /token-endpoint for making the PKCE-Auth work.

I am building a SPA for connecting to the AEC Data Model. I am following this authentication guide from APS, but i cannot get this to work. Specifically, my problem lies in "Step 3" where i get a "403 Forbidden" error.

There are many steps to make this work, but i am going to try and outline everything that i have done until now:

Create an App

I have successfully created a "Desktop, Mobile, Single-Page App" from the "Create Application" modal. I get a "Client ID" which i use for my app, and i have allowed for all API possible in the "API Access" box, among them the "AEC Data Model API". In this box, it says:

Premium APIs are unavailable for Authorization Code with PKCE grant type.

If i am correct, "AEC Data Model API" is not a premium API, as the "AEC Data Model API" does not aquire tokens, and therefore, this should not be an issue, but please correct me if i am wrong.

Custom Integration

After registering the app in "Applications", i add the "Client ID" to my organizations custom integrations.

OAuth authentication

I now follow this authentication guide.

Step 1: I create a code challenge and a code verifier:

{
    "code_challenge": "eJy4IjlN3Pu8ob27lc07Qw5RESB8lkyhWQlZcdllJf8",
    "code_verifier": "tjPmAq_gC-v91KZ4co9Yw_xiSCCpKX8LfWzKnHO5hRE"
}

And then i redirect the user to the following url:

https://developer.api.autodesk.com/authentication/v2/authorize?client_id=WZJ7JVs9cnCJo70MpwNXbqoI4Y76eyG3RQqAkCUwx6rFjP5P&redirect_uri=http%3A%2F%2Flocalhost%3A5173&code_challenge=eJy4IjlN3Pu8ob27lc07Qw5RESB8lkyhWQlZcdllJf8&nonce=12321321&prompt=login&method=S256&response_type=code&scope=data%3Aread&state=just-any-state-right

Step 2: I sign in going through the auth flow and i successfully receive a code back (shown together with the verifier):

{
    "code": "ePJW9yuMwW2cR1co-Xmxq_Qwx629KfmGXYMIaJaO",
    "code_verifier": "tjPmAq_gC-v91KZ4co9Yw_xiSCCpKX8LfWzKnHO5hRE"
}

Step 3: I make a fetch request to get the access code. The endpoint is https://developer.api.autodesk.com/authentication/v2/token, and the content of the fetch is:

{
    "method": "POST",
    "headers": {
        "Content-Type": "application/json; charset=UTF-8"
    },
    "body": "{\"grant_type\":\"authorization_code\",\"client_id\":\"myapplicationclientidwhichihavehiddenhere\",\"code_verifier\":\"tjPmAq_gC-v91KZ4co9Yw_xiSCCpKX8LfWzKnHO5hRE\",\"code\":\"ePJW9yuMwW2cR1co-Xmxq_Qwx629KfmGXYMIaJaO\",\"redirect_uri\":\"http://localhost:5173\"}"
}

The response from the request is POST https://developer.api.autodesk.com/authentication/v2/token 403 (Forbidden).

I don't know what i can have done wrong, what can it be?

Answer 1

and the content of the fetch is:

The token endpoint does not want JSON, it wants "form encoding", i.e. application/x-www-form-urlencoded

https://aps.autodesk.com/en/docs/oauth/v2/reference/http/gettoken-POST/#resource-information:

Data Format: Form encoding (request); JSON (response)

Bold highlighting by me; The request is supposed to use form encoding, and the response you'll get, will be JSON.