React web app after login error must use PKCE

[yisugar]

I was able to integrate with the update repo sample code react-sample

but I have received the following error in response.
{
“error”: “invalid_client”,
“error_description”: “Browser requests to the token endpoint must use Proof Key for Code Exchange.”
}

my payload is correct

I am also able to see my login records on the okta dashboard. but the API response showed 401.

[andrea]

That client_secret in your token payload is giving me pause and its inclusion in the request is likely the source of the error

Did you create a SPA within Okta for this integration? A SPA won’t have a client secret and will only use client id + PKCE as client auth, which is good, since a public app like a SPA cannot be trusted to secure the client secret. Can you try recreating your application in Okta as a SPA (instead of, what I presume is a Web app) and see if it works with the sample instead?

[yisugar]

Hi thanks for the response, I have updated the application in Okta as a SPA as the pics shows, but after I click login, I can see in the okta logs I logged in, but the webpage is not able to redirect back to the page.

I checked the networks tab it does not have Authorize request call after I click login. In application local storage But in local storage the okta token is empty{}. The app keeps calling the redirect url localhost:myport/login/callback?code=code&state=state…but the routes is not found

[andrea]

What do your Routes look like for your React app?

If you’re using our React SDK, I expect it to look something like this (borrowed from our okta-hosted-login sample), where the /login/callback route is connected to the LoginCallback component, which will handle completing auth code flow (exchanging the
auth code for tokens):

    <Security
      oktaAuth={oktaAuth}
      onAuthRequired={customAuthHandler}
      restoreOriginalUri={restoreOriginalUri}
    >
      <Navbar {...{ setCorsErrorModalOpen }} />
      <CorsErrorModal {...{ corsErrorModalOpen, setCorsErrorModalOpen }} />
      <AuthRequiredModal {...{ authRequiredModalOpen, setAuthRequiredModalOpen, triggerLogin }} />
      <Container text style={{ marginTop: '7em' }}>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/login/callback" component={LoginCallback} />
          <SecureRoute path="/messages" component={Messages} />
          <SecureRoute path="/profile" component={Profile} />
        </Switch>
      </Container>
    </Security>