Getting started with Firebase Part 3. User authentication.

January 24, 2017


firebase
Pssst... Previous posts on this series:

Preface

User authentication is one of those web things that always gets me, I have probably written and used tens of libraries, some custom and some of the shelf, I am very curious to see how firebase deals with this subject of login,validating and keeping track of users, so let’s check it out!

Challenge: Find out how to use Firebase User Authentication

The first thing to do, is to go to your trusty Firebase console and enable your preferred methods of authentication:

Firebase

Once that is done, you have 2 options; you can use their recommended prepackaged or Drop-in system (Firebase UI) or you can go custom and use the SDK, you can read more about these options here: API Reference.

Option 1: Authenticate with Firebases SDK

I opted to start with creating an user with a very simple email password combination to start:

See the Pen Firebase Authentication pt. 1 by Eugenio Keno Leon (@k3no) on CodePen.

It is of course not a production or complete alternative, but it is relatively easy to expand if you wish to go custom, let’s now check the prepackaged option.

Option 2: Authenticate with Firebase UI

See the Pen Firebase Authentication pt. 2 Firebase UI by Eugenio Keno Leon (@k3no) on CodePen.

Note: Firebase doesn't seem to like more than 1 instance on the same page, so you will need to provide your own credentials or un-comment mine on the pen, this is what it looks like: FirebaseUi Authentication

The Drop-In alternative seems to work fairly well with the expected caveat that you are somehow stuck with Material Design for the UI and their choice of authentication flow. You can change and tweak both by modifying options and the library, but at that point you might as well go with the sdk, all in all minor complaints.

Note: Unfortunately only the email sign-up option works within codepen, for the rest to work you would need to request api keys and authorization from the providers , additionally, some do not allow iframes and have cors security issues, all I am saying is that these problems are due to me just making an example inside a web editor and not a real App, so it shouldn't be an issue for you.

Tracking users:

See the Pen Firebase Authentication - Tracking Users by Eugenio Keno Leon (@k3no) on CodePen.

Note: As mentioned before, You will need to run the pen and un comment my Firebase Credentials or replace them with yours for the code sample to properly run

The above code should render the following authentication flow:

FirebaseUi Authentication Flow

Tracking the user is then a matter of keeping a reference to the userId or token made available by other authorization providers (facebook, google,etc) and listening for changes with : firebase.auth().onAuthStateChanged.

Note:Upon creating a user with Firebase UI email & password, a First & last name is requested, and stored as part of the user object, this object and it's properties change based on the provider, if you need to store specific information then you will have to store it on your firebase database read more about this here : Users in Firebase Projects

Conclusion:

Firebase Authentication is a mixed bag of awesome,compromises and plenty of options, I barely scratched the surface of the complexity that the API and SDK provide,as such it is still a bit on the complex side,Authentication is still not easy :( on the other hand, if you want to add authentication to your project in a few hours, you can easily do it by using the drop-in option provided you are ok with their flow and UI, as I mentioned something of a compromise, but hard to find an alternative.

Best,

Keno