FirebaseUI for the web - Auth - how to re-authenticate?

Question

I use the FirebaseUI widget for Web - Auth to simplify the auth workflow, and I ran into a problem. Everything is working fine for the first time. But after logging in, the contents of the widget are cleared, and the "Login from ..." buttons never return. Attempting to recreate the widget generates the error "The UI widget is already initialized on the page. Only one instance of the widget can be initialized per page."

This means that users need to refresh the page in order to return the login buttons. Is there a more elegant way?

Answer 1

Do you render a widget in a single page application? If so, this will not work at present. You will need to display the sign in the widgets in the pop-up window when you want the user to log in.

Answer 2

As bojeil said in the first answer (May 2016), the problem was related to him in single-threaded application workflows. But in later versions of firebase-ui, you can actually reset the widget, so you won’t need to initialize it again.

All you have to do is save the link of the widget instance in a variable. Then, when you want to display it again, you use the same link, reset, and then restart it.

var ui; if (ui) { ui.reset(); } else { ui = new firebaseui.auth.AuthUI(firebase.auth()); } ui.start('#firebaseui-auth-container', uiConfig);