Firebaseui-web: Angular module?

[drixie]

I assume this is in the works...

[tptshoe]

Hi, it's not in any way official, but I've been playing around with this...

https://github.com/tptshoe/authtest

[fisherds]

The problem is that the current Firebase UI shouldn't be used with a single page web app in it's current state. Angular 2 is pretty much only for single page web apps, so you shouldn't be using the Firebase UI with Angular 2 right now.

You can call ui.start exactly once. So if a route calls .start, then a user does things that don't result in full page reload (Angular 2 apps shouldn't really ever require a full page reload), then you can never get the UI to appear again. So it would appear the Firebase UI is worthless in Angular 2 until that problem is addressed.

More info...
http://stackoverflow.com/questions/37413500/firebaseui-for-web-auth-how-to-re-authenticate
https://github.com/tptshoe/authtest/issues/1

Anybody tried to do the popup window solution? Does it feel ok from a user experience?

[TMSCH]

Another solution would be to redirect to the widget page, that will probably feel better on mobile. We are also working on a fix to solve this issue.

[RaphaelJenni]

@fisherds I implemented it with the popup solution and a callback when the user is logged in. Works nice with AngularFire.

You can try it here: :)
https://github.com/RaphaelJenni/FirebaseUIAngularIntegration

[TMSCH]

@RaphaelJenni thanks for sharing this!
@fisherds we actually implemented a reset() method to support Single Page App: doc.

[fisherds]

Awesome! Love seeing code get better and better. I'll try things out.

[Splaktar]

@RaphaelJenni thank you for the example repo! I tried the same code in my project with AngularFire2, but I just keep getting

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

When I call this.firebaseUiInstance = new firebaseui.auth.AuthUI(firebase.auth());. This is odd since I've got AngularFireModule.initializeApp(environment.firebaseConfig) in my app.module.ts.

I tried calling AngularFireModule.initializeApp(environment.firebaseConfig, '[DEFAULT]') as well, but no luck.

Adding an extra call to firebase.initializeApp(environment.firebaseConfig); in my constructor() seems to fix this issue.

[RaphaelJenni]

@Splaktar Looking into it.

[RaphaelJenni]

@Splaktar Updated demo project to the newest angular version.

With the new version you have to Inject the firebaseApp manually Code

Beside that I changed requires to import.

For further questions create an issue on the project page, so everyone can see it 😄

[RaphaelJenni]

@Splaktar I wrote a plugin today, which wraps the firebaseui into an angular component. You can give it a try. :) https://github.com/RaphaelJenni/firebaseui-angular

[RaphaelJenni]

By the way, initializing firebase multiple times can cause some problems. Use the angularApp instance of AngularFire.

[Splaktar]

@RaphaelJenni Thank you. Injecting firebaseApp is quite a bit cleaner than initializing it twice. I do have to make sure to use only firebaseApp for accessing the Firebase SDK though as any reference to firebase.<anything> causes the Firebase: No Firebase App '[DEFAULT]' has been created error to come back.

[code-tree]

reset() method doesn't appear to work as is described in the docs. I'm getting the same errors mentioned above. Do docs need updating?

[bojeil-google]

A Firebase app instance needs to be created before initializing a FirebaseUI instance. reset API only allows the ability to clear the UI so it can be re-rendered on a page (useful for single page apps). Both issues are unrelated.

[code-tree]

Oh sorry, I probably didn't look carefully enough, as the error I was getting was probably different to above.

Instead of using an Angular service to ensure new firebaseui.auth.AuthUI() is only called once, I moved it into the ngOnInit method of the component holding the UI widget. Then I was calling reset() when the component is destroyed. But when it opened again (and called AuthUI() and start() again) I got an error message. I thought reset() would have prevented this.

(I've moved on now, and returned to using a service again)

[nicolasgarnier]

Closing this, I'll send a PR to link to https://github.com/RaphaelJenni/firebaseui-angular from the README