Pascal Luther
1 min readJan 29, 2019

--

This article does not cover Firebase Auth, but Firebase Auth can be implemented with Nuxt as well.

As always, there are various approaches, but the easiest is possibly to:

1) Authenticate the user in a plugin before the page is rendered

onAuthStateChanged(authUser => {
if (authUser) {
store.commit(‘user/SET_AUTH_USER’, authUser)
}

This will log in the user and then save the authUser to the store.

Then, in a middleware (before each route) you would do something like that:

export default function({ store, redirect }) {
if (store.getters[‘user/isLoggedIn’]) redirect({ name: ‘dashboard’ })
}

(The getter is not shown here, but I hope you get the point.)

(!) What is important here to remember:
Firebase Auth authenticates the user client side. So the approach above works well for SPA mode, but not for Nuxt’s SSR mode.

In SSR mode you would have to send the auth token to the server first thing, that is a little trickier to implement but not impossible.

Check out davidroyer’s article here, its quite helpful:
https://www.davidroyer.me/blog/nuxtjs-firebase-auth/

--

--

Pascal Luther
Pascal Luther

Written by Pascal Luther

Cloud Product Architect by day, recreational web-developer by night. Currently a big fan of Vue & Nuxt.js and of going serverless with Google Firebase.

Responses (1)