Security

Secure Authenticated Single Page Application (SPA) Hosting with Firebase

Photo by Gabriel Kiener on Unsplash

Firebase makes it very simple to host and deploy SPA/PWA’s (Single Page Apps / Progressive Web Apps) along with built in authentication and back end logic as Cloud Functions, and there are many tutorials on how to launch a handful of static front end files from your favourite framework build tool to the web.

However, for a non-trivial application, there are several aspects to this that become a concern:

• Are you so confident of your backend security that you’re willing to expose your entire front end code to any hacker or script without even a login?
• How do you prevent users without e.g. a manager role from accessing your application?
• When you deploy an update, how do you prevent browsers getting a mismatching set of index.html, CSS, JavaScript and image files when there is caching in the CDN (Content Delivery Network) and browser?
• What if you need to serve user-specific configuration early, i.e. in the index.html before loading any other files?

The above concerns are solved by my method, which is described by the following key points:

1) Assets (.js, .css, .jpg, .png etc) are fingerprinted, fully…