Photo by Robson Hatsukami Morgan on Unsplash

Firebase 101: Authentication

Bryn Bennett
Dec 13, 2019 · 6 min read

One of the things that I am most grateful for about being a software engineer in 2019, is the incredible breadth of SDKs, platforms, and tools that simplify the more complicated and often consistently repetitive tasks. Whether I am implementing a live commenting feature, adding charts to my UI, or deploying my finished product, there is a resource out there to save me from doing it from scratch. In this post, we are going to cover one of today’s most talked about, most used, and most important SDKs: Google’s Firebase.

What is Firebase?

For starters, Firebase is actually a collection of various products that all fall under the Firebase family. In Google’s own words, Firebase as a whole is described as the following:

Firebase gives you the tools to develop high-quality apps, grow your user base, and earn more money. We cover the essentials so you can monetize your business and focus on your users.

At the time of this article, Firebase is comprised of a total of 18 different products, in addition to 9 extensions. The products in this suite solve problems as simple as shortening URLs, and as complex as cloud messaging. The full list of products and extensions is below with links, for reference, and we will cover several of the most popular products in depth.

  1. Cloud Firestore
  2. ML Kit (Beta)
  3. Cloud Functions
  4. Authentication
  5. Hosting
  6. Cloud Storage
  7. Realtime Database
  8. Crashlytics
  9. Performance Monitoring
  10. Test Lab
  11. App Distribution (Beta)
  12. In-App Messaging (Beta)
  13. Google Analytics
  14. Predictions
  15. A/B Testing (Beta)
  16. Cloud Messaging
  17. Remote Config
  18. Dynamic Links
  1. Resize Images
  2. Translate Text
  3. Sync with Mailchimp
  4. Trigger Email
  5. Export Collections to BigQuery
  6. Shorten URLs
  7. Distributed Counter
  8. Limit Child Nodes
  9. Delete User Data

In my own development, I have mainly used Firebase’s authentication (Products #4), realtime database (Products #7), crashlytics (Products #8), and analytics (Products #13). Because this is where my own experience is, we are going to focus here on authentication, and will focus on each of the other three in future posts. I encourage you, though, to spend time exploring this suite and others. I learned recently that IBM’s cloud products even offers AI image recognition.

Getting Set Up with Firebase

When you first log in to Firebase, which you can do by simply being logged in to your Google account in your browser and clicking “Go to console” in the upper right hand corner here, you will come to a welcome screen.

The first thing you want to do is create a project using this screen’s prompt. It will ask you to input:

  • The project’s name
  • Whether or not you want to enable Google analytics for the project (I typically will enable)
  • Configure Google analytics if you have enabled it

Once your project is ready, click continue and you will be taken to your project dashboard. One thing to note, is that each project can and likely will have multiple apps. iOS, Android, and web are each loaded in individually under one project.

Connecting to Firebase

To connect to Firebase, you need to set up a firebase config file in your codebase. In this file, you will add your firebaseConfig variable, which can be downloaded from Project → Settings → General → Your apps, where you will select the app that you are working on, then click the download google-services.json button:

This file will have the information that you need for the firebaseConfig variable:

And then your firebase app is initialized by just importing firebase and using this one line of code:

firebase.initializeApp(firebaseConfig);

Firebase Authentication

Before we dive into this, I would like to first say that, for those of you who have not, I strongly encourage that you first learn to build and implement authentication from the ground up. Building your own authentication system teaches you about encryption, hashing, and authentication flow, which in my opinion is extremely valuable knowledge. While it’s invaluable to have tools that strip you of the need to recreate something like authentication each time (and, let’s be honest, Google is doing it more securely than we could on our own anyway), it is still important to understand what it is that you are implementing. Now that that’s out of the way, let’s begin. Back to your Firebase console.

From the menu on the left hand side, select the “Develop” dropdown, and then select “Authentication”.

This dashboard is where you can manage everything related to users and authentication for your app. Firebase offers an authentication solution that supports traditional email/password auth, phone auth, and social auth such as Google and Facebook login. Firebase also stores all necessary user and login information in a Firebase database, so you don’t need to concern yourself with that part.

The users tab is where you can access a list of the project’s users and user information. You can also manually add users here.

The sign-in method tab allows you to enable your preferred social sign-in options, such as sign in through Google, Facebook, Twitter, Github, etc. The full list of options is pictured below. This shows a project with email/password, Google login, and Facebook login enabled.

On this same tab, under “Authorized domain”, you can (and need to) list domains to be authorized for OAuth redirects.

The templates tab very conveniently allows creation of templates for things like email verification and password reset, which are automatically triggered on signup and forgot password, respectively.

Lastly, the usage tab just displays the app usage statistics for the current billing period.

Firebase is now setup to receive, authenticate, and manage your users, and now just needs to be implemented into your codebase. The sign up and login flows here are really no different than the would be elsewhere. You can route as you would otherwise, but then when you get to the login and sign up functions, usually called under something like onClickLogin and onClickSignUp, you are going to use the below, where “firebaseMethod” is whichever firebase method is appropriate for your route:

firebase.auth().firebaseMethod(email, password)

So if you want to create a user, you would add the below line of code to your register/sign up function, where the email and password is taken from the user’s input:

firebase.auth().createUserWithEmailAndPassword(email, password)

And that’s it. Firebase has made a process which is complicated and costly to do right amazingly simple to implement. The full list of Firebase auth methods can be found here, and if you are using an auth provider, you can find that documentation here.

Check back for more on other Firebase products.


Originally published at https://www.syntx.io on December 13, 2019.

The Startup

Medium's largest active publication, followed by +568K people. Follow to join our community.

Bryn Bennett

Written by

Full-stack engineer at Syntx.io // Writer // Ex-Music Manager // Dog mom // Tree People volunteer // codedependent.co 🏳️‍🌈

The Startup

Medium's largest active publication, followed by +568K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade