Identity PlatformをTypeScript+モジュール化で使ってみたら...

初の動作

タイトルどおりなのですが、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」にも同様の現象が報告されていますが、この記事はローカライズ版ではないようですね。

どなたか回避方法をご存じの方おられましたら、コメントいただけると幸いです。