FirebaseUIとは？Web認証UIの使い方とv6/v7の選び方を解説【2026年版】

FirebaseUIは、Firebase Authenticationの上にログイン画面そのものを載せるドロップイン型の認証UIライブラリです。メール／パスワード、Google、電話番号などのサインインフォーム、規約同意、エラー表示、匿名アカウントの昇格までを既製の画面として提供し、自前でフォームを組む手間を省けます。一方で2026年時点のFirebaseUIは、安定版のv6.1.0とモダンSDK対応のv7ベータという2系統に分かれており、どちらを選ぶかで書き方も依存関係も変わります。この記事では実装手順と、この選定判断までを実コード付きで整理します。

まとめ：FirebaseUIの要点と選び方

• FirebaseUIは認証ロジックではなくログイン画面（UI）を提供するレイヤーで、認証本体はFirebase Authenticationが担う。
• 今すぐ本番で使うなら安定版 [email protected]。ただしモダンSDKには非対応で firebase/compat/* 経由が必須。
• モダンSDK（tree-shaking）やReact/Angularネイティブ、テーマ機能が欲しいならv7ベータ（@firebase-oss/ui-react 等）。ただし2026年7月時点でベータのため本番採用は要検討。
• 対応プロバイダはメール／パスワード、Google、Apple、Facebook、GitHub、Microsoft、X（Twitter）、電話番号、匿名、汎用OIDC/SAML。
• 複雑な独自フローや厳密なバンドル最適化が要る場合は、UIを使わずFirebase Authentication SDKを直接呼ぶ判断が正しい。

FirebaseUIの役割とFirebase Authenticationとの関係

FirebaseUIとFirebase Authenticationは別物です。Firebase Authenticationがトークン発行・セッション・プロバイダ連携といった認証そのものを担うバックエンド機能であるのに対し、FirebaseUIはその上にログイン画面という表示層を被せるだけのライブラリです。FirebaseUIを外しても認証は動き、逆にFirebaseUIだけでは認証は成立しません。まずFirebase Authenticationでプロバイダを有効化し、その入口画面をFirebaseUIに任せる、という関係で捉えると設計を誤りません。

対応するログインプロバイダ

FirebaseUI for Webがフォームを用意しているサインイン方法は、メール／パスワード、メールリンク（パスワードレス）、電話番号、Google、Apple、Facebook、GitHub、Microsoft、X（旧Twitter）、匿名ログイン、そしてFirebaseコンソールで構成したOIDC／SAMLプロバイダ（signInOptionsにプロバイダID oidc.*／saml.* を指定）です。使いたいプロバイダはFirebaseコンソールの認証設定で先に有効化しておく必要があり、コンソール側で無効なプロバイダをFirebaseUIのsignInOptionsに並べても画面には出ません。サーバー側でのトークン検証やユーザー管理を伴う場合はFirebase Admin SDKを併用します。

安定版v6とv7ベータの違い：どちらを選ぶか

FirebaseUI for Webは大きな転換期にあります。長く使われてきたv6系（最新は6.1.0、2023年8月公開）は枯れて安定していますが、Firebase JS SDKのモジュラーAPI（v9以降のtree-shaking対応）に対応していません。v6を使うにはSDKを互換レイヤー（firebase/compat/*）経由で読み込む必要があり、バンドルサイズ削減の恩恵は受けられません。これはメール認証など軽い用途では実害が小さい一方、モダンなビルド構成では扱いづらさの原因になります。

この制約を解くために進んでいるのがv7の完全書き直しです。2026年7月時点では v7.0.3-beta がタグ付けされたベータ段階で、npmパッケージも @firebase-oss/ui-react ／ @firebase-oss/ui-angular ／ @firebase-oss/ui-styles という新しい名前空間に移り、React・Angularをネイティブに扱い、モダンSDK（firebase v11／v12）・テーマ機能・多言語を作り直しています。旧v6のソースは v6-archive ブランチへ退避されました。

選定の判断基準

結論はシンプルです。安定性と実績を優先し、既存のcompat構成でよいならv6.1.0。モジュラーSDK前提の新規プロジェクトやReact/Angularでの型・テーマ統合を重視するならv7ベータを評価に載せます。ただしv7はベータでAPIが変わり得るため、決済や本人確認に直結する本番導線でいきなり全面採用するのは避け、まずは検証環境で追随するのが安全です。バージョンとパッケージ名は移行が速いため、着手時に必ず公式リポジトリの最新READMEで確認してください。

FirebaseUI（v6）でログイン画面を実装する手順

ここでは実績のある安定版v6での実装を示します。ポイントは、SDKをcompatビルドで読み込むことです。

インストール（CDNとnpm）

CDNで組み込む場合は、Firebase SDKのcompatビルドとFirebaseUIのスクリプト・CSSを読み込みます。日本語UIにするには言語サフィックス付き（__ja）のスクリプトを使います。

<!-- Firebase SDK（compat ビルド） -->
<script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-auth-compat.js"></script>

<!-- FirebaseUI（日本語UI） -->
<script src="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth__ja.js"></script>
<link rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css" />

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

npm（バンドラー）で使う場合、モジュラーの firebase/auth ではなく firebase/compat/* を読み込む点が最重要です。ここを間違えるとv6は動きません。

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import * as firebaseui from 'firebaseui';
import 'firebaseui/dist/firebaseui.css';

const firebaseConfig = { /* コンソールの構成値 */ };
firebase.initializeApp(firebaseConfig);

