Firebase Hosting× Cloud RunでCookieが使用できない時の解決方法

どーも、ぐるたか@guru_takaです。

SSRなNuxt製アプリをFirebase Hosting×Cloud Runでデプロイしたら、Cookie Storageでストア情報を永続化できなくなりました。

Cookie Storageやブラウザ側のネットワークのCookie情報も問題ないのに、ログを確認するとなぜかCloud Run側でCookieが削除されるという…。

かなり詰まりましたが、解決できたのでメモしておきます。

SSRなNuxt .js×FIrebaseのユーザー認証（ログイン周り）の個人的ベストプラクティス

MEMO

使用しているパッケージは、vuex-persistedstateです！
参考 Nuxt.js で SSR 時にも永続化された store の値を使う - Qiita

スポンサードリンク

結論

解決方法はシンプルで、cookie storageのkey名を__sessionにするだけです。

衝撃的なんですが、__sessionでないと、リクエストにあるヘッダー内のクッキー情報が勝手に削除される仕様とのこと…

以下のコードに変更したら、無事に解決できました！
（この仕様、なくなってほしい…）

@/plugins/cookie-storage.js

import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
import cookie from 'cookie'

export default ({ store, req, isDev }) => {
  createPersistedState({
    key: '__session',
    storage: {
      getItem: key =>
        process.client
          ? Cookies.getJSON(key)
          : cookie.parse(req.headers.cookie || '')[key],
      setItem: (key, value) =>
        Cookies.set(key, value, { expires: 365, secure: !isDev }), // 365日間 cookie storage を保持する
      removeItem: key => Cookies.remove(key)
    }
  })(store)
}