DEV Community

Cover image for Google Login with Firebase and Nuxt
Thomas Philippot
Thomas Philippot

Posted on

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 !


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


Nuxt :
Firebase :

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 :
(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: "",
  databaseURL: "",
  projectId: "project-id",
  storageBucket: "",
  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


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


      googleSignIn () {
        this.provider = new firebase.auth.GoogleAuthProvider()
        firebase.auth().signInWithPopup(this.provider).then(result => {
          // store the user ore wathever
        }).catch(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 !

Top comments (0)