Basic SPA – Overview

Background

The SPA High Level Requirements page described why we want to use the Implicit Flow and we will start small, by getting a very simple SPA and API code sample working together reliably.

Components

The Basic SPA Code Sample will get the below components and endpoints talking to each other, using OAuth 2.0 based security:

Okta Authorization Server

I have chosen Okta as a provider for these reasons:

  • Their implementation is Standards Based
  • Developers can quickly register and start using features
  • It has a modern and easy to use Web Management UI

Authorization Server Coding?

In the real world pretty much every company will use an off the shelf Authorization Server rather than writing the code themselves.

I would recommend avoiding samples that get you to run the code for an Authorization Server, and to focus on the OAuth code in your apps instead.

Code / Technology Choices

I am not a fan of any particular technology, but my main goals are to be modern and cross platform, so I will use these Javascript based languages:

Component Language Platforms
SPA ES6 Javascript IE / Chrome / Firefox / Safari / Mobile
API Node JS Windows / Mac OS / Linux

The difficult part of using OAuth 2.0 technologies is in clarifying what you want and understanding the Security Standards. Coding can usually then be done fairly easily, in any technology stack.

Third Party Security Libraries

In our SPA we will use the OIDC Client Library (see also this video) to do the Implicit Flow work for us. In our API we will use the OpenId-Client to do introspection.

Use Certified Standards Based security libraries, so that you get quality implementations that should work across multiple vendors, and so that you avoid security gotchas.

Code Setup

For the Basic SPA Code Sample I want the initial code setup to get the below concepts in basic shape. Later we will then be able to change code more easily.

Aspect Details
Modular A strict separation of concerns into modules
Readable Syntax Keep the code simple and easy to understand
Reliable Get some initial error handling and logging in place

The OIDC Client library follows these principles, with nicely separated Javascript modules and lean ES6 syntax:

OIDC Client Samples

If you want to jump ahead, feel free to also take a look at the OIDC Samples, by running these commands:

You can then trigger a number of Javascript OAuth operations against a stub Authorization Server:

Our Initial Focus

I will intentionally start with only the following subset of features, which is the Core Behaviour:

  • The User logs in to the SPA and gets an Access Token
  • The SPA makes a cross domain API call with an Access Token
  • The API validates the received Access Token
  • The API returns data for the User in the token
  • Some Basic Reliability is in place

Initial Code Sample UI

The initial UI will just provide some technical visualization of OIDC Client logging, while logging the user in. The green text will represent data returned from the API.

Where Are We?

We have an initial objective and we will build it in a solid manner, with clean code and a good separation of concerns.

Next Steps