Authentication is required in all modern day web applications. People want to make sure their information is secure. Likewise developers want to make sure certain parts of their application are guarded against non-authenticated users. Authentication is a double-edged sword in my opinion.
For your app to be well-constructed it needs authentication, but its not a very shiny feature that you can show off. It’s expected to be a part of the finished application. As developers these features should be implemented as quickly and painlessly as possible and work as needed. Enter Firebase Authentication.
I added a Firebase real time database to my recent React project to get it up and running as fast as possible. ( I could have written a Ruby on Rails back end with a PostgreSQL database, but wanted to focus on React and Redux with this project. ) Firebase’s database has some built in modules for working with authentication and getting current user data. I’ll share a few of the methods that I was introduced to and how I used them below.
How It All Starts
To work with authentication in a Firebase app you need to have a project in firebase and have it connected to your app. Firebase has great documentation for this and even a demo project for you to work with if you don’t have something already in the works so I won’t go into that here.
Connecting the Authentication Module
Once you’ve gotten your app connected to a Firebase Project you are free to roam the docs and find info on various functionality. Things like Authentication, Storage, Hosting, Cloud Functions, Security Rules, Crashlytics and many more
Authenticating a user
There are a few ways Firebase suggests getting Authentication up and running and you can choose based on your application. The first is to use FirebaseUI Auth, a drop-in UI library. This will implement some complete user flows for all of Firbase’s supported sign-in methods ( google, twitter, email, etc). Because this solution takes a lot of creative license when it comes to the sign-in UX this solution was a little rigid for my needs. **you can fork the repo for this ( it’s open sourced ) and make the changes as you need them but seems like a lot of work when they also offer another more easily tailored solution.
The second method, and my preferred for this project, was the Firebase SDK, which allows you to build out the authentication flow using a few key methods and allowing some settings in your Firebase application.
Enabling Authentication in your Firebase Application
You’re going to want to start on your Firebase application console for the application you are working on. Under the Authentication heading you will need to enable the type of authentication you are going to want to use. For this app I used Email and Password
Signing Up a New User:
Signing up a new user is as simple as using the firebase.auth().createUserWithEmailAndPassword(email, password) method. To get this hooked up to our application we need to make sure we are importing firebase like this import * as firebase from 'firebase' I know we are over importing here, but we will go back and re-factor this and only import what we need after taking some time to get it hooked up.
On our sign up form we listen for the submit and run some async code to create a user with their email and password. This function receives a catch block for any error ( like if an email has already been used in the making of an account ) Easy as that for the sign up. Sign in was also a very easy process.
Signing In an Existing User:
Since we are still using email and password to sign in we are going to do a similar operation with a different function. We will now listen to our form and reach out to firebase.auth().signInWithEmailAndPassword(email, password) again adding a catch block to handle any errors. ( like when an email address doesn’t have an account )
That’s really it. We now have some basic functionality for signing up or signing in a user.
So obviously I didn’t detail every single step you are going to need here. You will need a form on your page to sign up or sign in, and you will need a piece of state to tell you if you are on the sign up or sign in form. I wanted to extrapolate out the Firebase specific pieces so you could see just how easy they are to include in one of your next applications. I hope to continue working with and trying more of these modules and writing about them to show how easy of a time it was. If they are anything like the authentication I guarantee I will be using them more often.
