FirebaseUI for Web — Auth - how to re-authenticate?

Question

I'm using FirebaseUI for Web — Auth widget to simplify the auth workflow, and I'm stuck with a problem. Everything works OK the first time. But, after I sign in, the widget contents clears away, and the 'Sign in with ...' buttons never come back. Trying to recreate the widget brings up the error "UI Widget is already initialized on the page. Only one widget instance can be initialized per page."

This means that users need to refresh the page to get the sign-in buttons back. Is there a more elegant way?

Answer 1

Are you rendering the widget in a single page application? If so, this currently won't work. You will have to render the sign in widget in a popup whenever you want the user to sign in.

Answer 2

As bojeil stated in the first answer (May 2016), there was really a problem using it in single page applications workflows. But in more recent versions of firebase-ui you can actually reset the widget so you won't need to initialize it again.

All you need to do is to keep the widgets instance reference in a variable. Then, when you want to render it again you use the same reference, reset it and then restart it.

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