# Using PKCE Authorization Code with a Browser based SPA

**URL:** <https://devforum.okta.com/t/using-pkce-authorization-code-with-a-browser-based-spa/4370>\
**Category:** Questions\
**Created:** [March 4, 2019, 3:44am UTC](https://devforum.okta.com/t/using-pkce-authorization-code-with-a-browser-based-spa/4370 "2019-03-04T03:44:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![wolfejw86](https://avatars.discourse-cdn.com/v4/letter/w/c89c15/32.png) [@wolfejw86](https://devforum.okta.com/u/wolfejw86)\
**Post date:** [March 4, 2019, 3:44am UTC](https://devforum.okta.com/t/using-pkce-authorization-code-with-a-browser-based-spa/4370/1 "2019-03-04T03:44:15Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![micah.silverman](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/micah.silverman/32/1239_2.png) [@micah.silverman](https://devforum.okta.com/u/micah.silverman)\
**Post date:** [March 4, 2019, 4:29am UTC](https://devforum.okta.com/t/using-pkce-authorization-code-with-a-browser-based-spa/4370/2 "2019-03-04T04:29:03Z")

</div>

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](https://help.okta.com/en/prod/Content/Topics/ReleaseNotes/okta-relnotes.htm)

---

<div class="post-metadata">

**Author:** ![arzemieniuk](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@arzemieniuk](https://devforum.okta.com/u/arzemieniuk)\
**Post date:** [July 26, 2019, 12:29am UTC](https://devforum.okta.com/t/using-pkce-authorization-code-with-a-browser-based-spa/4370/3 "2019-07-26T00:29:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dragos](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/dragos/32/1313_2.png) [@dragos](https://devforum.okta.com/u/dragos)\
**Post date:** [July 26, 2019, 12:50am UTC](https://devforum.okta.com/t/using-pkce-authorization-code-with-a-browser-based-spa/4370/4 "2019-07-26T00:50:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sandy](https://avatars.discourse-cdn.com/v4/letter/s/2bfe46/32.png) [@sandy](https://devforum.okta.com/u/sandy)\
**Post date:** [June 20, 2020, 9:49am UTC](https://devforum.okta.com/t/using-pkce-authorization-code-with-a-browser-based-spa/4370/5 "2020-06-20T09:49:03Z")

</div>

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](https://developer.okta.com/blog/2019/08/22/okta-authjs-pkce#create-an-oidc-application-on-okta) 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?

---

<div class="post-metadata">

**Author:** ![sandy](https://avatars.discourse-cdn.com/v4/letter/s/2bfe46/32.png) [@sandy](https://devforum.okta.com/u/sandy)\
**Post date:** [June 20, 2020, 11:43am UTC](https://devforum.okta.com/t/using-pkce-authorization-code-with-a-browser-based-spa/4370/6 "2020-06-20T11:43:40Z")

</div>

Nvm, got it.

P.S:  
For those of you who have been searching for the same refer to [this](https://github.com/okta/okta-auth-js#tokenparsefromurloptions) 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:

```auto
...
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](https://toolkit.okta.com/apps/okta-auth-js-pkce-example/)

---

<div class="post-metadata">

**Author:** ![andrea](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/andrea/32/2172_2.png) [@andrea](https://devforum.okta.com/u/andrea)\
**Post date:** [January 24, 2024, 8:07pm UTC](https://devforum.okta.com/t/using-pkce-authorization-code-with-a-browser-based-spa/4370/7 "2024-01-24T20:07:21Z")

</div>


