Previously we had our application running using okta-react 1.4.0 without issue. We recently needed to use the useOktaAuth() hook to in order to access the authService so that we could issue a logout.
However this seemed to be completely broken and would give us an error of useOktaAuth is not a function.
After a lot of googling and research we discovered this was a common issue and the fix was to upgrade to the latest okta-react version. Upgrading seemed to solve that problem however now the rest of our okta code seems to be broken. After reading documentation after documentation I don’t see where we are going wrong, the only thing that has changed from 1.4.0 to 3.0.1 is the use of ImplicitCallback being changed to LoginCallback.
Basically we are getting an AuthApi error on the callback with a status code of 401 telling us our credentials are incorrect. However, the credentials match exactly what is in our Okta Application as seen in our screenshots. Any ideas of what I am doing wrong? I’m at a complete loss. If I revert back to 1.4.0 everything works fine.
To piggyback off what @sigama said. There were a lot of changes that happened between 1.x and 3.x of the React SDK, and chief among them was that PKCE was set as the default OAuth flow.
Most likely, your original application, running 1.x, was implementing Implicit flow, which will work for a Web app configured with a Client Secret in Okta, but upon upgrading the SDK version, are running into an issue because your Web app is NOT configured to work with PKCE authentication. It should be noted that making a /token request with a Client Secret is not supported nor recommended on the front end (you must protect your Client Secret, which is why PKCE auth is used for SPAs).
You more or less have two options:
Create a SPA within Okta. This will allow you to use PKCE flow (recommended OAuth flow for SPAs)
If you do not do either of these, your application will continue to try to call the /token endpoint with invalid credentials (Client Authentication is required for this endpoint).
