Setup Firebase Authentication With Nuxt.js

April 3, 2020

Install

npm i nuxt
npm i firebase
npm i @nuxtjs/firebase
npm i firebaseui

Setup

Edit nuxt.config.js

export default {
  modules: [
    '@nuxtjs/firebase',
  ],
  firebase: {
    config: {
      apiKey: '<apiKey>',
      authDomain: '<authDomain>',
      databaseURL: '<databaseURL>',
      projectId: '<projectId>',
      storageBucket: '<storageBucket>',
      messagingSenderId: '<messagingSenderId>',
      appId: '<appId>',
      measurementId: '<measurementId>'
    },
    services: {
      auth: {
        // it is recommended to configure either a mutation or action but you can set both
        initialize: {
          onAuthStateChangedMutation: 'ON_AUTH_STATE_CHANGED_MUTATION',
          // onAuthStateChangedAction: 'onAuthStateChangedAction'
        }
      }
    }
  }
}

NOTE: To get config, goto Firebase Console -> Project -> Project settings (click Gear icon beside Project Overview), click Add app if you haven’t done so, else Your apps -> Firebase SDK snippet -> Config.

SignIn component

Edit components/SignIn.vue

<template>
  <div id="firebaseui-auth-container">

  </div>
</template>

<script>
// import firebase from 'firebase/app'
// import 'firebaseui/dist/firebaseui.css'
// import firebaseui from 'firebaseui'

export default {
  mounted() {
    const firebaseui = require('firebaseui')
    require("firebaseui/dist/firebaseui.css")
    // https://github.com/firebase/firebaseui-web/issues/216
    var ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(this.$fireAuth)

    const config = {
      signInOptions: [
        // firebase.auth.GoogleAuthProvider.PROVIDER_ID
        this.$fireAuthObj.GoogleAuthProvider.PROVIDER_ID
      ],
      signInSuccessUrl: '/',
      // tosUrl: '/tos',
      // privacyPolicyUrl: '/privacy',
      callbacks: {
        signInSuccessWithAuthResult() {
          console.log('signInSuccessWithAuthResult')
        },
        uiShown: function () {
          console.log('uiShown')
        }
      }
    }

    ui.start('#firebaseui-auth-container', config)
  }
}
</script>

Vuex Store

Edit store/index.js

export const state = () => ({
  user: false
})

export const mutations = {
  ON_AUTH_STATE_CHANGED_MUTATION: (state, { authUser, claims }) => {
    if (authUser) {
      state.user = {
        uid: authUser.uid,
        // email: authUser.email,
        displayName: authUser.displayName
      }
    }
    else {
      state.user = false
    }
  }
}

Usage

Edit pages/index.vue

<template>
  <div class="text-center">
    <h1>Welcome <span v-if="currentUser">{{ currentUser.displayName }}</span></h1>
    <sign-in />
    <div v-if="currentUser">
      <button type="button" class="btn btn-primary" @click="signOut">Sign Out</button>
    </div>
  </div>
</template>

<script>

import SignIn from '~/components/SignIn.vue'

export default {
  computed: {
    currentUser() {
      return this.$store.state.user
    }
  },
  methods: {
    signOut() {
      console.log('signOut')
      this.$fireAuth.signOut()
    }
  },
  components: {
    SignIn
  }
}
</script>

<style>

</style>
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.