Firebase AuthenticationのIDトークンをHTTPクライアントのリクエストヘッダーに渡す

レッドインパルスのたかけんです。
REDIMPULZ Advent Calendar 2020 の11日目のエントリーです。

自前のバックエンドの認証にFirebase Authenticationを使う

バックエンドの開発で、認証にFirebase Authenticationを使用して、認証をする場合があります。
その際にFirebase Authenticationで取得したIDトークンをAPIリクエスト毎にリクエストヘッダーに含める方法です。

HTTPクライアントには、ky を使用しています。

lib/firebase

import firebase from 'firebase/app';
import 'firebase/auth';

firebase.apps.length
  ? firebase.app()
  : firebase.initializeApp({
      // 認証情報
    });

export const auth = firebase.auth();

http

import ky from 'ky';
import firebase from 'firebase';

import { auth } from '@/lib/firebase';

const getUser = () =>
  new Promise<firebase.User>((resolve, reject) =>
    auth.onAuthStateChanged((user) => (user ? resolve(user) : reject()))
  );

const http = ky.create({
  prefixUrl: // APIのエンドポイントのプレフィックス,
  hooks: {
    beforeRequest: [
      async (request) => {
        try {
          const user = await getUser();
          const token = await user.getIdToken();
          request.headers.set('Authorization', `Bearer ${token}`);
        } catch (error) {
          console.log(error);
        }
      },
    ],
  },
});

export default http;

要点

• onAuthStateChangedのコールバックでuserが取得できるので、Promiseでラップして同期的にuserを取得できるようにする
• beforeRequestはAPIリクエスト毎に呼ばれるのasync/awaitでgetUserを実行し、userを取得
• userのgetIdTokenでIDトークンを取得
• リクエストヘッダーのAuthorizationにIDトークンをセットする

まとめ

Firebase AuthenticationのIDトークンをAPIクライアントのリクエストヘッダーに渡す方法でした。
ky では無く axios を使っている人も多いと思いますが、その場合は、interceptorsを使って同様のことができるかと思います。