「Firebase Auth使いたいけど、どう実装するの？」という人のために

セキュリティ、難しいですね。認証を自前で実装するには膨大な知識が必要で、一度実装しても新たな脆弱性発見のニュースに常に気を配る必要があります。フロントエンドエンジニアがセキュリティの分野まですべて責任をもつことは現実的ではないです。

そのなかで、認証サービス Firebase Authenticationは基本無料*1で、認証を委託するサービスとして魅力的です。ただしドキュメントが不親切だったり、初心者の実装してみた記事ばかりヒットしていて参考にしづらいなど、実装するためのハードルがあります。本記事では、Firebase Auth & 認証がはじめてという人を念頭に、信頼できるリソースがどこにあるかを示すことで、導入初期のハードルを低くすることをねらっています。

この記事を書いているのは最近フロントエンドを学び始めた人で、鵜呑みにすると危険な可能性があります。念の為。

以下常体。

執筆時のバージョン

Firebase JavaScript SDK: v8.6.2
React: v17.0.2

Firebase Authを実装する

認証の実装には、基本的に次の3つの要素が必要となる

①認証に使うサービス(provider)を選ぶ
②サインインの方法
③サインイン成功・失敗時に呼ばれる処理

とりあえずこの3つが行われていればよいと考えていい。

①は任意、②はSPAならポップアップ一択、③は必要な情報（アカウント名など）をHooksに渡すなど。 3要素と考えるとシンプルだが、公式の実装例を見てもコード量が多い。各メソッドを自前関数でラップするか逐次ベタ書きする必要があり、APIが使いづらい印象をうける。

Firebase Authのつらさ

情報を探す際に、欲しい情報がどこにあるのかわからないことが多い
なので頑張って探す必要がある
基本的にはauth | JavaScript SDK | Firebaseから探す
Reactなどにどう導入するかわからない

Firebase UI makes things easy

ひとつの解決策として、FirebaseUIを使うことで認証機能を見通し良いコードで実装することができる。FirebaseUIは認証画面に特化したUIコンポーネントだが、API が生Firebase Auth に比べて優れており、導入するとログイン処理部分の実装もシンプルさをもたらしてくれる。

React の場合は FirebaseUI React Components を使うのだが、生 Firebase Auth の公式実装例と以下のコードを見比べてほしい。

// Import FirebaseAuth and firebase.
import React from 'react';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import firebase from 'firebase';

// Configure Firebase.
const config = {
  apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM',
  authDomain: 'myproject-1234.firebaseapp.com',
  // ...
};
firebase.initializeApp(config);

// Configure FirebaseUI.
const uiConfig = {
  // Popup signin flow rather than redirect flow.
  signInFlow: 'popup',
  // Redirect to /signedIn after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.
  signInSuccessUrl: '/signedIn',
  // We will display Google and Facebook as auth providers.
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
  ],
};

function SignInScreen() {
  return (
    <div>
      <h1>My App</h1>
      <p>Please sign-in:</p>
      <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
    </div>
  );
}

export default SignInScreen

github.com

設定情報がuiConfigに一本化されていて見通しがよくなったと実感できると思う。

また、各メソッドが何をするのかドキュメントが公式より遥かにまとまっているため、FirebaseUIを使わない場合でもまずUIのconfigurationを見て設定方法のアタリをつけたほうが良い。

github.com

ただしこのライブラリはSSRに対応していないので、SSRする場合には別のライブラリを入れる必要があるようだ（試していない）*2。

Firebase Auth のconfig, 初期化

APIキーなどすべて環境変数化し、初期化が一度だけ行われるように変更する。公式：Add Firebase to your JavaScript project

import firebase from 'firebase/app';


const firebaseConfig = {
 apiKey: REACT_APP_API_KEY,
  authDomain: REACT_APP_AUTH_DOMAIN,
  databaseURL: REACT_APP_DATABASE_URL,
  projectId: REACT_APP_PROJECT_ID,
  // ... 省略（[ウェブアプリに Firebase を追加]ボタンの情報をそのまま）
};

// Initialize Firebase
// 初期化が何度も呼ばれることを防ぐ
!firebase.apps.length ? firebase.initializeApp(firebaseConfig) : firebase.app();

環境変数を書いたファイルはプロジェクトのルートディレクトリに配置する。

create-react-app：REACT_APP_で始まる環境変数

next.js：NEXT_PUBLIC_で始まる環境変数