AuthUIの初期化とサインインオプション

読み込んだらAuthUIを生成し、表示したいプロバイダをsignInOptionsに並べてstart()で描画します。signInFlowをpopupにするとページ遷移なしでソーシャルログインが完結します。

const ui = new firebaseui.auth.AuthUI(firebase.auth());

ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID,
  ],
  signInFlow: 'popup',
  signInSuccessUrl: '/mypage',
  tosUrl: '/terms',
  privacyPolicyUrl: '/privacy',
  callbacks: {
    signInSuccessWithAuthResult: function (authResult) {
      // false を返すと自動リダイレクトを抑止し、SPA 側で遷移を制御できる
      return false;
    },
  },
});

signInSuccessUrlを指定すると成功時に自動遷移しますが、SPAで自前のルーティングを使うならsignInSuccessWithAuthResultでfalseを返し、遷移を自分のコードに委ねます。規約・プライバシーポリシーのURL（tosUrl／privacyPolicyUrl）はメール登録時に同意リンクとして表示されるため、公開サービスでは実在URLを入れます。

多言語対応とUIのカスタマイズ

多言語対応（i18n）

FirebaseUIはUI文言の多言語化を組み込みで持ち、CDNではfirebase-ui-auth__ja.jsのように言語コード付きスクリプトを読み込むだけで表示言語が切り替わります。日本語・英語をはじめ多数の言語ロケールが同梱されており、電話番号ログインの国番号選択なども各ロケールに追従します。アプリ側で言語を動的に変える場合は、対応する言語版スクリプトを読み分ける構成にします。

見た目のカスタマイズ

v6のカスタマイズはCSSの上書きが中心です。FirebaseUIが付与するクラス（.firebaseui-*）に対して自前のスタイルを当て、ボタン色やフォーム幅、ロゴを調整します。ただしv6はコンポーネント構造を細かく差し替える設計ではないため、ブランドに合わせた大幅な作り替えには限界があります。テーマを構造的に扱いたい要求は、テーマ機能を持つv7ベータで解消される方向です。

FirebaseUIを使うべきでない場面

FirebaseUIは万能ではありません。次のいずれかに当てはまるなら、UIを使わずFirebase Authentication SDKを直接呼ぶ設計のほうが適切です。第一に、多段階のオンボーディングや独自の入力項目を挟む複雑なサインインフローが必要な場合。FirebaseUIの既製フォームはこうした分岐を前提にしていません。第二に、モジュラーSDKでのバンドル最適化が要件で、かつv7ベータを本番に載せられない場合。安定版v6はcompat依存でtree-shakingが効きません。第三に、Auth0など特定の認証基盤へのロックインを避けたい場合で、認証UIまで一体化させると他基盤への移行コストが上がるため、UI層は薄く自前で持つ判断もあります。認証基盤の比較検討をするならSupabaseとFirebaseの違いもあわせて確認してください。

よくあるトラブルと対処

モジュラーSDKと混在させて動かない

v6で最も多い詰まりが、import { getAuth } from 'firebase/auth' のようなモジュラーAPIと併用してしまうケースです。FirebaseUI v6はfirebase/compat/*を前提にしているため、モジュラー側で作ったAuthインスタンスを渡すと型不一致やundefinedで落ちます。v6を使う限りは認証周りをcompatに統一するのが解決策です。モジュラーで統一したいならv7ベータの評価に進みます。

CDN版とnpm版・バージョンの取り違え

CDNのスクリプトURLに古いバージョン番号が残っていたり、npmのfirebaseuiとFirebase SDKのメジャーがずれていると、初期化時に例外が出ます。[email protected]はFirebase SDK v9／v10のcompatと組み合わせる前提です。バージョンを明示的に固定し、SDKとFirebaseUIの対応関係をREADMEで確認してから上げてください。

よくある質問

FirebaseUIは無料で使えますか？

FirebaseUIライブラリ自体はオープンソースで無料です。課金が発生するのは背後のFirebase Authenticationの利用分で、多くのプロバイダは無料枠がありますが、電話番号認証（SMS）など一部は従量課金です。料金の詳細はFirebase Authenticationの解説で確認してください。

FirebaseUIは今もメンテナンスされていますか？

されています。安定版v6.1.0が現役で使える一方、開発の主軸はモダンSDK対応のv7完全書き直し（2026年7月時点でベータ）に移っています。停止ではなく世代交代の途中という位置づけです。

FirebaseUIとFirebase Authenticationはどう違いますか？

Firebase Authenticationが認証機能そのもの（バックエンド）、FirebaseUIはそのログイン画面（UI層）です。FirebaseUIは必須ではなく、画面を自前で作るならなくても認証は動きます。

ReactやAngularでも使えますか？

使えます。v6は素のJS向けで、ReactではuseEffect内でui.start()を呼ぶ形になります。v7ベータではReact（@firebase-oss/ui-react）・Angularのネイティブ対応が用意され、より自然に組み込めます。

多言語インターフェースに対応していますか？

対応しています。CDNでは言語コード付きスクリプト（例：日本語なら__ja）を読み込むだけで表示言語が切り替わり、多数のロケールが同梱されています。

関連記事

• Firebase Authenticationとは？認証方式・導入手順・料金をわかりやすく解説
• Firebase Admin SDKとは？導入・初期化からユーザー管理まで使い方を解説
• SupabaseとFirebaseの違いを徹底比較｜料金・認証・どっちを選ぶか【2026年版】