React+FirebaseUiでGoogleアカウントサインイン実装

FirebaseUIとは

サインイン用ボタンの生成、サインイン画面の表示などを行ってくれます。

ログイン後のcallbackなども設定可能です。

設定可能な項目はGithub側にReadmeがあります。

webで使用する場合はfirebaseui-webを参考にする方が良いかもしれません。

Googleのサインインボタンに関しては以下のページも参照可能です。

HTML要素で生成可能でこちらを利用する場合FirebaseUIは必要ありません。

install

npmを使用する場合は以下のコマンドを実行します。(今回はfirebaseは既に設定済みのプロジェクトを使用しています。)

npm install firebaseui

Firebase Authentication の有効化

Firebase Consoleでプロジェクトの構築 > Authenticationを開き、ログイン方法のタブでGoogleをプロバイダとして追加する必要があります。

フロント実装

Reactでのサンプルで作成したのはこんなの

import { GoogleAuthProvider, User, UserCredential, getAuth } from 'firebase/auth';
import * as firebaseui from 'firebaseui';
import 'firebaseui/dist/firebaseui.css';

const Signin = () => {
    const initFirebaseUi = () => {
        const uiConfig = {
            signInFlow: 'popup',  // Webアプリではpopupが推奨とのこと、現在callbacksもこちらでないと反応しない
            signInOptions: [ // 利用可能とするプロバイダー
                GoogleAuthProvider.PROVIDER_ID.
            ],
            callbacks: {
		            // 成功時の処理
                signInSuccessWithAuthResult: (authResult:UserCredential, redirectUrl: string) => {
                    // success()
                    // リダイレクトを行わない = false
                    return false;
                },
                //失敗時の処理
                signInFailure: (e: any) => {
                    // error();
                }
            }
        }
        // 既にinstanceがあればそちらを使用する
        const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(getAuth());

				// id='firebase-ui'　に表示
        ui.start('#firebase-ui', uiConfig);
    }

    useEffect(() => {
        initFirebaseUi();
    }, []);
    
	return (
		<div id='SigninView'>
			<div id='firebase-ui' />
		</div>
	)
}

• signInFlowはモバイルアプリとWebアプリで推奨が異なるみたいなので、Webアプリの今回はpopupに。それとcallbacksの処理もpopupでしか呼び出されなかった
• 今回認証プロバイダーはGoogleのみ。追加したい場合はここに追記。Firebase側の設定含めいまだにTwitterなのが気になる
• サインイン成功時に処理を行いたかったため戻り値をfalseにして自動の画面遷移を無しに。signInSuccessWithAuthResultを設定しない場合とtrueを返す場合は、uiConfig内でリダイレクト先を設定しないとエラーになる

あとがき

特定のメールドメインのみ許容するようにしたりとかはFirebaseUIを使わずにGoogleAuthProviderを作成しsetCustomPropertiesで設定することになりそう。

フロントエンド以外での制御だとCustom ClaimやFirestore Security Rulesを使うことになると思う。

Claimに関しては利用したことが無いので今後調べる。