firebaseui-angular

Installation

To install this library, run:

$ npm install firebaseui-angular --save

To run this library you need to have AngularFire, Firebase, FirebaseUI-Web installed. Fast install:

$ npm install firebase firebaseui angularfire2 firebaseui-angular --save

How to use

Add the FirebaseUIModule with the config to your imports. Make sure you have initialized AngularFire correctly.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import {
  AuthMethods,
  AuthProvider,
  AuthProviderWithCustomConfig,
  CredentialHelper,
  FirebaseUIAuthConfig,
  FirebaseUIModule
} from 'firebaseui-angular';
import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AppRoutingModule } from './app-routing.module';

const facebookCustomConfig: AuthProviderWithCustomConfig = {
  provider: AuthProvider.Facebook,
  customConfig: {
    scopes: [
      'public_profile',
      'email',
      'user_likes',
      'user_friends'
    ],
    customParameters: {
      // Forces password re-entry.
      auth_type: 'reauthenticate'
    }
  }
};

const firebaseUiAuthConfig: FirebaseUIAuthConfig = {
  providers: [
    AuthProvider.Google,
    facebookCustomConfig,
    AuthProvider.Twitter,
    AuthProvider.Github,
    AuthProvider.Password,
    AuthProvider.Phone
  ],
  method: AuthMethods.Popup,
  tos: '<your-tos-link>',
  credentialHelper: CredentialHelper.AccountChooser
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    FirebaseUIModule.forRoot(firebaseUiAuthConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Add the firebaseui css to your imports:

Angular-CLI

File: .angular-cli.json

Path: "../node_modules/firebaseui/dist/firebaseui.css"

{
"apps": [
    {
      ...
      "styles": [
        "styles.css",
        "../node_modules/firebaseui/dist/firebaseui.css"
      ],
      "scripts": [],
      ...
    }
  ]
}

Once everything is set up, you can use the component in your Angular application:

<firebase-ui></firebase-ui>

Config

FirebaseUIAuthConfig

or AuthProviderWithCustomConfig

Default: Popup

Default: '''

It is a hard redirect, so it isn't the angular way. Better do it with authState listener.

Default: No redirect

Default: AccountChooser

AuthProviderWithCustomConfig

To see the custom configs, check the firebaseUI doc: Provider configuration

 provider: AuthProvider.Facebook,
 customConfig: {
    ...
  }

Listen to auth state changes

this.angularFireAuth.authState.subscribe(this.firebaseAuthChangeListener);

private firebaseAuthChangeListener(response) {
    // if needed, do a redirect in here
    if (response) {
      console.log('Logged in :)');
    } else {
      console.log('Logged out :(');
    }
  }

Don't forget to unsubscribe at the end.

SignInSuccess Callback

<firebase-ui (signInSuccess)="successCallback($event)"></firebase-ui>

successCallback(signInSuccessData: FirebaseUISignInSuccess) {
    ...
}

Sample

There is a sample project in the sample folder. Just replace the firebase config in sample\src\environments\environment.ts.

Then you can run it via the angular-cli.

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

Troubleshoot

CSS not loaded

If you have added the css to the .angular-cli.json but nothing happened. Try to restart the server (Ctrl-C and ng serve)

ERROR in ./~/firebase/app/shared_promise.js

This is a know issue in the firebase project. To fix that (for now), do that:

npm install promise-polyfill --save-exact

License

MIT © Raphael Jenni