FirebaseUi-Angular

!Screenshot of Login screen

Installation

To install this library, run:

``bash
$ npm install firebaseui-angular --save
`

To run this library you need to have AngularFire2, Firebase,
FirebaseUI-Web installed.
Fast install:
`bash
$ 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.


`typescript
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: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
{
scopes: [
'public_profile',
'email',
'user_likes',
'user_friends'
],
customParameters: {
'auth_type': 'reauthenticate'
},
provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID
},
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
firebase.auth.GithubAuthProvider.PROVIDER_ID,
{
requireDisplayName: false,
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID
},
firebase.auth.PhoneAuthProvider.PROVIDER_ID,
firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
],
tosUrl: '',
privacyPolicyUrl: '',
credentialHelper: firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM
};

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


`

$3

Option 1: CSS Import

May be incompatible with older browsers.

Import the firebaseui css to your src/styles.css file:
`css
@import '~firebaseui/dist/firebaseui.css';
`
Option 2: Angular-CLI

File: angular.json

Path: "node_modules/firebaseui/dist/firebaseui.css"
`json
{
"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 tag of your index.html file:
`html

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

`angular2html

`

$3

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_

$3

`typescript
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.

$3

`html
(signInSuccessWithAuthResult)="successCallback($event)"
(signInFailure)="errorCallback($event)">
`

`typescript
successCallback(signInSuccessData: FirebaseUISignInSuccessWithAuthResult) {
...
}

errorCallback(errorData: FirebaseUISignInFailure) {
...
}
`

$3

`typescript
constructor(private firebaseuiAngularLibraryService: FirebaseuiAngularLibraryService) {
firebaseuiAngularLibraryService.firebaseUiInstance.disableAutoSignIn();
}
`

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:

`bash
$ npm run build-lib
`

To lint all *.ts files:

`bash
$ npm run lint
`

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

Troubleshoot

$3

`
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';

$3


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

$3

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

npm install promise-polyfill --save-exact

$3

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.

License

MIT © Raphael Jenni