Vue.js, NUXT.js, Vuex, Firebase persisted authentication, Axios

I created the following application to demonstrate how to handle authentication with Firebase within a Nuxt (Vue) application. I wanted to make sure the application stayed logged in as long as the Firebase authentication token hadn't expired. User should not be logged out when:

• The browser is refreshed
• The browser is closed and restarted and the Firebase token is still valid (persisted sessions)

You can grab the example from Github and you can see below for a brief outline of the steps I took to setup configure the application:

Firebase Project

• Signup / Login to the Firebase console and Create a new project by clicking the Add project icon and following the instructions for creating your project. 
• Setup authentication within your new Firebase project by clicking on the authentication menu in the left navigation bar. Click on the sign-in method tab and select the Email/Password provider from the list of sign-in methods. Enable it and click save.

Create Vue+NUXT application

• Create your Vue+NUXT application by following instructions outlined in the the NUXT starter-template.

Install the necessary dependencies

• yarn add @nuxtjs/axios body-parser express express-session firebase jwt-decode vuex  

Configure and initialise Firebase

• Add Firebase configuration settings by creating a development (and production) configuration file to your application and adding your Firebase  project settings to it
• Locate your Firebase application configuration settings by logging into your Firebase console and searching for: Add Firebase to you Web Application
• Create a file that will export the instance of your Firebase application
• The example application also makes use query the Firebase realtime database. If you are wanting to run the example application be sure to create your own database in your Firebase project

Create express server API 

• Create an express server API to handle the login and logout posts for the user. On receiving a post request from the client the user ID is stored in the session and the access token is stored in a cookie
• Modify your nuxt.config.js file so that it includes a section for the serverMiddleware and also has @nuxtjs/axios module defined

Create Vuex actions and mutations

• Add Vuex to your application and choose between the classic or module mode. I opted for the module mode
• Inside your root store file define the nuxtServerInit action. This action is used to save the currently logged in user to the session
• Inside your stores users module add the necessary getters, actions and mutations needed to save the user ID to the store. We include our login and logout actions here that use axios to send a post request to the server 

Create check authentication middleware

• Create a check authentication middleware action and add the necessary configuration to nuxt.config.js so that it will be called for every route
• The middleware component will check to see if the user is stored in the session or if the access token is found in the cookie. If it finds a match the store is initialised with the user ID. 

Create protected resource

• Create a page that will only be accessible if a user has successfully been authenticated
• Create the authenticated middleware action that will be called for every protected page. This action checks to see if a user is authenticated, if not the user is redirected to the sign in page

Create SignIn and SignUp pages

• Create a page to allow the user to sign in to the application
• Create a page to allow a user to register as a new user to the application

Run your Application

• npm run dev
• If all was configured successfully you should be able to sign up, sign in, reload page and still be signed in, close browser and reopen browser and still be logged in (as long as access token is still valid) and finally be able to sign out of the application