Https://devforum.okta.com/t/react-web-app-after-login-error-must-use-pkce/27040

I want to know what is the solution for this , my case is same as him

In my okta , it was configured as web.I am using reactjs as frontend in my application.
Is this why I am getting

OAuthError: Client authentication failed.Either the client or the client credentials are invalid

Make sure that you create a SPA application in Okta to use with the React SDK.

The React SDK is designed to complete the entire OIDC login flow on the front end and thus must be used with a SPA (which will not have a Client Secret and will instead rely on PKCE), as noted in the SDK documentation:

This library currently supports:

3 Likes

Just wanted to confirm, My frontend is reactjs and backend is Fastapi.

I want to setup a seperate login page with a button such that when user clicks it, will login with the help of okta and redirect to main ui page

Will this work if I change application type to SPA?

Is there anyway I can make it work with the web application okta credentials?

Are you trying to use our React JS SDK or any of our other SDKs? Our okta-react SDK is designed to work with SPAs, where the OIDC flow is completed on the front end.

Is the Fastapi backend just going to receive Access Tokens to authorize requests? Or does it also handle storing the tokens and handling the application session?

My website is similar to chat gpt we are using bedrock rag model,fast api in bckend . In the frontend apart from ui, I want a login page with okta integration , logged user should see ui like chats and chat history.

I am using okta react sdk and okta auth js sdk to handle authentication in frontend.

Backend is not yet done.I don’t know if fast api going to receive tokens or handle storing tokens and session.
Any suggestion ,how to proceed?

Thanks

I would just try setting up a SPA within Okta so that you can test the React SDK to at least start getting tokens back. You can always switch strategies later, so might as well take the path of least resistance for now.