Nuxt.jsでmiddlewareを使用したらエラーがでる

Question

Next.jsとfirebaseを勉強しております。

ログイン画面でTwitter認証を行ったら会員ページへ移動し、その際Twitterの表示名（displayName）などを渡したいと思っています。

会員ページに移る際middlewareを呼び出してユーザー情報を取得しようとしているのですが、commons.app.js:13284 Uncaught RangeError: Maximum call stack size exceededやError: [vuex] do not mutate vuex store state outside mutation handlers.などのエラーが発生します。

何が原因なのでしょうか？

////// ログイン画面（/） ///////

<template>
  <v-btn @click="twitterLogin">ログイン</v-btn>
</template>

<script>
import { firebase } from '@/plugins/firebase'
import 'firebase/auth'
import { mapGetters } from 'vuex'

export default {
  mounted() {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.$router.push('/user/' + user.uid )
      }
    })
  },
  methods: {
    twitterLogin() {
      const provider = new firebase.auth.TwitterAuthProvider()
      firebase.auth().signInWithPopup(provider)
    }
  },
  computed(){
    ...mapGetters({'user'})
  }
}
</script>

////// 会員ページ（/user/USER_ID） ///////

<template>
  <h1>会員ページ</h1>
  <p>{{ user.displayName }}</p>
</template>

<script>
export default {
  middleware: 'authenticated'
}
</script>

///// authenticated.js //////

import { firebase } from '@/plugins/firebase'
import 'firebase/auth'

export default function ({ route, store, redirect }) {
  const user = firebase.auth().currentUser
  //ログインしていたらStoreにユーザー情報を格納
  if (user) {
    store.commit('setUser', user)
  //ログインせずに会員ページにきたらトップへ戻る
  } else {
    redirect('/')
  }
}