Create a firebase backend Angular 2 application

Firebase is a Google could database, which provides real time data updating.

Generate project skeleton

Create a project via ng command.

ng new hello-ng2fire

Add AngularFire2 and firebase as dependencies.

npm install angularfire2 firebase --save

AngularFire is Angular 2 integration for Firebase.

Configure Firebase

Go to Firebase Console , create a Firebase application.

Switch to the new created application overview page.

Click the firebase to your web pages, and then get the firebase configuration in the popup dialog.

Create a new app-firebase.module.ts file under /src/main/app folder.

import { NgModule } from '@angular/core';

import { AngularFireModule, AuthMethods } from 'angularfire2';
import * as firebase from 'firebase';

const firebaseConfig = {
  apiKey: 'AIzaSyDZnJROK5LvI1S6G2GRfa4xmvGPvDtdyKM',
  authDomain: 'ng2-firebase-1194b.firebaseapp.com',
  databaseURL: 'https://ng2-firebase-1194b.firebaseio.com',
  storageBucket: 'ng2-firebase-1194b.appspot.com',
  messagingSenderId: '702226924584'
};

@NgModule({
  imports: [
    AngularFireModule.initializeApp(
      firebaseConfig,
      {
        method: AuthMethods.Popup,
        //method: AuthMethods.Redirect
      }
    )],
  exports: [
    AngularFireModule
  ]
})
export class AppFirebaseModule { }

This is a standard Angular 2 module, declare it in the AppModule.

import { AppFirebaseModule } from './app-firebase.module';
...

@NgModule({
  imports: [
  ...
  AppFirebaseModule
  ...
})  
export class AppModule { }

Now firebase is ready for application.

Add more Authentications

By default Firebase supports email/password pair as user credentials to sign in. It is easy to add the popular social accounts to get authentication.

Firebase supports Github, Google, Twitter, and facebook. Do not forget to register your app(what you see here) in the developer page of these social network, and add API keys in the Firebase Console.

The new AuthService for Firbase authentication.

import { Injectable } from '@angular/core';
import { AuthProviders, AuthMethods, AngularFireAuth, FirebaseAuthState } from 'angularfire2';

@Injectable()
export class AuthService {
  private authState: FirebaseAuthState = null;

  constructor(public auth$: AngularFireAuth) {
    this.auth$.subscribe((state: FirebaseAuthState) => {
      this.authState = state;
    });
  }

  get authenticated(): boolean {
    return this.authState !== null;
  }

  get id(): string {
    return this.authenticated ? this.authState.uid : '';
  }

  signIn(provider: number): firebase.Promise<FirebaseAuthState> {
    return this.auth$.login({provider})
      .catch(error => console.log('ERROR @ AuthService#signIn() :', error));
  }

  signInWithEmailAndPassword(data: any): firebase.Promise<FirebaseAuthState>  {
    console.log('signin with credentials:' + data);
    return  this.auth$.login(
      data,
      { provider: AuthProviders.Password, method: AuthMethods.Password }
    );
  }

  createUserWithEmailAndPassword(data: any): firebase.Promise<FirebaseAuthState>{
    return this.auth$.createUser(data);
  }

  signInWithGithub(): firebase.Promise<FirebaseAuthState> {
    return this.signIn(AuthProviders.Github);
  }

  signInWithGoogle(): firebase.Promise<FirebaseAuthState> {
    return this.signIn(AuthProviders.Google);
  }

  signInWithTwitter(): firebase.Promise<FirebaseAuthState> {
    return this.signIn(AuthProviders.Twitter);
  }

  signInWithFacebook(): firebase.Promise<FirebaseAuthState> {
    return this.signIn(AuthProviders.Facebook);
  }

  signOut(): void {
    this.auth$.logout();
  }

}

Sample Codes

The sample codes is hosted on my Github.com account.

https://github.com/hantsy/angular2-firebase-sample