Authorization code flow using Okta Web App for SPA


We have react UI which makes call to API server, we are thinking of implementing authorization code flow as follows:

  • We make a call to backend API which generates state token and returns authorize end point URL.
  • Now from UI we redirect to this OKTA authorize endpoint.
  • Okta redirects on callback URL with with authorization code & state.
  • We make a call to backend API with this state and authorization code.
  • Backend API verifies state token & makes call to OKTA token endpoint to get accesstoken and refresh token.
  • Returns the response to frontend.

I want to understand why authorization code with PKCE is the recommended approach for SPA? Why can’t we use something like above? What’s wrong with this approach?

There is nothing wrong with this approach. PKCE is a recommended approach, when you don’t have your own backend server and need to develop an SPA to consume some protected third-party API. It’s to avoid using implicit flow.

1 Like