Vue.js, NUXT.js, Vuetify.js, Firebase authentication

Please note I have a more recent blog entry regarding authentication with Firebase + Nuxt that not only uses the session to store the user ID but a cookie to store the access token. It also makes use of the Nuxt Axios module to make server posts on login and logoff. 

I previously wrote a blog detailing a few steps to get a sample Vue + Vuetify + Nuxt application running on Heroku cloud platform. In this blog I want to share a sample application I did that has all of the above but also Firebase authentication.

Framework Overview

In a nutshell this is what the example application covers:

Vue.js

The sample application is built using the Vue.js framework, a progressive framework for building user interfaces.

NUXT.js

It is also built on top of NUXT.js, a framework for creating Universal Vue.js Applications. I chose NUXT.js because I wanted to build a server-rendered Vue application. I didn't need to use NUXT, there is an in-depth guide I could have followed but NUXT is supposed to make building universal web application easier. That sounds good to me.

Vuetify

For the UI components and page layouts I make use of Vuetify.js, a semantic component framework for Vue.js. Why Vuetify and not many other options that are available, like what can be seen in this comparison blog post? A lot of these frameworks are new to me, Vuetify seemed like a popular choice with a stable backing and it supported server side rendering with NUXT.

Firebase Authentication 

The application integrates with Firebase in order to authenticate users.

Vue CLI Templates

Getting familiar with NUXT and Vuetify I went over the following Vue CLI templates:

• NUXT Starter Template
• Vuetify + NUXT Starter Template

They were both very useful and instrumental in getting an initial understanding into their framework. But things started to get a little less simple and a lot more fuzzy when I started to integrate Firebase authentication with my app. Of course there is a lot I need to learn (and still need to learn). GitHub issues for both these projects were quite helpful in searching for answers to questions I had:

• NUXT Issues
• Vuetify Issues

The problem

I needed a way to authenticate users through Firebase authentication and to handle state on the server as well as the client. Firebase web authentication is run on the client side. I wanted to be able to logout a user when the user logs out and also keep a user logged in when the user refreshes their browser. There seems to be a number of different approaches to this problem and I settled on the following:

1. Configure the application to run an express server so that I could handle server POSTS and  GETS if needs be (example sign in and sign out post) and store any information in the session in case I need to access it again from the server. The following link on the NUXT website helped me configure my custom server: https://nuxtjs.org/examples/auth-routes/. Oh and yeah it has an example of an auth use case except it didn't quite fit my scenario.
2. Configure a pages middleware function that gets called for every secure page, not for sign in and sign up pages. This function will be responsible to see if the user is authenticated or not by either checking the session (server) or analysing the firebaseApp variable to see if the current user exists or not. 

The above means I don't store the logged in user in any store like Vuex, Firebase seems to store the user in localStorage in a variable called "authuser". That way it can keep the user signed in.

Sample Code

The sample code for the project I did can be found here:

• https://github.com/rossma/storytellers/tree/nuxt-update

Once cloned you should be able to change into the ui folder and run the following commands to test it out:

• npm install
• npm run build
• npm run dev-custom-server

You could also just examine the code...maybe there is something useful there you will find. Like I said at the beginning this is all very new to me so most likely there are a lot of things wrong with the way I have done it. I hope not. But nevertheless I learned a lot.