● firebase-uiを使用する(vueの例)

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

  ui.start("#firebaseui-auth-container", {
      //   ログイン完了後に画面遷移するURL
    signInSuccessUrl:　"/mypage" ,
    callbacks: {
      uiShown: () => {
      //   表示時に何か実行したい場合ここに記述
         );
       },
    },
    signInOptions: [
      {
        provider: EmailAuthProvider.PROVIDER_ID,
        disableSignUp: {
          status: true,
        },
      },
    ],
  });
});

<template>
            <div id="firebaseui-auth-container"></div>
</template>

● firebase-ui の 日本語化

・1. 以下のコマンドで日本語版をビルドすることができます

git clone https://github.com/firebase/firebaseui-web.git
cd firebaseui-web
npm install

node node_modules/gulp/bin/gulp.js build-esm-ja

参考 : https://github.com/firebase/firebaseui-web#developer-setup

・2. ビルドして生成されたファイルを以下の通りリネームします

dist/esm__ja.js → firebaseui_ja.js
dist/index.d.ts → firebaseui_ja.d.ts

あとは普通に importすれば、 メッセージが日本語化されたfirebase-uiが使用できます

tsconfig.json の allowJs は 設定しなくてもok

"compilerOptions": {
    // 設定しなくてもokです
    "allowJs": true,
    ...
}

● firebase-ui の 日本語メッセージ一覧

https://github.com/firebase/firebaseui-web/blob/master/translations/ja.xtb