Callback when auth is started, to close modal popup

[torarnv]

I'm presenting the sign in widget in a modal poup, that i'd like to dismiss when the user clicks the sign-in button. I'm using signInFlow: 'popup', so leaving the app's modal popup open looks a bit weird. Or at least I'd like to hide the firebaseui widget and replace it with a spinner while the auth popup dialog is open.

Is there a callback, or hack, I can use to hook into the start of the auth process?

[bojeil-google]

You basically need a click listener when the "Sign in with Google" button is clicked. This doesn't seem like a common useful feature to have. There is debate about supporting a callback on UI change (when the button shows, you can add your click listener), but that is the most we can offer to help you with this and is not guaranteed to always work as closing the UI while the popup is being processed will interrupt the flow and in general is not recommend.

I think for your functionality (showing just one button to sign in with google which is hidden at the time of your choosing) is simple enough to be built from scratch and not using FirebaseUI.

[torarnv]

Thanks for your feedback!

I think for your functionality (showing just one button to sign in with google which is hidden at the time of your choosing) is simple enough to be built from scratch and not using FirebaseUI.

True, although I wanted to use firebaseui so that I could easily support more providers, one-click google sign-in, etc.

You basically need a click listener when the "Sign in with Google" button is clicked.

Right.

This doesn't seem like a common useful feature to have. There is debate about supporting a callback on UI change (when the button shows, you can add your click listener), but that is the most we can offer to help you with this

That would mean I would have to add a click listener to the button manually, relying on implementation details of how firebaseui is implemented, wouldn't it? The whole point of an official callback is so I don't need that.

and is not guaranteed to always work as closing the UI while the popup is being processed will interrupt the flow and in general is not recommend.

I'm not familiar with how firebaseui and the underlying tech works, but why is the widget tied to the state/flow handling? Isn't that something a global singleton would manage, while the UI is just for triggering or reacting to changes?

Would it work to have the firebaseui widget hidden somewhere (off screen?), and trigger a click event on it manually from a custom "sign-in" button in my popup?

Thanks!

[bojeil-google]

Again, I think you are better off building your own button (you seem be using FirebaseUI just for the button styling). This is basically all you need here. If you want to add more providers, you would need to change your current UI as you can't remove it as you currently do when the popup opens. There are cases where account linking is required and you can't close the popup.

One reason this would break, is because we actually sign in you in on a temporary auth instance before we finalize sign in on the Auth instance you provide. The reason is to prevent triggering onAuthStateChanged listeners prematurely interrupting the flow when additional action is needed before completing sign-in. Removing the UI early would break the flow.

Hiding the UI would be better, though in some cases additional user action is needed (if you support multiple providers, eg. account linking case, etc.) which you don't. The user would not be able to see these changes.

[torarnv]

Ah, I see. Thanks for you explanation! I did plan to support both multiple providers and account liking going forward, which was why I wanted to use Firebase UI, so it would handle all the details. I guess putting Firebase UI in a popup is a bad idea, a single dedicated page works better with the many flows that Firebase UI may trigger.

I'll play around with it some more an may come back to this issue if I have some more detailed info or a more fleshed out use-case. Thanks!

[nicolasgarnier]

Closing this as we'll tack the feature request of adding anew callbacks in #311

PS: there is also a workaround to access the buttons once they are loaded.