Use FirebaseUI with AngularFire2

Question

I did not find any samples. Is it possible to use FirebaseUI with AngularFire2? AFAIK UI is not part of AngularFire2.

Answer 1

Actually there is no direct integration between FirebaseUI (for the Internet) and AngularFire2.

AngularFire2 has built-in login primitives that integrate with lower-level login functions for the Firebase Authentication JavaScript SDK. See the AngularFire2 User Authentication Documentation for more information.

But given that both AngularFire2 and FirebaseUI-Web are built on top of the Firebase Authentication JavaScript SDK, they are likely to work together too. If you start the login stream from FirebaseUI , it will eventually fire the onAuthStateChanged() event at the SDK level. This is the same event that AngularFire2 listens to fire its own onAuth() event.

Answer 2

Yes, AngularFire and FirebaseUI can work together. You need:

1: import FirebaseUI and give it access to firebase (e.g. before loading)

 import * as firebase from 'firebase/app' // Attach firebase to window so FirebaseUI can access it (<any>window).firebase = firebase // Import FirebaseUI standalone (as its npm.js file causes double firebase code) import 'firebaseui/dist/firebaseui' // Imports for side effects only // Declare `window.firebaseui` that the above import creates declare global { const firebaseui } 

Why can't you just import * as firebaseui like you do with firebase

2: Init FirebaseUI in the service (so that it runs only once) and passes it the auth instance created by AngularFire.

 constructor(private af_auth: AngularFireAuth){ this.fui_auth = new firebaseui.auth.AuthUI(this.af_auth.auth) } 

3: visualize the user interface in the component

 @Component({ 'selector': 'app-signin', 'template': '', // Populated by `fui_auth.start()` }) export class SigninComp { constructor(private user: UserService){} ngOnInit(){ // Show Firebase UI auth widget this.user.fui_auth.start('app-signin', {config...}}) } } 

There is also an available module , but it is currently suffering this issue.