OAuthError: Browser requests to the token endpoint must use Proof Key for Code Exchange

Questions OAuth/OIDC
1

I am getting The following Error : { "error": "invalid_client", "error_description": "Browser requests to the token endpoint must use Proof Key for Code Exchange." }
while going to authenticate with the Okta.
here is my Api token Request:

curl --location --request POST 'https://example.okta.com/oauth2/v1/token' \
--header 'authority: example.okta.com' \
--header 'accept: application/json' \
--header 'accept-language: en-IN,en-GB;q=0.9,en-US;q=0.8,en;q=0.7' \
--header 'cache-control: no-cache' \
--header 'content-type: application/x-www-form-urlencoded' \
--header 'dnt: 1' \
--header 'origin: https://domain' \
--header 'pragma: no-cache' \
--header 'referer: https://domain/' \
--header 'sec-ch-ua: "Chromium";v="118", "Google Chrome";v="118", "Not=A?Brand";v="99"' \
--header 'sec-ch-ua-mobile: ?0' \
--header 'sec-ch-ua-platform: "macOS"' \
--header 'sec-fetch-dest: empty' \
--header 'sec-fetch-mode: cors' \
--header 'sec-fetch-site: cross-site' \
--header 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36' \
--header 'x-okta-user-agent-extended: okta-auth-js/7.4.3 @okta/okta-react/6.7.0' \
--header 'Cookie: JSESSIONID=170CE91EC697490ECFA09BA0F82C1B4C; proximity_1f9ef752d4bf75b63a55dcc7d276ae9a=eyJ6aXAiOiJERUYiLCJwMnMiOiJNbi0wMllEQ0RXSElqdk8xODZISnJ3IiwicDJjIjoxMDAwLCJ2ZXIiOiIxIiwiZW5jIjoiQTI1NkdDTSIsImFsZyI6IlBCRVMyLUhTNTEyK0EyNTZLVyJ9.4KvqMHeDowQM353vhbsNU0kIngyPEwQ1lGjVGKFaQsmZARSvv04LfQ.imdnhQK6WRakkTIH.wIDJvB7mENzSqlibUXlMIj9li1f9LHJXHOlLEo19OcGeZx7LZJ9ceuaDxQNVb1mgMTtOz9DM-asEl6rOdDEa9_o1RTPaqazxB5-jceh-fwOfucE0pZOghsSmeiYIAdusULtqDD0ERzlWdpBzm0xldZ3r46aOKeBuBOgKbkg11aPS6Q.4OkI9pkzooafoRCHnICQfw' \
--data-urlencode 'client_id=XXXXX' \
--data-urlencode 'redirect_uri=https://crm-dynamicmedia.corp.adobe.com/login/callback' \
--data-urlencode 'grant_type=authorization_code' \
--data-urlencode 'code_verifier=eecf7ee9fab8496b3d5219fa7530af1068a5f08efe0' \
--data-urlencode 'code=HhKeUnuXj6lrx83ksUAFD2Eh3bp9EWuSg9awQi_gKAI' \
--data-urlencode 'client_secret=XXXXXXX'

And My Okta Config:

export const oktaConfig = {
    issuer: `https://example.okta.com`,
    clientId: `XXXX`,
    clientSecret: `XXXX`,
    redirectUri: `https://domain/login/callback`,
    scopes: ["openid", "profile", "email"],
    response_type: ["id_token", "token"],
    response_mode: "fragment",
    pkce: true,
};

i also saw some of the okta community posts for the same but did not get any success.
please help me out for the same. Thank You.

2

Couple of things:

  1. Did you create a Web App or a SPA within Okta for this integration? It sounds like you have a client secret granted for this application, so I assume this is a Web app. How are you attempting to make this /token request? If, per your example, you are using Curl, can you try removing the Origin header, so it stops looking like cross-site request?
  2. Your oktaConfig shows a response_type of ["id_token", "token"]. This doesn’t match pkce:true being set later. Are you trying to use Auth Code flow with PKCE, or are you trying to use Implicit flow?
3

Hello @andrea ,
as i am authenticating with the PKEC, and i have removed response_type of ["id_token", "token"] and i am authenticating from my application end not from Direct api but for debug purpose i get the token api an di found the above error in response, but when i remove my origin header Api got worked correctly. so in this case Should i whitelist the domain or is there any other way to do that?

Thank you.

4

Yeah, the “Origin” header being present in the /token request is what ended up making Okta think this was a request being made in the browser.

As long as your application is going to make this /token request (or similar requests, like /revoke and /introspect) from the backend/server-side instead of from the frontend/client-side, then you don’t need to worry about configuring a Trusted Origin to allow CORS requests. That is, unless/until you are running into an issue where your application front-end is trying to make a CORS/Fetch/AJAX request to Okta (e.g. to /api/v1/sessions/me)

5

Hello @andrea ,
Thank you for your response,
As my authorisation request is cross origin request from my frontend application ,in this case i need to register my application with call back, and then i got the client_id and Client_secret and the i make auth request, and also i have added my domain in trusted origins but still getting 401 Unauthorised and OAuthError: Browser requests to the token endpoint must use Proof Key for Code Exchange. response so in this case do i am missing anything or need to add some more configurations as well ?
Thank you.

6

Is this a SPA, where the application itself will be making the /token request client-side? If so, you should have a SPA within Okta, which will give you a client without a Client Secret so that the /token request can be made within the browser with PKCE flow as well.