Nuxt3でFirebaseUIを使ってみる
概要
最近個人開発でFirebaseUIを使ったログイン画面を作成しました。
実装から日本語化するまでの手順をまとめたので、同じ要件で作りたい方は参考になれば幸いです！
対象の読者
・NuxtプロジェクトでFirebaseUIを使いたい人
window is not defined
FirebaseUIをインストールして早速使うぞ！とimportしたら、エラーが発生しました😭
<script setup>
import firebaseui from "firebaseui";
// use FirebaseUI error
firebaseui ...
</script>
ここでポイントになるのは「ライフサイクルフック」です。
Vueはコンポーネントを生成する時にいくつかの決まった流れがあり、
流れの処理をライフサイクルフックといいます。
そしてwindowというのはDOM操作を行うためにサポートするオブジェクトの1つです。
今回私はCompositionAPIを使ってsetup内に記述しているため、
DOM生成・追加が行われる前に処理が走ってしまいエラーになったという感じです。
解決策としてはコンポーネントがマウントされた後に処理をすれば良いので、
OnMountedを使用しました。
// LifeCicle
onMounted(() => {
// RUN ====>
createFirebaseUI();
});
// Values
const nuxtApp = useNuxtApp();
const firebase = nuxtApp.$firebase;
// Methods
/**
* FirebaseUIのコンテナを作成するメソッド
* firebaseuiはDOM操作を必要とするため、mountedの後実行する
*/
async function createFirebaseUI() {
const firebaseui = await import("firebaseui");
const ui = new firebaseui.auth.AuthUI(nuxtApp.$auth);
const uiConfig = {
signInSuccessUrl: "/",
signInOptions: [firebase.auth.GoogleAuthProvider.PROVIDER_ID],
};
ui.start("#firebaseui-auth-container", uiConfig);
}
非同期処理に注意
今回の処理で最も注意すべき点は非同期処理です。
async/await無しでimportしようとすると定義がないぞ！と怒られます。
推測ですがマウントしたタイミングでGET通信が走っているので、
結果を取得する前に処理が進む（非同期）のでエラーが出てるんじゃないかなと思います。
ちなみに
firebaseに関してはpluginsを使ってクライントでのみ実行するようにしています。
FirebaseUIの大きさ
FirebaseUIの弱点？として細かい設定ができないです。
特に大きさはレイアウトで重要な要素なため、思考する必要がありました。
フォームに対してボタンが小さい例
自分はtailwindCSSにあるscaleを使いました。
.scale{
--tw-scale-x: 1.5;
--tw-scale-y: 1.5;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
日本語化
FirebaseUIは初期の状態だと英語で表示されます。
言語を変えるにはいくつかのステップが必要になります。
詳しくはfirebaseuiのgithubに記載されていますが、抜粋していきます。
- まず環境を用意します。必要な環境は下記になります。
・Node.js (6.0.0↑）
・Java SE Runtime Environment 8
- 用意ができたら下記のURIからリポジトリをクローンし、インストールします。
「https://github.com/firebase/firebaseui-web.git」
git clone https://github.com/firebase/firebaseui-web.git
cd firebaseui-web
npm install
次に異なる言語のjsファイルを作成するために、下記のコマンドを入力します。
npm run build build-js-{LANGUAGE_CODE}
LANGUAGE_CODEに入る言語は下記に記載されています。 日本語だとjaになるので下記のコマンドになります。
npm run build build-js-ja
実行後、distフォルダに下記ファイルが生成されていると思います。
生成したファイルをnode_moduleの中にある
「firebaseui/dist」フォルダの同名ファイルにコピーします。
・esm__ja.js
・index.d.ts
その後、起動して日本語化していれば成功です！！
ちなみに日本語になったことを確認したらfirebase-webディレクトリは削除しましょう。
理由は、viteの起動とHMRがもの凄く遅くなるためです。
以上でFirebaseUIの導入記事は終了です！
でわでわ〜。
Discussion