search
LoginSignup
0

More than 1 year has passed since last update.

posted at

updated at

Organization

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を使って同様のことができるかと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0