Logout with Firebase SDK not working

[lazyseals]

Current behavior

I have an application written in Nuxt.js v.2.14.6 and want to use Cypress v.5.4.0 for end-to-end testing. I use Firebase SDK v.7.21.1 for authentication. I created 2 Cypress commands, one for creating a new user and one for logging a user out. I first want to call the command for creating a new user followed by the logout command. In my application (see test code section) this process is working fine, both in production as well as in development via npm run dev.

Desired behavior

Cypress is not able to perform the logout correctly. Cypress is able to create a new user with my sign-up page. Cypress can also open the navbar dropdown and click the sign out button. What is failing in Cypress is the actual logout of the user, that is, the user dropdown is not replaced by the sign in button.

Since Firebase is storing auth information in an indexedDb, I compared both the indexed db of my local dev setup and the Cypress environment. Interestingly, there were no user information stored in the Cypress environment after the user creation, but in the local dev setup there were relevant user information stored.

I found another Github issue that addresses some problems with Cypress in combination with Firebase indexedDb. Unfortunately the solution of clearing the indexedDB before every test run did not work for me.

Test code to reproduce

The created Cypress commands:

Cypress.Commands.add('register', ({ email, password, username }) => {
  cy.visit('')
  cy.contains('Sign Up').click()
  cy.url().should('contain', 'sign-up')

  cy.get('input[id=username]').type(username)
  cy.get('input[id=email]').type(email)
  cy.get('input[id=password]').type(password)

  cy.get('input[type=submit]').click()

  cy.contains('Creating your account...')
  cy.location('pathname', { timeout: 20000 }).should('eq', '/')
})

The user registration in my application is performed on the url /sign-up (Hence the url check in the 3rd line). On successful registration, the user is redirected to the homepage (Hence the location check in the last line).

Cypress.Commands.add('logout', () => {
  cy.visit('')

  cy.get('[data-cy=nav-profile-dropdown]').click()
  cy.get('[data-cy=nav-sign-out]').click()

  cy.contains('Sign In')
})

The user can logout via a dropdown in the navbar. The logout is successful, when the dropdown in my navbar disappears and the Sign In button appears (Hence the contains check in the last line).

My application setup
In my application I further have a plugin authlistener.client.js that is using Firebase SDK's method onIdTokenChanged to determine a signOut event. The authlistener.client.jslooks like this:

export default async function ({ app, store, $sentry }) {
  const isServerAuthenticated = store.getters.IS_AUTHENTICATED

  if (!isServerAuthenticated) {
    try {
      await app.$fireAuth.signOut()
    } catch {}
  }
  app.$fireAuth.onIdTokenChanged(async function (authUser) {
    if (authUser) {
      try {
        await _handleAuthSuccess(authUser)
      } catch (e) {
        await _handleAuthError(e)
      }
    } else {
      await _handleSignOut()
    }
  })

  async function _handleAuthSuccess(authUser) {
    const { claims, token } = await authUser.getIdTokenResult()
    const user = BuildProfile(authUser, claims)

    await store.dispatch('SET_SESSION_COOKIE', token)
    store.commit('SET_USER', user)
  }

  async function _handleSignOut() {
    store.commit('SET_USER', null)
    await store.dispatch('SET_SESSION_COOKIE', null)
  }

  async function _handleAuthError(error) {
    $sentry.captureException(error)
  }
}

In the template of my navbar, I have a button where the sign out event is triggered.

<button @click="signOut" role="menuitem" data-cy="nav-sign-out">
 Sign out
</button>

The signOut method that is being called looks like this:

signOut() {
  this.$fireAuth.signOut()
  this.view.isUserMenuOpen = false
}

Versions

Nuxt.js v.2.14.6
Cypress v.5.4.0
Firebase SDK v.7.21.1
Chrome 86

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.