DEV Community

Cover image for Google Login with Firebase and Nuxt
Thomas
Thomas

Posted on

8 4

Google Login with Firebase and Nuxt

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
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)
        })
      }
Enter fullscreen mode Exit fullscreen mode

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 !

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)