Firebase Auth + Next.jsでのユーザー認証

基本的にNext.jsの意向に沿う形にしたいと思っているので認証情報の必要なAPIは全てブラウザから(SWRなど)。それ以外はSSGという構成でいきたい。

ここで問題はFirebase SDKがめちゃくちゃでかいことと、Firebase SDKが初期化されるまでtokenを取れないためログイン済みなのかどうかも分からないと言う点である。

やりたい事は

• 初回レンダリングからログイン済みかどうかを取得しておきたい
• tokenの管理はFirebase SDKに任せたい(refreshしないといけないため)
• ユーザー情報を扱うレンダリング以外はSSR or SSGして、ユーザー情報を扱うページはCSRしたい
• FirebaseのUserに全ての情報があるわけではなく、tokenをAuthorizationヘッダーに引っ付けて外部のAPIから取得する形になっているとする

Nextのビルド時点ではログイン済みかどうかは分からないので必然的にCSR or SSRになるが、Firebaseの情報をNode.jsで触りたくないのでCSRになる。この時どうにかユーザーに表示される直前にログイン状態を知りたいのでFirebaseはこういう時のためにService Workerによるセッション管理というのを設けてくれている。

https://firebase.google.com/docs/auth/web/service-worker-sessions?hl=ja

そもそもServiceWorkerは

• リクエストのプロキシ
• オフラインでも動作してくれる
• プッシュ通知(iosはよ)
• etc...

などが行えるWeb Workerですが、このリクエストのプロキシという性質を使って上記の要件を満たすようにする。元々Firebaseのユーザー情報というのはIndexedDBに保存されているのと、IndexedDBにはWebWorkerからアクセスが可能という2つの理由によりこのService Workerでのセッション管理が行えるようになっている。

https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API

https://github.com/firebase/firebase-js-sdk/blob/master/packages/auth/src/storage/indexeddb.js

Next.jsでやると、_appのgetInitialPropsのContextを使って

context.req.headers

から取得する感じになる。

もうこの時点でSSGもくそもない(_appがSSRになるため全ページSSRになる)