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 AngularFire, Firebase,
FirebaseUI-Web installed.
Fast install:
`bash
$ 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.


`typescript
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: '',
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"
`json
{
"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:

`angular2html

`

$3

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

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

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

$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

`

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

`bash
$ npm run build
`

To lint all *.ts files:

`bash
$ npm run lint
`

Troubleshoot

$3

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

License

MIT © Raphael Jenni