title: Firebase + Vue: Disconnected at refresh despite setting persistence
body: <p>I am using Vue and firebase to build an authentication mechanism. Every time I refresh the page, the authentication is dropped, and I am redirected to the login page.</p>
  <p>I tried <code>setPersistence(firebase.auth.Auth.Persistence.SESSION)</code> as per the <a href="https://firebase.google.com/docs/auth/web/auth-state-persistence" rel="nofollow noreferrer">documentation</a>. I also implemented a few of the tips of this <a href="https://www.reddit.com/r/vuejs/comments/8q7xpz/firebase_auth_logs_in_but_redirects_to_login_at/" rel="nofollow noreferrer">reddit thread</a>. I am still being redirected, and I noticed that on refresh, the <code>auth.onAuthStateChanged((user) =&gt; {})</code> callback has <code>user = null</code>.</p>
  <p>I am a bit stuck. Apologies if this is a newbie question.</p>
  <p><strong>firebase.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import * as firebase from 'firebase/app'
  import 'firebase/auth'
  import 'firebase/firestore'
  
  const firebaseConfig = {
    apiKey: process.env.VUE_APP_API_KEY,
    ...
  };
  
  firebase.initializeApp(firebaseConfig)
  
  // utils
  const db = firebase.firestore()
  const auth = firebase.auth()
  auth.setPersistence(firebase.auth.Auth.Persistence.SESSION)
  
  
  // export utils/refs
  export {
    db,
    auth
  }
  </code></pre>
  <p><strong>main.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import Vue from 'vue'
  import App from './App.vue'
  import vuetify from './plugins/vuetify';
  import router from './router/index'
  import { store } from './store'
  import { auth } from './firebase'
  
  Vue.config.productionTip = false
  
  let app
  
  auth.onAuthStateChanged((user) =&gt; {
    if (!app) {
      app = new Vue({
        router,
        store,
        vuetify,
        render: h =&gt; h(App)
      }).$mount('#app')
    }
    if (user) {
      store.dispatch('fetchUserProfile', user)
      store.commit('setEmail', user.email)
    }
    })
  </code></pre>
  <p><strong>router/index.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import Vue from 'vue';
  import Router from 'vue-router';
  import Login from '../components/Login'
  import Dashboard from '../components/Dashboard'
  import { auth } from '../firebase'
  
  Vue.use(Router)
  
  const router = new Router({
      mode: 'history',
      base: process.env.BASE_URL,
      routes: [
        {
            path: '/login',
            name: 'login',
            component: Login,
            meta: {
              disableNavBar: true
            }
        },
        // ... other routes removed for brevity
        {
            path: '/dashboard',
            name: 'Dashboard',
            component: Dashboard,
            meta: {
              requiresAuth: true
          }
        },
      ]
  });
  
  router.beforeEach((to, from, next) =&gt; {
    const requiresAuth = to.matched.some(record =&gt; record.meta.requiresAuth)
    if(to[&quot;path&quot;] !== from[&quot;path&quot;]){
      if(requiresAuth){
        auth.onAuthStateChanged(function(user) {
          if (user) {
            console.log(&quot;Logged in&quot;, user) 
            next();
          } else {
            console.log(&quot;Here&quot;, user) //this logs user = null on refresh 
            next('/login')
          }
        });
      } else {
        next();
      }
    }
  })
  
  export default router
  </code></pre>