top

Adding an authentication system to your website

INTRODUCTION 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. WHY FIREBASE? 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 GETTING STARTED 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. SETTING UP 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. SIGN UP 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.
Rated 4.0/5 based on 20 customer reviews
Normal Mode Dark Mode

Adding an authentication system to your website

Shubham Sharma
Blog
03rd Jan, 2018
Adding an authentication system to your website

INTRODUCTION

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.

WHY FIREBASE?

  • 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

GETTING STARTED

The first thing we need to do is to create a Firebase project.

  1. Go to the Firebase console and create a new project by clicking the Add project button.Firebase console

  2. Go to Authentication and enable Email/Password and Google verification under Sign-in method.

  3. Below, under Advanced section, you can manage features like sign-up quota and one account per email-address rule.

SETTING UP

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.

SIGN UP

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.

Shubham

Shubham Sharma

Blog Author

I am a computer science undergrad. I like writing about technology and learning new things every day. Besides computers, I also like playing music. I play the guitar occasionally. I prefer tabs over spaces.

Leave a Reply

Your email address will not be published. Required fields are marked *

SUBSCRIBE OUR BLOG

Follow Us On

Share on

other Blogs

20% Discount