Firebase Authenticationで発行したtokenを更新する

はじめに

Firebase Authentication を使えば、様々なプロバイダでの認証が簡単に行えます。そしてそれをサーバーサイドで扱うには、Firebase Admin SDK を使うわけですが、そこで使用する token の有効時間は 1 時間と決められており、リフレッシュトークンなるものを用いて更新する必要があります。セキュリティ上の理由ですが、一般的なサービスにおいて 1 時間ごとにログインを求められるのはシンドイですよね。以下でその方法を書き留めます。

以下では、サーバーサイドで token を更新する方法を解説します。フロント側のみの実装でで Firebase JavaScript SDK を用いて token をリフレッシュする方法（onAuthStateChanged を使って curretnUser を監視し、getIdToken(true)で token をリフレッシュする）の詳細は、ここでは解説しません。

refreshToken を取得する

まずは以下のようにフロントで Firebase JavaScript SDK を用いてサインインをします。サインインが成功すると、その返り値に refreshToken が含まれているので取得します。

sign-in.ts

import { signIn as signInByNextAuth } from 'next-auth/react'

const auth = getAuth()
signInWithEmailAndPassword(auth, email, password)
  .then(async ({ user }) => {
    if (user) {
      const refreshToken = user.refreshToken
      const idToken = await user.getIdToken()

      await signInByNextAuth('credentials', {
        idToken,
        refreshToken,
        callbackUrl: '/',
      })
    }
  })
  .catch((error) => {
    // エラー処理
  })

上の例では、NextAuth の signIn メソッドに refreshToken を渡しています。

token をリフレッシュする

この refreshToken を用いて token をリフレッシュします。以下のメソッドに refreshToken を渡せば、新たにリフレッシュされた token を取得することができます。

const fetchNewIdToken = async (refreshToken: string) => {
  const res = await fetch(
    `https://securetoken.googleapis.com/v1/token?key=${process.env.FIREBASE_TOKEN_API_KEY}`,
    {
      method: 'POST',
      body: JSON.stringify({
        grant_type: 'refresh_token',
        refreshToken,
      }),
    },
  )

  const { id_token } = await res.json()

  return id_token
}

ここで、環境変数の FIREBASE_TOKEN_API_KEY に設定すべき値は、以下の手順で取得できます。

1. GCP の「API とサービス」の「認証情報」にアクセス。

Firebase でプロジェクトを立ち上げた場合は、上画像のように自動でキーが作成されていますが、もしそうでない場合。「認証情報を作成」→「API キー」で作成できます。

2. 「鍵を表示します」を押して、鍵をコピーする。

3. アプリケーションに戻って FIREBASE_TOKEN_API_KEY 変数にセットする。

参考文献

https://firebase.google.com/docs/reference/rest/auth?hl=ja#section-refresh-token