Firebase is a mobile and web application development platform by Google. It aims at easing the entire web development process by providing us with all the real-time solutions for the various challenges faced by us.
Authentication is one of the Firebase products that we will be looking at in this article.
Firebase authentication enables simple, multi-platform sign in our application.
It is secured and stable and manages its own database for users.
Firebase is very quick to implement.
Since authentication is a part of the Firebase suite, we get to integrate other Firebase tools as well.
IN THIS ARTICLE
We will -
Integrate Firebase auth in our web-app.
Create some simple web pages* with support for authentication using Google.
Enable email verification and mobile verification in our application.
*We have used a basic http-server for serving files. Any server will do.
The entire code used in this article is available on Github:/FirebaseWebAuthentication
The first thing we need to do is to create a Firebase project.
Go to the Firebase console and create a new project by clicking the Add project button.
Go to Authentication and enable Email/Password and Google verification under Sign-in method.
Below, under Advanced section, you can manage features like sign-up quota and one account per email-address rule.
Include the necessary scripts in your js file.
Add the following snippet to your js code:
This initializes the firebase object which can be used later to do various tasks.
Let’s write some code to get started with sign up.
Some basic form code and we get this** -
**HTML is out of scope for this article
Fill in the form and you receive a verification mail.
Go to the console under Authentication to see the list of users who signed up for your application.
SIGN IN/SIGN OUT
Just as we wrote some code for signing up, we write some similar code for signing in.
All sign in or sign out events lead to change in firebase auth objects auth state. We catch this using a simple change listener and implement actions post sign in or sign out.
Signing in looks like this:
One of the major advantages of Firebase is that the text boxes for input are automatically sanitized. For eg.
USING GOOGLE FOR AUTH
Integrating Google authentication system is very easy with Firebase. We have to set up the provider service as:
Sign up code goes as:
On clicking the sign in button, the user gets a pop-up list for choosing one Google account and he/she can then proceed with it.
A few permissions and you’re all set!
ADVANCE FIREBASE CONCEPTS
“The best way to learn something is to study its docs.”
Firebase Web Documentation is the best place to start exploring more and learning more about Firebase. Firebase can also be used with iOS or Android apps. Also, there are a lot more features to Firebase than just authentication. Explore on their official website Firebase for more.