Firebaseui-web: `signOut()` does not restore the login ui

Created on 18 Feb 2019  路  2Comments  路  Source: firebase/firebaseui-web

  • Operating System version: macos 10.13
  • Browser version: chrome 72.0.3626.109
  • Firebase UI version: firebaseui/3.5.2
  • Firebase SDK version: firebase/5.8.3

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'
            });
        })


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:

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.

All 2 comments

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();
        });
    }

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ronyjacobson picture ronyjacobson  路  4Comments

mesqueeb picture mesqueeb  路  5Comments

jin-chong picture jin-chong  路  5Comments

mattpalermo picture mattpalermo  路  3Comments

deepfriedbrain picture deepfriedbrain  路  5Comments