A wrapper for FirebaseUI in Angular
Clone or download


Build Status npm version


Screenshot of Login screen


To install this library, run:

$ npm install firebaseui-angular --save

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

$ npm install firebase firebaseui @angular/fire 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 {AppComponent} from './app.component';
import {environment} from '../environments/environment';
import {AppRoutingModule} from './app-routing.module';

import {FirebaseUIModule} from 'firebaseui-angular';
import * as firebase from 'firebase/app';
import * as firebaseui from 'firebaseui';
// currently there is a bug while building the app with --prod
// - https://github.com/RaphaelJenni/FirebaseUI-Angular/issues/76
// the plugin exposes the two libraries as well. You can use those:
import {FirebaseUIModule, firebase, firebaseui} from 'firebaseui-angular';

import {AngularFireModule} from '@angular/fire';
import {AngularFireAuthModule} from '@angular/fire/auth';

const firebaseUiAuthConfig: firebaseui.auth.Config = {
  signInFlow: 'popup',
  signInOptions: [
      scopes: [
      customParameters: {
        'auth_type': 'reauthenticate'
      provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID
      requireDisplayName: false,
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID
  tosUrl: '<your-tos-link>',
  privacyPolicyUrl: '<your-privacyPolicyUrl-link>',
  credentialHelper: firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule {

Add the firebaseui css to your imports:

Option 1: CSS Import

May be incompatible with older browsers.

Import the firebaseui css to your src/styles.css file:

@import '~firebaseui/dist/firebaseui.css';

Option 2: Angular-CLI

File: angular.json

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

  "projects": {
    [your-project-name]: {
      "architect": {
        "build": {
          "options": {
            "styles": [
        "test": {
          "options": {
            "styles": [

Option 3: HTML Link

Put this in the <head> tag of your index.html file:

<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.0.0/firebaseui.css" />

Make sure the version number matches the version of firebaseui you have installed with npm.

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



For the configuration of the module see the official firebaseui documentation: Config

If you use a version prior to 3.3.0 check the old README

Listen to auth state changes


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.

success / failure callbacks

successCallback(signInSuccessData: FirebaseUISignInSuccessWithAuthResult) {

errorCallback(errorData: FirebaseUISignInFailure) {

Disable autosign

constructor(private firebaseuiAngularLibraryService: FirebaseuiAngularLibraryService) {


There is a sample project in the root folder.

  • Just replace the firebase config in src\environments\environment.ts.
  • Run npm install
  • Run npm run build-lib
  • Run ng serve


The library sources are in projects/firebaseui/angular/library.

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

$ npm run build-lib

To lint all *.ts files:

$ npm run lint

There are test files, but they are empty at the moment.


Prod build error

ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'firebase/index' in '...'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'firebaseui/dist/index' in '...'

Use the firebase and firebaseui instances exposed by the plugin:

import {..., firebase, firebaseui} from 'firebaseui-angular';

CSS not loaded

If you have added the css to the angular.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

http://localhost:4200/images/buffer.svg?embed 404 (Not Found)

Put this into your styles.scss file:

@supports (-webkit-appearance:none) {
  .mdl-progress:not(.mdl-progress--indeterminate):not(.mdl-progress--indeterminate) > .auxbar,
  .mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar {
    mask: url(/assets/images/buffer.svg?embed) !important;

and put a buffer.svg file into assets/images. This will stop this error message.


MIT © Raphael Jenni