QuasarでFirebaseUI使うための備忘録

概要

Quasar で FirebaseUI を使用する際に手間取ったので実装時の Tips。多分おおよそは Vue3 のみでも共通に使用できるモノと思う。

内容

ここでは Firebase ライブラリの初期化処理については述べません。Firebase の初期化処理は別途記載してください。

インストールは以下のコマンド。

npm i firebaseui firebaseui-ja

その後、「quasar.config.js」に CSS を登録。

quasar.config.js

module.exports = configure(function (/* ctx */) {
    ~~~~
    css: [
      'app.scss',
      '../../node_modules/firebaseui-ja/dist/firebaseui.css'
    ],
});

以下は、ログインページ。ポイントはマウントした後に ui.start する所。「onMounted」のタイミングでないと、レンダリング前に ui.start が走ってしまい、id を検知しないためです。

LoginPage.vue

<script setup lang="ts">
import { onMounted } from 'vue';
import {
  getAuth,
  EmailAuthProvider,
  GoogleAuthProvider,
  // 必要な認証を適宜追加
} from 'firebase/auth';

import * as firebaseui from 'firebaseui'

// ここはコンフィグなので、
const uiConfig = {
  signInSuccessUrl: '/',
  signInOptions: [
    GoogleAuthProvider.PROVIDER_ID,
    EmailAuthProvider.PROVIDER_ID
  ]
}
const ui = new firebaseui.auth.AuthUI(getAuth())
onMounted(() => {
  ui.start('#firebaseui-auth-container', uiConfig)
})

</script>

<template>
  <q-page class="row items-center justify-evenly">
    <q-card style="height: 250px; width: 275px;">
      <q-card-section align="center" class="text-h5">
        ログイン
      </q-card-section>
      <q-card-section>
        <div id="firebaseui-auth-container"></div>
      </q-card-section>
    </q-card>
  </q-page>
</template>

おわりに

まだマルチテナントでの良い感じの使用方法は分かってないので、分かったら編集したい。