Setup Firebase Authentication With Nuxt.js

npm i nuxtnpm i firebasenpm i @nuxtjs/firebase

npm i firebaseui

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'        }      }    }  }}

<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    // for below version 7    // const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(this.$fireAuth)    // for version 7 and above    const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(this.$fire.auth)    const config = {      signInOptions: [        // firebase.auth.GoogleAuthProvider.PROVIDER_ID        // this.$fireAuthObj.GoogleAuthProvider.PROVIDER_ID        this.$fireModule.auth.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>

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    }  }}

<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()      this.$fire.auth.signOut()    }  },  components: {    SignIn  }}</script><style></style>