Wow Firebase does everything for us…
One day, I wanted to implement a simple application with authentication management, web services using Angular 2, RESTful APIs and NoSQL. I started this by setting up XYZ NoSQL server and nodejs in my PC and started the implementation. I know that I am a bit lazy guy ;). Also I know that all the inventors are lazy, that is because they always try to find shortcut to achieve targets in their lives :D. I wanted to find a short way to implement authentication management part. I found lot of angular tutorials, implementations and this amazing Google Firebase.
Firebase is free for Authentication (except Phone Auth), Analytics, App Indexing, Dynamic Links, Invites, Remote Config, Cloud Messaging (FCM), Performance Monitoring, and Crash Reporting for non growing apps. The most important part for me is firebase
- is NoSQL
- provides RESTful supportive URLs
- manage authentication
Integrating firebase to your app is just a matter of adding six lines by coping configurations from firebase.
- Step1: Create your database in firebase by using firebase console
- Step2: Go to Project Settings

- Step3: click on “Add firebase to your app”

- Step4: copy configurations to your angular project

See below implementation.
export class UserService implements CanActivate {
userLoggedIn: boolean = false;
loggedInUser: string;
authUser: any;
constructor( private router: Router ) {
firebase.initializeApp({
apiKey: "AIzaSyBQ7uH-kc3worQHymJyiRkAts9UtYQ2JC4",
authDomain: "buyandsell-bcfb6.firebaseapp.com",
databaseURL: "https://buyandsell-bcfb6.firebaseio.com",
projectId: "buyandsell-bcfb6",
storageBucket: "buyandsell-bcfb6.appspot.com",
messagingSenderId: "285665269454"
})
}To handle authentication via firebase, you should follow below steps.
- Step1: Go to Authentication section

- Step2: Select SIGN-IN METHOD and enable email/password

Now you can implement your Angular code to accept html form values and pass them to firebase using firebase.auth() function.
login.component.ts
login(){
this.userSVC.login(this.email, this.password1);
this.userSVC.verifyUser();
}user.services.ts
verifyUser() {
this.authUser = firebase.auth().currentUser;
if (this.authUser) {
alert(`Welcome ${this.authUser.email}`);
this.loggedInUser = this.authUser.email;
this.userLoggedIn = true;
this.router.navigate(['/admin']);
}
}
login(loginEmail: string, loginPassword: string) {
firebase.auth().signInWithEmailAndPassword(loginEmail, loginPassword)
.catch(function(error) {
alert(`${error.message} Unable to login. Try again!`);
});
}