Nuxt.js + Firebase Authentication (with FirebaseUI)

auth.js

// middleware/auth.js
export default async ({ store, redirect }) => {
  const loggedIn = await store.dispatch('isLoggedIn')
  if (!loggedIn) {
    redirect('/login')
  }
}

index.js

// store/index.js
export const actions = {
  async isLoggedIn () {
    const user = await this.dispatch("initAuthUser")
    return user != null
  },
  async initAuthUser () {
    return new Promise(resolve => {
      const unsubscribe = this.$fireModule.auth().onAuthStateChanged((user) => {
        resolve(user)
      })
      unsubscribe()
    })
  },
  async signOut () {
    await this.$fire.auth.signOut()
    this.$router.push('/login')
  },
}

index.vue

// pages/index.vue
<template>
  <div>
    <v-btn color="primary" @click="signOut"> signOut </v-btn>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  middleware: ['auth'],
  methods: {
    ...mapActions(['signOut']),
  },
}
</script>

login.vue

// pages/login.vue
<template>
  <div>
    <div id="firebase-authui"></div>
  </div>
</template>

<script>
import 'firebaseui/dist/firebaseui.css'
import { mapActions } from 'vuex'

export default {
  async mounted() {
    const loggedin = await this.isLoggedIn()
    if (loggedin) {
      this.$router.push('/')
    } else {
      this.showFirebaseUi()
    }
  },
  methods: {
    ...mapActions(['isLoggedIn']),
    showFirebaseUi() {
      const firebaseui = require('firebaseui')

      const uiConfig = {
        signInSuccessUrl: '/',
        signInOptions: [this.$fireModule.auth.EmailAuthProvider.PROVIDER_ID],
        callbacks: {},
      }

      const ui =
        firebaseui.auth.AuthUI.getInstance() ||
        new firebaseui.auth.AuthUI(this.$fire.auth)
      ui.start('#firebase-authui', uiConfig)
    },
  },
}
</script>