Google Authentication with Firebase — the Duck Soup!

Most of the front-end projects need user authentication. There exist a plethora of solutions like OAuth, JWT, Amazon Cognito, etc. But the catch with each of these is — they vary in the range of required expertise. There could be scenarios, where you would like to have a quick solution. Maybe, you don’t have enough time or enough expertise in your team. Firebase can give you a way out in such a case. It has a very user-friendly interface, and you can consider it as a friendlier, easier AWS alternative.

Image by OpenClipart-Vectors from Pixabay

Firebase provides a host of services, other than authentication. We will be focussing solely on Google auth for the scope of this article. Also since Firebase is independent of any front-end framework/ lib you wish to use (or not), I would keep it simple & use ReactJS in the example.

Having mentioned that, let’s jump right into it…

Image by OpenClipart-Vectors from Pixabay

Setup Firebase for Authentication

First and foremost, let’s set up a Firebase project.

• Log on to Firebase console.
• “Add Project” — Enter a name for your project & “Continue”.
• You can disable analytics in this step, or keep it as is & “Continue”.
• If you want analytics, select “Default Account for Firebase” & “Create Project”.

Add a new project to Firebase

• Add a new web app (</>) to get started.
• “Register” app with a nickname (you can keep hosting unchecked).
• Copy the firebaseConfig variable. We will use it in a React app shortly.

Setup Project for Web app

• Now, “Continue to console” & click “Authentication” under “Develop” options on the left sidenav.
• Click “Set up sign-in method”.
• Click on “Google” >> Enable it >> Select your email address from dropdown.
• “Save” and you are done.

Add sign-in method

Setup React app

This is the simplest & most straight-forward process:

• To begin, run npm i --save firebase in your React project.
• Create firebase.js file.
• Add all the imports & finish setup as depicted in the snippet below:

firebase.js

• Update your App.js to consume firebase auth provider:

App.js

• auth.signInWithPopup(provider) will open a pop-up window & ask for your Google credentials to authenticate you as a user.

Sign-in Popup

You get the user data as a response from successful login. You can use it to add a user to your own database. Username, email, user id, profile picture URL are some of the fields available with user object.

That was quick. That’s all you need to do in order to set up a sign-in mechanism with Firebase, using Google auth.

Notes:

• You can experiment with other sign-in options. Google auth is the simplest since Firebase is a Google product. The way to consume each of these on the front-end varies a little.
• Once you deploy your app, you’ll need to add your domain to “Authorized Domains” under “Authentication” >> “Sign-in methods”. localhost is added by default.
• There are proper ways to structure the authentication mechanisms in a React app. Keeping it simple here, for the sake of brevity.

Demo

react-easy-google-auth - StackBlitz

You may check the Stackblitz implementation example I created, as a baseline for this article.