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:
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:
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:
- 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.
- 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:
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.
