Next.jsのSSRでの認証情報の渡し方

考えるのはNext.jsでユーザーの認証情報を元に、認可されたデータへのアクセスなどを処理したいケース。

ドキュメントには2種類の方法が案内されている

1. クライアント側でデータフェッチする
2. SSR時にデータフェッチする

今回はSSR時に認証情報をどのように渡すのかが気になったので、調査。
※ <Link href="/hoge/fuga"> でSSRページ遷移する場合にAuthorizationヘッダへTokenをセットする方法がパッと見謎だった

同じページにFirebaseの認証情報をSSRでどの様に受け渡すのか、exampleへのリンクがあった。

Firebaseのリンクを踏むと、next-firebase-auth のexampleへ飛ぶ。

このpackageでは

• Firebaseから認証情報を取得
  • これはFirebaseのAPI
• 認証情報を loginAPI へ送信
  • ここからNext.jsのプロダクトで提供するAPI
  • setAuthCookies() で認証情報をセッションクッキーに保持
• getServerSideProps = withAuthUserTokenSSR({}))(async ({ AuthUser, req }) => {}) でセッションクッキーから認証情報を取得して利用できる
  • const token = await AuthUser.getIdToken() のような書き方でTokenを取得できる

api/hoge (Serverless Functions)に対する認証情報の受け渡しは next-firebase-auth ではまだサポートされてない。
issueはある。
現時点ではAuthorizationヘッダへTokenをセットする必要がある。