Okta Sign-In Widget and React - /token endpoint returning 401 unauthorized

We are starting the process of rewriting a portion of our old codebase (Java and PHP which somewhat recently were integrated with Okta signin) and have chosen to use React for the frontend of the new project and would like to authenticate using the existing Okta application.

I have followed this guide: https://developer.okta.com/code/react/okta_react_sign-in_widget/

It seems to be right on the edge of working correctly. I can enter my username and password into the widget and after clicking the sign in button a request goes to the /authorize endpoint with these parameters:

  • client_id: xxxxxxxxxxxxxxxxxxxx
  • code:challenge: zhz6y5lw5KyuhKbOnUx2Ji_NttuKBKeHr17rAJ0z0l8
  • code_challenge_method: S256
  • display: page
  • nonce: oOd8h4QbAUMyLUbZXKn2Znr3fxh3OrvncPiRnGurv0zcWuaobWitMp9I17Jh1g9p
  • redirect_uri: https://localhost:5001/implicit/callback
  • response_type: code
  • sessionToken: 20111V5L7TZuTzo51Ug7ysZKqXNxxxxxxxYaP7vCPnT8XQ4eVCVMGxq
  • state: ZAfkSiPcuHbToACuX0YXgwk0hxxxxxEuJfsLJ85YtRTz3SScoSt9MSaryTih4qr
  • scope: openid

After hitting /authorize the browser redirects back to https://localhost:5001/implicit/callback with a code and state in the url.

The callback page then makes a request to the /token endpoint with this form data:

  • client_id: xxxxxxxxxxxxxxxxxxxx
  • redirect_uri: https://localhost:5001/implicit/callback
  • grant_type: authorization_code
  • code: p203oMLcxarwT7ar2XixxxxxxxE56GU13TUU_rxtHvw
  • code_verifier: e9f6d0a6b0bexxxxxxxbe4750f3162f1ba29b2bc191d

Then the /implicit/callback page displays Error: AuthApiError and from the token endpoint I get this response:
error: 'invalid_client'
error_description: 'Client authentication failed. Either the client or the client credentials are invalid.'

From looking at the API reference, this error response seems to mean that the specified client_id wasn’t found. I have rechecked several times that it is using the client id from the application page in my Okta dashboard.

I would love some help getting this figured out.

Edit:
The existing Okta application that I am using the ClientId of is configured as a Web application type. Is the issue that it is not Single Page App?

Hi @mishkin,

Yes, the app should be an SPA type for a react front-end.
It’s using something called the PKCE code flow, which is only supported by SPA type apps.
Can you try using an SPA app and see if that works?