complete authentication in Angular using Firebase

Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, Github and more.

This is part 1. It was getting too long so I had to split it into 2 parts.

Throughout this course, I’ll be referring to Angular 2 as simply Angular. Note that Angular 1 is also being referred to as AngularJS. That being said.

In this tutorial, I’ll be taking you through how to easily handle authentication in your Angular application using the following Sign-in methods:

Twitter

Facebook

Regular Email/Password

Github

Gmail

Generally Speaking (oh Sorry, Coding)

Follow these steps in creating your new Angular app. We’ll be using angular-cli. Alternatively, you can skip this step and clone the starter version of the app in my github repository

$ ng new angular2-authentication-firebase

$ cd angular2-authentication-firebase

$ ng serve $ npm install --save font-awesome angular2-fontawesome

In the above code, we created a new Angular app using angular-cli. We moved into the directory and we served the application using the ng serve command. Also, we pulled in FontAwesome library so we can take advantage of its icons.

After this step, if your browser does not automatically open, visit http://localhost:4200

Include bootstrap and fontawesome in your app by adding the following lines to your src/styles.css file:

@import "~bootstrap/dist/css/bootstrap.min.css";

@import "~font-awesome/css/font-awesome.css";

Clone the starter repository and get started

I have created a starter Angular 2 application, clone it here. It has the following pre-installed. Final version is found here

A Login component and a Dashboard component with their html and css written.

Bootstrap’s html and css.

Fontawesome — for the social icons

Run the command:

npm install

It looks like this: