Firebaseエミュレーターを使ってFirebase Authenticationでの認証をローカル環境で実装してみた

2023年4月10日 17:19

はじめに

こんにちは、SHIFTの開発部門に所属している Katayama です。

前回の記事「Firebaseプロジェクトを新規作成してCloud FunctionsとCloud Firestoreのローカル開発環境を整備してみた」では Cloud Functions をローカル環境で実行し動作確認を行う、という事をやってみた。
今回は同じエミュレーターを利用して、Firebase Authentication での認証をローカル環境で行い開発をやってみようと思う。

※Firebaseのエミュレーターについては、Firebase Local Emulator Suiteを参照。
※Firebase Authenticationはアプリケーションに必須といってもいい認証機能を実装するためのサービスで、詳細については公式ドキュメントを参照。

Firebase に Web アプリを追加する

まずは、Firebase のプロジェクトに Web アプリを追加する。Firebase のダッシュボード上で、「アプリを追加」から、「ウェブ」を選択する。

「ウェブアプリに Firebase を追加」の Step①、Step② を設定する。

今回は Vite ＋ Vue3 ＋ Vuetify3 のアプリに Firebase を追加するので、npm で firebase を依存に追加する方法を取る。
画面に表示されている firebaseConfig の内容を自身のアプリの方に記載し、initializeApp()で初期化すれば準備は完了になる（本来的には firebase の設定などは別のファイルに切り出すべきだが、今回は検証なのでコンポーネントに全て記載している）。

<script setup>
import { onMounted } from "vue";
import { RouterLink } from "vue-router";

import firebase from "firebase/compat/app";
import * as firebaseui from "firebaseui";
import "firebaseui/dist/firebaseui.css";

import { initializeApp } from "firebase/app";
import {
  getAuth,
  connectAuthEmulator,
  onAuthStateChanged,
  signOut,
} from "firebase/auth";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
  measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
connectAuthEmulator(auth, "http://localhost:9099");

const unsubscribe = onAuthStateChanged(auth, (user) => {
  if (user) console.log("login", user);
  else console.log("not login");
});

const logout = async () => {
  try {
    await signOut(auth);
    console.log("Sign-out successful.");
  } catch (e) {
    console.log(e);
  }
};

onMounted(() => {
  const ui =
    firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(auth);

  ui.start("#firebaseui-auth-container", {
    signInOptions: [
      {
        provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        scopes: ["email"],
        customParameters: { prompt: "select_account" },
      },
    ],
    callbacks: {
      // eslint-disable-next-line no-unused-vars
      async signInSuccessWithAuthResult(authResult, redirectUrl) {
        console.log(authResult);
        return false;
      },
    },
  });
});
onUnmounted(() => {
  unsubscribe();
});
</script>

<template>
  <v-app>
    <v-app-bar density="compact">
      ...
      <v-btn @click="logout">logout</v-btn>
      ...
    </v-app-bar>
    <v-main>
      ...
      <div id="firebaseui-auth-container"></div>
      ...
    </v-main>
  </v-app>
</template>
...

※このアプリを追加しないと、ステップ 2: SDK をインストールして Firebase を初期化するに書かれている firebase の initializeApp()が実行できず、以下のようなエラーになってしまう（以下は const auth = getAuth();のように app を渡さなかった時に出たエラー）。

ローカル環境の Firebase Authentication で認証する

上記でアプリ側の準備は OK なので、後は firebase emulators:start コマンドでエミュレータを起動し、Authentication で認証できるか？を試してみようと思う（以下の画像には Cloud Functions などもエミュレータで起動しているが、そちらについてはFirebaseプロジェクトを新規作成してCloud FunctionsとCloud Firestoreのローカル開発環境を整備してみたで取り上げている）。

Web アプリを起動して firebaseUI で Google でログインを行ってみると、以下のように認証ができ、Authentication にユーザが追加されている事が確認できる。

※本番環境の場合には、以下の2点の設定が必要になる。

Sign-in methodの設定
これはどの認証方法を利用できるようにするか？の設定で、Firebaseのダッシュボードの以下から設定できる

Settings ＞承認済みドメインの設定ローカル環境から本番環境のFirebase Authenticationにつないで開発をしたい場合には、以下の承認済みドメインを設定する必要がある。
localhostはデフォルトで設定済みだが、上記の動画のようにIPでWebアプリを開いている場合にはそのIPの設定も必要。

まとめとして

今回は Firebase のエミュレーターを利用して Firebase Authentication での認証をローカル環境で行えるようにし、開発をしてみた。
Authentication エミュレータと本番環境の違いに書かれているような違いはあるが、開発をする上で問題になるケースはそこまでないのではと思われる。
本番環境に開発時の検証用アカウントが作成されてしまうと、お掃除が大変だったりするがローカルのエミュレーターであればそういったゴミデータが作成されないので良いのではないかと思う。

おまけとして、よくある認証後にアプリのアカウント情報がなければ登録し、Firestore にアカウント情報を生成する、という処理をやってみた。
また、ローカル環境から本番の Firebase に接続する場合と、エミュレータに接続する場合をうまく分ける方法についても検討してみた。

