How to manage user state in Firebase authentication within a SSR Nuxt.js application?

Question

As the title suggests, how to manage the user state in Firebase authentication within an SSR Nuxt.js application? The following conditions should be met after a successful login:

• Users should be able to visit protected resources when navigating between pages
• Users should be able to reload browser and still be signed into the application. They shouldn't be redirected to the login screen
• Firebase's default behaviour is to persist the user's session even after the user closes the browser. Users should not have to login to the application again if they close their browser and reopen it and when there is still a valid Firebase user available

Answer 1

I was able to solve this problem by using the following:

• Express server - using axios posts to manage the login on receiving
  the request save the user ID in the session and save the access token in a cookie
• Vuex - store user state so easily accessible within my Nuxt application
• Nuxt server middleware - used to check the authentication status of the user on the server. Looking for user ID in the session or the access token in a cookie that would have been created on login

Access to the code containing a working, running example of this scenario can be found in this GitHub repository.

I have also written a more detailed blog entry regarding all the important files used in the project.