Vue, Nuxt, Firebase, Google-Sign

Let’s create a new Vue / Nuxt app:

npx create-nuxt-app google-sign

Enable Axios, choose Single Page App rendering mode. Add firebase to our Nuxt app:

npm install firebase --save

Create a firebase plugin, add new file ‘firebase.js’ inside /plugins and register it inside nuxt.config.js

Next, create a Firebase project. Go to

https://console.firebase.google.com

and create a new project, call it ‘google-sign’.

Inside the Firebase project, go to Settings and add a new Web app. Call it ‘google-sign’.

Copy firebaseConfig and go to our Nuxt app.

Open up /plugins/firebase.js and update the file with copied firebaseConfig:

Add firebase.js plugin to plugins inside nuxt.config.js

Next, open up index.vue inside /pages folder, clean all of the boilerplate, and add “created” hook:

Open up firebase console and create Realtime Database, set the rules to:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Inside the database, add new record using Name “test” and Value “test”.

Copy its https link, and paste it into Chrome, adding .json to the end of the link like:

https://sign-11111.firebaseio.com/test.json

You should be able to see “test” in the browser window.

Now let’s try to read it from our Vue app using Axios. Inside created hook in our index.vue add:

created: async function() {
  const test = await this.$axios.$get('https://sign-11111.firebaseio.com/test.json')
  console.log(test)
}

The console output should show “test”.

The system is working, now we need to protect our database!

Set the rules to allow only authenticated users:

{
  "rules": {
    ".read": "auth.uid != null",
    ".write": "auth.uid != null"
  }
}

If we try to connect to the database we’ll get Error 401. We need to set up authentication.

In the Firebase go to Authentication / Sign-in method and select Google. Add your support email, if you like, you can change thProject public -facing name to whatever you like, Enable and Save.

Let’s update the index.vue once again:

Reload our project and click “Sign With Redirect” it will go to google, but very quickly back to the project, if we enable “Preserve log” in the console we’ll see:

This is because we need to add Authorized redirect URI inside our project in Google Api console. The same error will occur if you set Google Api console, but forget to Enable Google Sign-In method in Firebase.

Go to https://console.developers.google.com/apis, select your project (ie. google-sign)

Under OAuth 2.0 client Ids tap on “Web client (auto-created by Google Service)”.

Add “http://localhost:3000” (or any other port your dev server is running) to Authorized redirect URIs. Of course you can add your production or development URIs for example https://borama.co :)

Click save, refresh Vue project and now you will be redirected to Google SignIn. Log in with your email and you will be back at localhost.

How can we now get the data from firebase? We need a idToken. Because we are now authenticated we should be able to get it!

Update test method inside index.vue:

Click the “Test” button and in the browser console you will see “test”. Yeah!

Now just add login with a popup like:

Click “Sign With Pop Up” and the popup will open.

There’s one gotcha when working with a firebase database. You can’t really control which email addresses are allowed inside the google auth section. You can protect your database by creating a whitelist of allowed users, and adding the rules inside “Rules” section. For example:

In reality, you will want to replace hardcoded ‘borama’ with emails stored inside a protected database child.

Now with those settings, I can still sign in using google account, but If I use email not containing borama, I won’t be able to access the database.

Here’s a link to the official documentation:

Authenticate Using Google Sign-In with JavaScript | Firebase

The final version of index.vue, with both Authentication with Redirect and with Popup working:

That’s it!

Follow on Twitter: https://twitter.com/boramaapps

Check my ios and android apps!

Borama Apps