Firebase Authentication + SPA(React/TypeScript) でユーザ登録／ログイン／ログアウト (1:サンプル起動まで)

※2018/10/29
Firebase Authentication + SPA(React/TypeScript) でサンプル作り直してみたとしてサンプルを作り直して記事を書きました。

---

Firebase Authentication によるユーザ認証周りについて理解しておきたく、実際に自分が普段作っている SPA(React/TypeScript) に組み込むとどんな感じになるかということもあったので試しに作ってみました。なおちょっと面倒なのは承知の上、リダイレクトモードでやります¹。

それから、説明まで書くと長くなりそうなので 2 回に分けようと思いますました(2018/10/11)。

1. サンプル起動まで(この記事)
2. 要点の説明

という感じで考えています。

※ソースコード一式 は GitHub に置いています。

起動方法

前提条件

• Firebase プロジェクトを 1 つ用意する。
  • そのプロジェクトの Authentication で メール / パスワード と Google を有効にしておくこと。また、1 つのメールアドレスにつき 1 つのアカウント (デフォルト)としておくこと。
  • Facebook, Twitter, GitHub への連携も可能(ただしその場合は各プロバイダ側での設定も必要)²。

必要な環境

(バージョンは動作確認済バージョン)

• Node >= 10.7.0
• npm >= 6.1.0
• yarn >= 1.10.1 (npm を使う場合は適宜読み替えて下さい)
• firebase-tools >= 4.2.1

インストールから起動まで

# 1. GitHub からクローン
$ git clone [e-mail]:katsu-o/firebase-auth-spa.git
$ cd firebase-auth-spa

# 2. 依存パッケージのインストール
$ yarn install

# 3. .env ファイルを作成
$ mv .env.sample .env

# 4. .env ファイルの中身を埋める
# Firebase コンソールの Authentication にある「ウェブ設定」をクリックすると表示される
# config を当該箇所にセットして下さい。
# .env ファイルへの設定文字列にクォートは不要です。=の後に余計な空白もつけないでください。

# 5. Firebase へログイン
$ firebase login

# 6. Firebase プロジェクトの選択
$ firebase use --add

# 7. サンプル起動
$ yarn start

以上です。
Hosting URL へアクセスして下さい。

※GitHub: README.md に書いておいたのでそちらの方が分かり易いかも知れません。

使い方

どうやって説明しようかと思ったのですが、やってること自体は単純なので動画にしました。
実際の操作に加えて、Firebase Console の Authentication でユーザーリストを見ると状態が分かります。

case 1: Email & Password で Sign up

case 2: Facebook で Sign in 後、その Email アカウントで Sign up(パスワード認証の追加)

ほかにもいろいろ試せます。Facebook + Email + GitHub なども可能です。特に既存アカウントに対し新たに Google 認証で Sign in すると既存アカウントに紐づけられている認証プロバイダ情報が消されてしまうことが確認できます(ハマりました)³。

実装について

• create-react-app で scaffolding して redux/saga + material-ui で作りました。

※近いうちに説明を書く予定ですが、ひとまず要点だけ。

• src/conatainers/ApplicationManager.tsx

  • Firebase Auth の認証状態変更検知処理(onAuthStateChanged())
  • 前画面からリダイレクトされてきたときの処理(getRedirectResult())

• src/utilities/linkProvider.ts

  • 既存ユーザアカウントへの認証プロバイダ追加のための前処理(プロンプトダイアログ)

• src/sagas/auth.ts

  • Email & Password でのユーザ登録処理(ユーザ既存の場合、パスワード認証の追加処理へ)
  • Email & Password もしくはその他プロバイダ認証によるサインイン処理

以上です。時間取れ次第説明書きます。

1. Google ログインと JavaScript を使用して認証するに、「モバイル端末ではリダイレクトすることをおすすめします。」となっているので(実装は複雑になりますが)。 ↩

2. いろいろ他で詳しく説明されてるので詳細はそちらを参考にして下さい。ちなみに Twitter の開発者アカウントの取得には承認までちょっと時間がかかります(私は 10 日ほどかかりました) ↩

3. ここ参考になりました -> Firebase Authentication を使って得られた知見まとめ - トークンの仕様や注意点など ↩