Wanna add a 'Log in with Google' button in your app in minutes ?
Here is how I did it !

Environement

• Node @11.0.0
• Vue @3.0.4
• Npm @6.9.0
• Nuxt @2.6.3
• Vuetify @1.3.3

Docs

Nuxt : https://nuxtjs.org/
Firebase : https://firebase.google.com/docs/

Firebase installation

To install firebase to you Nuxt project simply run the command

npm install firebase --save

and create a file like firebase.js into your pulgins directory.

Go to your Firebase console and create a new project. after registering your project you will be able to find your firebase config object.

here how to find it : http://support.google.com/firebase/answer/7015592
(our app type is web app)

now that you have your firebase config object let's register it into your nuxt plugin !

// /plugins/firebase.js
import firebase from 'firebase'

let firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appID: "app-id",
}

let app = null
if (!firebase.apps.length) {
  app = firebase.initializeApp(config)
}

export const db = app.database()

don't forget to add '~/plugins/firebase.js' to your nuxt.config.js in the plugins section.

And you will be ready to go !

at this time you will still need to import firebase from 'firebase' into the pages.

Sign in with popup

I will be using the signInWithPopup() method provided by firebase in this exemple

Button

<v-btn outline fab @click="googleSignIn" color="#4285F4"><v-icon>fab fa-google</v-icon></v-btn>

Method

      googleSignIn () {
        this.provider = new firebase.auth.GoogleAuthProvider()
        firebase.auth().signInWithPopup(this.provider).then(result => {
          // store the user ore wathever
          this.$router.push('/home')
        }).catch(e => {
          this.$snotify.error(e.message)
          console.log(e)
        })
      }

the user informations are stored into result.user. up to you to store theme where you want !

Well done ! 👋

that's it ! if your firebase app is correctly registered, you should be able to fetch your Google accounts informations !

let me know if you had difficulties with firebase ore if i made any mistake, i'm still learning !