Using PKCE Authorization Code with a Browser based SPA

Questions
1

There is some information out there about how the implicit flow for SPA’s is inherently a less secure way to authenticate your applications. In addition, there are documents that claim that using a PKCE Authorization code flow is possible with single page applications in the browser, and has less risk.

specifically talked about here - https://tools.ietf.org/html/draft-parecki-oauth-browser-based-apps-02#section-7

Is it possible to use Okta’s PKCE Authorization code flow with something like say, react or even a vanilla javascript browser based single page application? If so, what would be the recommended way to generate the code challenge?

If I am totally off base here, would someone mind pointing me towards resources to better inform myself of why the implicit flow is still an acceptable means of SPA authentication? I do not have the ability to authenticate via regular authorization code flow due to the architecture of the application I’m building.

2

The guidance is that for new apps, you should favor the Authorization Code with PKCE flow over the Implicit flow.

And, for your existing Implicit flow apps, you could improve your security posture by switching to the Authorization Code with PKCE flow.

That said, Okta does not currently support the Authorization Code with PKCE flow for SPAs. It is supported for native mobile and desktop apps.

We are actively working to update our stack to add support for SPAs. We don’t have a specific release date, but keep an eye here for new feature releases: https://help.okta.com/en/prod/Content/Topics/ReleaseNotes/okta-relnotes.htm

1 Like
3

Is it still the case that Okta does not support the Authorization Code with PKCE flow for SPAs?

4

Hi @arzemieniuk

Okta is now supporting Authorization Code flow with PKCE client side since 2019.03.2 version in preview and 2019.04.0 version in production.

Please feel free to test it out and let us know if you have any questions.

1 Like
5

Hi @dragos, I’m new to okta and I have been searching for an answer to the same question. How should I implement the code_challenge? I came across an article which explained about oidc with pkce flow. But I do not see code_verifier or code_challenge being used in their code. Could you please help me with this?

6

Nvm, got it.

P.S:
For those of you who have been searching for the same refer to this and the following :

Digging into PKCE

You should see both the /authorize and the /token calls in the call list from the Network tab on your browser.

In the auth/index.js file, there’s a function named callback . In this function, you’ll find this line:

...
oktaAuth.token.parseFromUrl()
...

The parseFromUrl() function detects when an authorization code has been returned as the result of the Authorization Code with PKCE flow. In this case, it automatically exchanges the authorization code for a set of tokens by posting to the /token endpoint.

Ref: Article

1 Like