While setting up the homepage for my newest project, Lynk( https://lynk.sh), I realized I needed an easy and secure way to authenticate and onboard new users.

The problem is, Lynk’s homepage is a Single Page App (SPA) written with Nuxt.js — and while there are tutorials on adding Firebase to Server-Side Rendered apps (SSR), there isn’t a lot of documentation on what to do if you want to use an SPA.

So why did I decide on an SPA? Because it’s really easy and cheap to host. With SSR applications (and Node.js applications in general) you usually need a server or a container that will run your code. With Nuxt.js, however, I can easily generate static HTML, CSS, and Javascript and host it anywhere — be it Github Pages, or Firebase Hosting, or even Netlify.

So how does one add Firebase authentication to an SPA?

There are three basic steps: