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,
  autoUpgradeAnonymousUsers: true,
  disableSignInSuccessCallback: true
};

@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:

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": [
              "src/styles.css",
              "node_modules/firebaseui/dist/firebaseui.css"
            ]
          }
        },
        ...
        "test": {
          "options": {
            ...
            "styles": [
              "src/styles.css",
              "node_modules/firebaseui/dist/firebaseui.css"
            ]
          }
        }
      }
    }
  }
}

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:

<firebase-ui></firebase-ui>

Config

FirebaseUIAuthConfig

Property	Required	Description
providers	Yes	AuthProvider.Google AuthProvider.Facebook AuthProvider.Twitter, AuthProvider.Github AuthProvider.Password AuthProvider.Phone or AuthProviderWithCustomConfig
method	No	AuthMethods.Popup AuthMethods.Redirect Default: Popup
tos	No	The link to your terms of services Default: '''
privacyPolicyUrl	No	The link to your privacy policy Default: ''' - But it will show a warning if you don't provide one.
signInSuccessUrl	No	The url whre the user should be redirected. It is a hard redirect, so it isn't the angular way. Better do it with authState listener. Default: No redirect
CredentialHelper	No	AccountChooser OneTap None Default: AccountChooser
autoUpgradeAnonymousUsers	No	Boolean Default: false
disableSignInSuccessCallback	No	FirebaseUi has currently two different callbacks for the same thing. signInSuccess which now is deprecated and signInSuccessWithAuthResult. To not break any already running stuff, this functionality was added to be able to disable it entirely. So, if you set disableSignInSuccessCallback to true, the signInSuccess Callback is skipped and the warning disappears. --> Migrate from `signInSuccess` to `signInSuccessWithAuthResult` This is for backwards compatibility reasons and will be removed in the future. Boolean Default: false but the advised value is *true*

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.

Sign-in success / failure callbacks

<firebase-ui
    (signInSuccessWithAuthResult)="successCallback($event)"
    (signInFailure)="errorCallback($event)"></firebase-ui>

successCallback(signInSuccessData: FirebaseUISignInSuccessWithAuthResult) {
    ...
}

errorCallback(errorData: FirebaseUISignInFailure) {
    ...
}

Sample

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

Development

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.

Troubleshoot

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.

arjunyel / firebaseui-angular Goto Github PK