Nuxt.jsで2つのFirebaseプロジェクトを利用する

概要

とある案件で 2 つの Firebase プロジェクトと通信を行う必要が出てきたので、その方法をまとめておく。それぞれの Firebase プロジェクトの用途は下記の通り。

• FirebaseA: Realtime Database のデータを利用
• FirebaseB: Firebase Auth の認証情報を利用

参考: 複数のプロジェクトを構成する | Firebase

実装方法

plugins ディレクトリに firebase.js を作成、実装内容は下記の通り。

firebase.js

import firebase from 'firebase'

// 1つめのFIRプロジェクトの接続設定
const originalFirebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

let originFirebase = null;
if (!firebase.apps.length) {
  originalFirebase = firebase.initializeApp(originalFirebaseConfig);
}

// 2つめのFIRプロジェクトの接続設定
const secondaryFirebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

let secondaryFirebase = null;
if (firebase.apps.length === 1) {
  // firebase.initializeApp()の第二引数でapp名を指定することで複数のFIRプロジェクトへアクセスすることが可能
  // 第二引数の指定がない場合は "DEFAULT" になる
  secondaryFirebase = firebase.initializeApp(secondaryFirebaseConfig, "secondary");
}

export {originalFirebase as original, secondaryFirebase as secondary}

また、firebase を利用する vue コンポーネントでは下記のように利用する。

import * as firebase from '@/plugins/firebase'

export default {
  methods: {
    async signIn() {
      // 1つめのFIRプロジェクトの認証を使う場合
      const originalAuth = firebase.original.auth();

      // 2つめのFIRプロジェクトの認証を使う場合
      const secondaryAuth =firebase.secondary.auth();
    }
  }
}

まとめ

今回は特殊ケースなので正攻法では出来ないかと思ったが、公式ドキュメントにも記載があり Firebase SDK の柔軟さを知ることが出来た。Firebase SDK自体はよく使うが、他にも知らない仕組みがあるように感じたので、これからも学びがあれば記事にできればと思う。