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

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
(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