おまけ

「認証後にアカウントがなければ Firestore にアカウント情報を登録する」をローカル環境でエミュレータを利用して検証する

実装としては以下。

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import md5 from 'crypto-js/md5';

import firebase from 'firebase/compat/app';
import * as firebaseui from 'firebaseui';
import 'firebaseui/dist/firebaseui.css';
import { doc, setDoc } from 'firebase/firestore';

import { auth, db } from '@/firebase';
import { converter } from '@/firebase/store';
import useUserStore from '@/stores/user';
import HelloWorld from '@/components/HelloWorld.vue';

const router = useRouter();

const userStore = useUserStore();
const { user } = storeToRefs(userStore);

const isLogined = computed(() => !!user.value.uid);

onMounted(() => {
	const ui =
		firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(auth);

	if (!user.value.uid) {
		ui.start('#firebaseui-auth-container', {
			...
		});
	}
});

const step = ref(1);
const form = ref(null);
const firstName = ref('');
const lastName = ref('');
const userRegister = async () => {
	const { valid } = await form.value.validate();

	if (valid) {
		await setDoc(doc(db, 'users', user.value.uid).withConverter(converter), {
			id: user.value.uid,
			email: user.value.email,
			firstName: firstName.value,
			lastName: lastName.value,
			logoUri: `https://www.gravatar.com/avatar/${md5(user.value.email)}`
		});

		step.value = 2;
		setTimeout(() => {
			router.push({ name: 'home', params: {} });
		}, 2500);
	}
};
const currentTitle = computed(() => {
	switch (step.value) {
		case 1:
			return '新規登録';
		default:
			return 'アカウント作成中';
	}
});
</script>

<template>
	<v-container>
		...
		<v-row v-if="!isLogined" class="pt-2">
			<v-col>
				<div id="firebaseui-auth-container"></div>
			</v-col>
		</v-row>

		<v-row v-else class="justify-center pt-2">
			<v-col cols="12" md="6">
				<v-card elevation="1">
					<v-card-title>
						{{ currentTitle }}
					</v-card-title>

					<v-window v-model="step">
						<v-window-item :value="1">
							<v-form ref="form">
								<v-container>
									<v-row>
										...
									</v-row>
								</v-container>
							</v-form>
							<v-card-actions>
								<v-spacer></v-spacer>

								<v-btn color="success" @click="userRegister">
									登録を完了する
									<v-icon icon="mdi-chevron-right" end></v-icon>
								</v-btn>
							</v-card-actions>
						</v-window-item>

						<v-window-item :value="2">
							<v-card-text class="text-center">
								<v-progress-circular color="primary" indeterminate />
							</v-card-text>
						</v-window-item>
					</v-window>
				</v-card>
			</v-col>
		</v-row>
	</v-container>
</template>

import { initializeApp } from 'firebase/app';
import { getAuth, connectAuthEmulator } from 'firebase/auth';
import { getFirestore, connectFirestoreEmulator } from 'firebase/firestore';

const firebaseConfig = {
	...
};

const app = initializeApp(firebaseConfig);

const auth = getAuth(app);
connectAuthEmulator(auth, 'http://localhost:9099');

const db = getFirestore(app);
connectFirestoreEmulator(db, 'localhost', 8081);

export { auth, db };

上記の実装で、ローカル環境の Firebase エミュレーターでの動作確認をしてみると、以下の動画の通り意図通り users ドキュメントが作成できている事が確認でき、ローカル環境での検証が問題ない事が分かる。

とは言えローカルから本番の Firebase に接続して検証したい

上記では Firebase エミュレーターに接続していたが本番の Firebase に接続して開発をしたい、という場面をあるかもしれない。そのような場合には、Vite のモードを使ってコードに分岐を入れるのがいいだろう。
具体的には以下のようなコードにすれば、"--mode localdev"の時だけ、エミュレーターに接続し、それ以外の場合には本番の Firebase に接続するようにできる（"localdev"にしているのは、"local"などはViteの予約語でエラーになるため）。

...

const app = initializeApp(firebaseConfig);

const auth = getAuth(app);
if (import.meta.env.MODE === 'localdev')
	connectAuthEmulator(auth, 'http://localhost:9099');

const db = getFirestore(app);
if (import.meta.env.MODE === 'localdev')
	connectFirestoreEmulator(db, 'localhost', 8081);

export { auth, db };

《この公式ブロガーの記事一覧》

執筆者プロフィール：Katayama Yuta
認証認可（SHIFTアカウント）や課金決済のプラットフォーム開発に従事。リードエンジニア。
経歴としては、SaaS ERPパッケージベンダーにて開発を2年経験。
SHIFTでは、GUIテストの自動化やUnitテストの実装などテスト関係の案件に従事したり、DevOpsの一環でCICD導入支援をする案件にも従事。その後現在のプラットフォーム開発に参画。

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/

最後まで読んでくださり、ありがとうございます！

御社サービスのご相談はお気軽に。

ソフトウェア品質のプロがお伺いします。