Use FirebaseUI with AngularFire2

Question

I haven't found any samples. Is it possible to use the FirebaseUI with AngularFire2? AFAIK the UI is not part of AngularFire2.

Answer 1

There is indeed no direct integration between FirebaseUI (for the web) and AngularFire2.

AngularFire2 has built in sign-in primitives that integrate with the lower-level sign-in functionality of the Firebase Authentication JavaScript SDK. For more about those, see the AngularFire2 documentation on user authentication.

But given that both AngularFire2 and FirebaseUI-Web are built on top of the Firebase Authentication JavaScript SDK, they'll likely work together fine too. If you start a sign-in flow from FirebaseUI, it will in the end trigger an onAuthStateChanged() event on the SDK level. That is the same event that AngularFire2 listens to to fire its own onAuth() event.

Answer 2

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

1: Import FirebaseUI and give it access to firebase (e.g. before bootstrap)

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 you can't just import * as firebaseui like you do with firebase

2: Init FirebaseUI in a service (so that it only happens once), and pass it the auth instance created by AngularFire.

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

3: Render the UI in a 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 a module available but it currently suffers from this issue