Firebase Google Authentication

Saman Batool
3 min readOct 3, 2020

Firebase Authentication…using Google(for free)

I recently completed a chat application closely mapping Whatsapp web to play around with realtime web-chats and navigate different ways of user authentication. Interestingly enough, integrating google authentication was one of the quicker/easier parts of my application!

Here I will walk through what all I had to do (and what I didn’t have to do) to simply implement google auth to sign into my application.

Firebase defines its user authentication as:

“Aims to make building secure authentication systems easy, while improving the sign-in and onboarding experience for end users. It provides an end-to-end identity solution, supporting email and password accounts, phone auth, and Google, Twitter, Facebook, and Github login and more.”

Seems to be a no frill auth system, right? Well, let’s look at the steps. (Spoiler — it really is no frills and quick!)

To implement the logic needed for a user to successfully log on to my application using their google account, roughly took about 10 lines of code. In general, to sign a user into your app, you first get authentication credentials from the user. These credentials can be the user’s email address and password, or in some cases an OAuth token from an identity provider (google, github, etc). You then can pass these credentials into the system (in our case, Firebase SDK Authentication). The backend services will automatically verify those credentials and return a response to the client.

Once the user successfully signs in using Firebase, they can access the user’s basic profile information and you can control the user’s access to the data stored in other Firebase tools (such as the firebase realtime database). You can also use the provided authentication token to verify the identity of the users in your own backend services.

Also worth noting is that authenticated users can read and write data to the Firebase realtime database and cloud storage.

Steps to implement

  1. Set up sign-in method

For email address and password sign in, you will enable them in the firebase console and complete any configuration required by the identity provider (such as setting your OAuth redirect route).

2. Customize the sign-in UI (if need be)

Here, you can customize the sign-in user interface by setting firebase UI options or simply customizing yourself.

3. Use Firebase UI to perform the sign-in flow

Import the FirebaseUI library to initiate the firebase UI sign-in flow.

Using the Firebase Authentication SDK

  1. Set up sign-in methods

Same as before.

2. Implement UI flows for your sign-in methods.

Same as before.

3. Pass the user’s credentials to the Firebase Authentication SDK

Here you can pass the user’s email address and password, or the OAuth token (depending on how you signing in the user) to the Firebase Authentication SDK.

NOTE: This is a more summarized and an overview version, but there is a much more detailed explanation in the Firebase docs.

In conclusion, it can take months to set up your own authentication system, and most times it requires an engineering team to maintain that system in the future. Setting up the entire authentication system of your app in under 10 lines of code including account merging, can collectively be agreed to be much easier.

Resources:

--

--

Saman Batool

Software engineer navigating through problems in Rails and React. I like sharing my thinking processes, solutions and project learnings. I’m based in LI, NY.