OKTA SPA -- why choose this over web application?

[BirdThunderford]

I’m in the process of building an application that is React on the frontend and Django on the back. I’ve looked through this tutorial and I’m curious to know what is behind the choice of SPA vs web application? How do the two differ?

Thanks!

[mraible]

Good question! A SPA is when it’s all JavaScript on the front end and the code can’t be trusted to keep a secret. A web app is one that runs on a server and can be trusted to keep a secret. A SPA app has no client secret and uses PKCE to obtain tokens. A web app can you the client secret to get access tokens.

[BirdThunderford]

So in this way, if the authentication happens completely on the front end (even if the back end uses the authentication to validate REST calls) it’s best to go with PKCE over a client secret?

[mraible]

Yes, that is correct.

[BirdThunderford]

Actually I’m finding it remarkably difficult to do this when Django is involved. If I just stuck with web application and used a client secret, is there a downside to letting the server handle the authentication for a single page application?

[BirdThunderford]

@BirdThunderford

I think I figured it out. The problem was that I wasn’t forwarding the callback back to my React App for handling.

So given that, re: the tutorial, the Flask backend actually calls for a client secret for backend token authentication.

So I now have an id_token and access_token in my local store and I need to use it to authenticate REST calls on the Django server.

In the flask example, the configs actually specify a client secret. Yet a SPA Okta app contains no client secret. So in this way all the authentication lives on the front end. Can you explain how this is more secure than having the back end (which hides, or should hide the client secret) authenticate the user?

What gets supplied to the authorization headers in the call to get the ID token?

Hopefully this makes a bit of sense, haha. I’m still trying to figure this all out myself!

Update: I think I found the answer to my question.

Implement authorization by grant type | Okta Developer

Per the doc:

code is the authorization code that you got from the /authorize endpoint.
code_verifier is the PKCE code verifier that your app generated at the beginning of this flow.

I assume code is the same code in the used in the callback. However I don’t know what code_verifier refers to. I’m assuming it’s either the nonce or the state.