初の動作
タイトルどおりなのですが、Identity Platform(Firebase Authentication)を、TypeScript+モジュール化(v9)で使ってみました。あれこれ四苦八苦してやっとFirebaseUIを表示できるようになって、最初に表示された画面のキャプチャがこれです。
Googleさんが笑いを取ろうとしたのかと思ってしまいました。
ちなみに同様のものをJavaScript(v8)で実装したのが以下のキャプチャ。どちらのキャプチャも実寸大です。
v9でサイズがおかしくなったことについて、すぐに想像がついたのはCSSが読み込まれていないみたいということです。いやそもそも読み込みすらしていませんでした。
とりあえずHTMLからv8の要領でCSSだけ別に読み込んでみると、サイズは解決しました。
奇妙な注意書き
「FirebaseUI でウェブアプリに簡単にログイン機能を追加する」には以下の注意書きがあります。
注: FirebaseUI は v9 モジュラー SDK と互換性がありません。v9 互換レイヤー（特に app-compat および auth-compat パッケージ）では、v9 とともに FirebaseUI を使用できますが、その場合、アプリのサイズ削減などの v9 SDK のメリットを得ることはできません。
使ったのはcompatパッケージではないのですが、「アプリのサイズ削減など」の「など」って何を指しているんでしょう。気になります。
日本語化
v8では言語のローカライズ版を読み込むことも可能で、上記のv8のキャプチャは日本語版を読み込んでいます。v9でも以下のようにすればローカライズ版の使用が可能なようですが、コンパイル後のJavaScript実行で以下のエラーが発生しました。
パッケージのインストール : npm install firebaseui-ja
TypeScriptソース : import 'firebaseui-ja';
ブラウザのエラー : Uncaught TypeError: Cannot read properties of undefined (reading 'navigator')
stack overflowの「Navigator undefined on React Typescript Firebase project」にも同様の現象が報告されていますが、この記事はローカライズ版ではないようですね。
どなたか回避方法をご存じの方おられましたら、コメントいただけると幸いです。