
npm install dcampodonico-firebaseui-angular-esbash
$ 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`