Auth0 - SPA - Single Page application - part 2

Hello all,


As part 2 of Auth0 development, I would like to show today what you need to work on your NodeJS code to make your single page application protected and use the best features of Auth0.


1. Remeber that for single page application we use a grant flow that we call Implicit Grant. In my case, I am using reponse_type=id_token token.

Fig1: Implicit flow using id_token token

2. For SPA, we have 3 basic ways to store our token:

2.1- Using Local Storages

2.2- Using Cookies

2.3-Using Session Storages

Fig2: 3 basic options to store tokens using SPA.

2.4- The fourth option provides more protection - In-memory.

Fig3: In-memory to store a token

3. Another good recommendation is clean up as much as possible using the onbeforeunload trigger.

Fig4: onbeforeunload window script for cleaning.

4. Working with SPA, you basically have only one HTML page that uses all 'div' and 'id' created from your NODEJS code. So, having said that:

Fig5: HTML piece that loads the profileview from app.js code

5. app.js function that calls an API(/userInfo) with access_token to collect a json information about user.

Fig6: app.js function calling API(/userInfo) 

Summary:

A single-page application (SPA) is a web application or website that interacts with the user by dynamically reworking the current page rather than loading entire new pages from a server.  We avoid interruption of the user experience between progressive pages, making the application act more like a desktop application.

Advantages

1. Best responsiveness – Server-side rendering is hard to implement for all the intermediate states – small view states do not map well to URLs. Single page apps are characterized by their ability to redraw any part of the UI without requiring a server roundtrip to retrieve HTML. 

2. Easy to deploy – A single page application is super-simple to deploy if compared to more traditional server-side rendered applications: it’s just one index.htmlfile, with a CSS bundle and a Javascript bundle. 

3. versioning and rollback – Another advantage of deploying our frontend as a single page application is a versioning and rollback. All we have to do is to version our build output (that produces the CSS and JS bundles highlighted in yellow above). 

4. Faster to load – If you have ever used a web application that is regularly reloading everything from the server on almost every user interaction, you will know that that type of application gives a poor user experience due to: the constant full page reloads; also due to the network back and forth trips to the server to fetch all that HTML. 

Disadvantages

Memory leaks – Pages are “long-lived” boosting the risk of memory leak issues. This can deteriorate UX and because of battery drain on mobile devices.

Thank you and happy coding,

Thiago Leoncio.

Download this code here.