3yd37 (3yd37) asked a question.
error_description: "Browser requests to the token endpoint must use Proof Key for Code Exchange."
I am following all the steps, from the official documentation of okta, i.e., https://github.com/okta/okta-vue
After all steps, user get authenticated from Okta and redirected to my app login redirect page. Then I am using okta component 'LoginCallback' for login redirect component. This component hits an API i.e., https://dev-98814822.okta.com/oauth2/default/v1/token.
This API responses as below:
error: "invalid_client"
error_description: "Browser requests to the token endpoint must use Proof Key for Code Exchange."
From the okta form, as per https://support.okta.com/help/s/article/Browser-requests-to-the-token-endpoint-must-use-Proof-Key-for-Code-Exchange?language=en_US
It is suggesting that the issue is with passing 'origin' header from the request. But as I am using okta component 'LoginCallback' and I think, I can't do much about this one.
I have also set the key 'pkce: true' in OktaAuth, but it is not working.
The versions of okta and vue is as below:
"@okta/okta-auth-js": "^7.1.1",
"@okta/okta-vue": "^5.5.0",
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-router": "^4.1.6"
Please help as soon as possible.
it there is no backend to store the client secret. it shoud create the application by Single-Page Application.
you can refence this document:
https://developer.okta.com/docs/concepts/oauth-openid/#recommended-flow-by-application-type
Is your client public?
A client application is considered public when an end user could possibly view and modify the code. This includes Single-Page Apps (SPAs) or any mobile or native applications. In both cases, the application can't keep secrets from malicious users. Your client is considered confidential or private for server-side (web applications), which means your client can use client authentication such as a client secret.
Is your client a SPA or native?
If your client application is a SPA or a native application, you should use an authorization flow with PKCE, such as either the Interaction Code flow with PKCE or the Authorization Code flow with PKCE. If you are doing a redirect flow to an Okta-hosted sign-in page, the Authorization Code flow with PKCE is recommended. If you want to embed the sign-in experience, the Interaction Code flow is recommended.
Vue.js App example:
https://developer.okta.com/blog/2019/08/22/okta-authjs-pkce