title: How to persist firebase-auth over refresh with Nuxt?
body: <p>I'm trying to set up Firebase authentication and currently, a user can sign up and I store their information within Vuex store. </p>
  
  <p>If I refresh I lose everything and I do not know how to have it persist over the refresh. Could I use local storage, cookies, plugins? what would be the best way I have looked at a lot of answers and am still unclear.</p>
  
  <p>I have tried using middleware but with no luck. I have also dabbled with using <code>authStateChanged()</code> but don't know where to implement it.</p>
  
  <pre><code>signup() {
    // checking if username exists within our database
    // creates a user through email and password
    if(this.username &amp;&amp; this.email &amp;&amp; this.password) {
        this.slug = slugify(this.username, {
            replacement:'-',
            remove: /[$*_+~.()'"\-:@]/g,
            lower: true
        })
        // is creating a variable that stores slug then checks whether it exists, if it does we send feedback
        let ref = db.collection('users').doc(this.slug)
        ref.get().then( (doc) =&gt; {
            if(doc.exists) {
                this.feedback ="This Username already exists"
            } else {
               firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
                .then((cred) =&gt; {
                    console.log("below is CREDANTIALS")
                    console.log(cred.user)
                    ref.set({
                        username: this.username,
                        user_id: cred.user.uid
                    })
                    this.$store.commit('setUser', cred.user.uid)
                    this.$store.commit('setUsername', this.username)
                    // localStorage.setItem('user_id', cred.user.uid)
                })
                .then(() =&gt; {
                    this.$router.push({name: 'explore'})
                })
                .catch(err =&gt; {
                    console.log(err)
                    // err is caught by catch and has a property called message
                    this.feedback = err.message
                })
                }
  
            })
        }
    }
  </code></pre>