problem:
logout action (from ui button) firebase.auth().signOut() does not restore the firebaseui; meaning there is no prompt to login again or the ui expected initially (as before logging in)--it does not return to the initial state.
scenario: single-page app, use the provided web-ui to login successfully, later click a logout button to logout at that browser/client;
related: if I hard-reload the prompt to login exists and my own state management shows it again after logout, providing the desired effect.
new firebaseui.auth.AuthUI(auth)
.start('#authui', {
callbacks: {
signInSuccessWithAuthResult: function(res, redirectUrl){
return false;
}
,signInFailure: function(error){
// omitted
}
}
,signInOptions: [
{ provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID
,customParameters:{prompt:'select_account'}
,scopes: ['email','profile']
,authMethod: 'https://accounts.google.com'
},
{ provider: firebase.auth.EmailAuthProvider.PROVIDER_ID, requireDisplayName: true }
],
tosUrl: '/terms.html',
privacyPolicyUrl: '/privacy.html'
});
})
The UI does not re-render itself on sign out.
One common way to render the UI when needed in a single page app is as follows:
var ui = new firebaseui.auth.AuthUI(auth);
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// Show user signed in screen. Reset if user just signed in. (Single page app)
ui.reset();
} else {
// No user signed in, render sign-in UI.
ui.start(config);
}
});
When the user signs out, the listener will trigger with no user and render the UI.
Note I have not tested the code above but it should work in theory.
thanks @bojeil-google this doesn't work (in my scenario at least) and it led me to _what does work_ which is to add the ui re-start in the logout handling below. If there's a more appropriate way to do this please add a link or comment--and thanks for it.
logout(){
// returns nothing (no response)
return firebase.auth().signOut().then((res)=>{
console.log('signOut ok',res);
ui.start('#auth-web-ui', uiConfig);
return res || 'okay';
}).catch((err)=>{
console.warn('signOut error',res);
return err || 'error';
})
.finally((res)=>{
console.log('signOut resolved', res);
// stateChange handles all of my instances onAuthStateChanged and application state
this.stateChange();
});
}
Most helpful comment
The UI does not re-render itself on sign out.
One common way to render the UI when needed in a single page app is as follows:
When the user signs out, the listener will trigger with no user and render the UI.
Note I have not tested the code above but it should work in theory.