初心者でも簡単！FirebaseでGoogleのアカウントで認証する方法

UI が用意されているので簡単！

では、早速実装の方法を紹介します。Firebase では予め作成されたログインのための UI がすでに用意されているので、これを使うと実装もシンプルです。

予め用意された UI を利用するには「frebaseui」のパッケージをインストールします。

$ npm install firebaseui

CDN(Contents Delivery Network)で、HTML のページからリンクを読み込んで利用することもできますが、ユーザー認証が必要になるアプリの殆どは少し規模が大きなものが多いのでここでは、React を使う前提で解説します。したがって、上記の様に npm を使ってモジュール（パッケージ）を追加します。

実装は、E ー Mail アドレスとパスワードの場合よりシンプルです。

例にあげたコードは、ログインが成功した場合は、「/material」と言うページに移動するようなコードになっています。UI は一度だけ初期化すれば良いので、既に作成されているかをチェックして、UI のインスタンスがなければ、新規に作成、既に作成されている場合は、作成したインスタンスを使って表示する様になっています。

import * as firebaseui from "firebaseui";
import firebase from "../lib/firebase";
import * as React from "react";
import "firebaseui/dist/firebaseui.css";
class Login extends React.Component {
  componentDidMount() {
    const uiConfig = {
      signInSuccessUrl: "/material",
      signInOptions: [firebase.auth.GoogleAuthProvider.PROVIDER_ID],
      credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO,
    };
    let ui = firebaseui.auth.AuthUI.getInstance();
    if (ui) {
      ui.start("#firebaseui-auth-container", uiConfig);
    } else {
      ui = new firebaseui.auth.AuthUI(firebase.auth());
      ui.start("#firebaseui-auth-container", uiConfig);
    }
  }
  render() {
    return (
      <React.Fragment>
        <div id="firebaseui-auth-container"></div>
      </React.Fragment>
    );
  }
}
export default Login;

コードはこれだけですが、Firebase 側で Google による認証を有効にする必要があります。これは Firebase コンソールからユーザー認証の設定ページ（Authentication）で「Google」を有効にします。

（＊）Firebase を使うための設定も必要です。以前に記事を書いていますが、React で npm を利用して開発を行う場合、npm で「firebase」のモジュール（パッケージ）をインストールして、Firebase のプロジェクト情報を使って初期化をする必要があります。 上のコードでは、「src/lib/firebase.ts」でこの設定を行っています。