【最小構成】React + Firebase で認証つきリアルタイムDBアプリ

JavaScript Firebase

Firebase の練習。

  • リアルタイムDB
  • 認証

を使ったミニマムな Web アプリケーションを React で実装してみる。

成果

1. 準備

[create-react-app] でプロジェクトを作る。

$ npm instail -g create-react-app
$ create-react-app react-firebase-simplest-example
$ cd react-firebase-simplest-example

アプリケーションはめちゃくちゃ単純。テキストボックスが一つあるだけ。テキストボックスの値を state に保存して管理する。

【画像】

コードはこんな感じ。 App コンポーネントと MainPage コンポーネント。

2. Firebase Realtime Database を使う

Firebase のコンソール https://console.firebase.google.com にアクセスして、適当にプロジェクトを作る。

プロジェクト内に「ウェブアプリに Firebase を追加」という項目があるのでそれを見ると config が定義されるのでコピー。 firebase.js というファイルで管理する。

あとは firebase を使うために npm install firebase したら、準備オーケー。 App.js 内の関数を書き加えます。

  async handleInputChange (e) {
    let text = e.target.value
    this.setState({ text })
    await firebaseDb.ref(`/myText`).set({ text })
  }

  async componentDidMount () {
    let snapshot = await firebaseDb.ref(`/myText`).once('value')
    let { text } = snapshot.val() || ''
    this.setState({
      text
    })
  }

やっていることは二点。

  • テキストボックスが更新されるたびに Firebase のデータベースにアクセスして /myText にオブジェクトを保存する
  • App.js の componentDidMount 内で、 Firebase のデータベースにアクセスして、/myText に保存された値を取ってくる

（これが正しく実行されるためには、Firebase のコンソールでデータベースのセキュリティルールを設定しておかなければならないが、割愛。）

3. 認証をつける

認証も Firebase がよしなにやってくれる。 メールアドレスによる認証はもちろんのこと、Github, Facebook, Twitter認証も簡単にできる。簡単に、だいたい一行で。今回は匿名認証をつける。

state.auth で認証状態を管理して、認証が住んでいなければサインイン用のページに飛ばして認証ボタンを押してもらう。認証が終わったらアプリケーションページに飛ぶ、

まず、firebase.js に書き加えて、firebaseAuth を export する。

サインインページ用の SingIn コンポーネントを作る。といっても、ボタンが一つあるだけ。

App.js を書き換える。

これだけで終わり。