[Nuxt.js + Firebase] ログアウト中にログイン必須ページにアクセスした時に一瞬表示される

はじめに

Firebase Authenticationsのログインチェック処理を入れたけど、ログアウト中にアクセスすると一瞬だけログイン必須ページが表示されてしまった。

middleware/authenticated.js

export default (context) => {
  return context.app.$firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      return user;
    }
    return context.redirect('/signin');
  });
};

test.vue

<template>
  <div>
    ログイン必須ページ
  </div>
</template>

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

await 使って色々試してもダメ。。
onAuthStateChangedには効かないっぽい?

単純にPromiseで囲んだらうまく動いた

middleware/authenticated.js

const checkSigninStatus = (context) => {
  return new Promise((resolve) => {
    context.app.$firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        return resolve(user);
      }
      return context.redirect('/signin');
    });
  });
};

export default (context) => {
  return checkSigninStatus(context);
};

よかったよかった。