In our last post we provided a Final SPA Overview. We will look at the key technical points below.
For the Final SPA Code Sample I updated from ES6 to TypeScript, which provides improved language features, tooling and compiler checks. Our SPA still gets transpiled and continues to work fine in Internet Explorer:
Another key difference is that I am using async / await features for callback handling, since our code then reads better than with ES6 promises. In particular out HttpClient class is now easier to read.
Open Id Connect Flow
The main change is to use response_type = ‘token id_token’, which is the recommended flow, and how the UserManager class should be used:
The token renewal iframe is spun up by the OIDC Client library, and needs a page to execute on. Since we are a Single Page App we use the main page.
Reading Okta User Info
When tokens are received on our callback URL, they are processed for us by the OIDC Client. The information returned from the User Info Endpoint, such as User Name and Email fields, can then be read via the profile object:
Token Renewal Code
We need to change our Login Response handling to handle requests on the renewal iframe as well as on the main window:
When handling Token Renewal errors, login_required means the Okta session cookie has expired. We ignore this response and our SPA’s 401 handling ensures that the user is redirected to login after the next API call.
When running the iframe on the main page of your SPA, you will need to short circuit the SPA Page Workflow when Silent Renewal completes.
Logout code is a one liner to trigger the Open Id Connect logout message on the main window:
I also implemented a primitive ‘router’ class. One of its responsibilities is to show a Logged Out view upon return to our SPA:
TypeScript SPA Build Changes
In our SPA the webpack configuration has changed, since we are now loading and building TypeScript files.
We are using core-js for polyfilling, which is a simpler TypeScript based approach, but the concepts are the same as previously:
TypeScript API Build Changes
In our API we are using ts-node to launch our server.ts file, whereas previously we were using node to launch our server.js file. Nodemon now monitors files with a ts extension and restarts the API when they change.
TypeScript Code Quality Checks
Both the SPA and API have a tsconfig.json file, which is used when webpack / ts-node invoke the TypeScript compiler. We have enabled strict mode so that we receive code quality warnings from the compiler and IDE:
- npm install @types/jquery –save-dev
The npm packages have been simplified since we no longer require all of the Babel dependencies:
Where Are We?
We have completed essential features and in particular we have achieved the following essential behaviour for our Corporate SPA:
- Our SPA uses Short Lived (30 minute) Access Tokens
- End Users only get redirected to Okta once every 12 hours