How Authentication and Authorization Work for SPAs (Single Page Applications)

Authentication and authorization in public clients like single-page applications can be complicated!

We’ll walk through the Authorization Code flow with Proof Key for Code Exchange (PKCE) extension to better understand how it works and inspect the auth tokens you get back from the process by spinning up a sample app using Okta.

Learn more and follow along with the companion blog post.

Table of Contents

00:00 Welcome! Let’s dive in!
00:16 Avoiding authentication-related attacks
01:27 Understanding Authorization Code flow with Proof Key for Code Exchange
03:40 Spin up an example application in React
04:38 Peek at the application code
05:51 Run the example application and sign in
06:54 Inspect the network calls from the Authorization Code flow
07:22 Finding the token storage location and look at the access and ID tokens
07:56 See the ID token in action within the application
08:30 See the access token in action within the application
08:59 Thanks for watching! Where to go from here