🧩

ReactにFireabse Authenticationのログインボタンを導入する

2022/10/22に公開

Firebase

React

tech

認証サービスのFirebase Authenticationは公式がFirebase UIというログインボタンの実装が用意されています。今回はこちらをReactのプロジェクトに導入していきたいと思います。

Firebase UIはFirebaseから提供されているライブラリなので、ブランドガイドラインなどを利用者が考慮せずに済む点が非常に便利です。

Firebase UIによるGoogleアカウントへのログインボタン

Reactパッケージの追加

Firebaseの公式からパッケージが配布されているので追加します。

npm install react-firebaseui
# yarn add react-firebaseui

コードを追加

実際のコードをReactに追加していきましょう。

実装の流れは以下のとおりです。

FirebaseUIのコンポーネントを読み込む
Firebaseの設定を行う（本記事では説明しません）
Firebase UIの設定を行う

Firebase UIには2種類のコンポーネントが用意されています。役割自体は同じですがCSSの読み込み方が異なります。

StyledFirebaseAuth : コンポーネントにCSSファイルが付属しています。シンプルで設定が簡単です。
FirebaseAuth: コンポーネントはCSSへの参照のみを持っているので、開発者がCSSを読み込む必要があります。パフォーマンスの向上やビルドサイズの削減が期待できます。

Firebase UIのコンポーネントを読み込む

// StyledFirebaseAuthの読み込み
import { StyledFirebaseAuth } from 'react-firebaseui';

Firebase UIの設定を行う

事前にFirebaseの設定を行っておいてください。

はじめに使用する認証サービスプロバイダーを読み込みます。

// 今回はGoogleアカウントを使用します
import { GoogleAuthProvider } from 'firebase/auth';

次にコンポーネント内でUIの設定を記述します。

// 今回はTypescriptを使用しています
const loginUiConfig: firebaseui.auth.Config = {
    signInFlow: 'redirect', // サインイン時にリダイレクトするかポップアップを利用するか
    signInSuccessUrl: redirectUri, // サインイン後に帰ってくるURL
    signInOptions: [GoogleAuthProvider.PROVIDER_ID], // 利用する認証プロバイダー
};

設定の一覧は公式のドキュメントを参照してください。

実際にコンポーネントをページに追加します。

// return <StyledFirebaseAuth uiConfig={loginUiConfig} firebaseAuth={auth()} />;
return <FirebaseAuth uiConfig={loginUiConfig} firebaseAuth={auth()} />;

本来であればStyledFirebaseAuthではなくFirebaseAuthを利用した場合にはCSSの読み込みが必要なはずなのですが、なぜかCSSを読み込まずともスタイルが適用されており謎です。

とても簡単にログインボタンを実装することができました。
以上で説明を終わります。