React + FirebaseでSignUp実装

こんにちは。

サーバーサイドエンジニアのjoeです。

メンバーのReactキャッチアップのためにサンプルアプリを作ったので、公開したいと思います。

この記事は、React初心者を対象としています。

簡単なイベント操作から、データの保存までの全体像が把握できるようになるかと思います。

また、githubに残したので、ぜひ参考にしてみて下さい。

github.com

Reactプロジェクトの準備

create-react-appコマンドを使用して、新しくプロジェクトを作成します。

// コマンドをインストールしていない方は以下のコマンドでインストール
$ npm install -g create-react-app

// プロジェクトの作成
$ create-react-app react-firebase-sign-up

プロジェクトの作成が終わったら、Reactプロジェクトを起動してみます。

$ cd react-firebase-sign-up
$ yarn start

この画面が表示できたら、Reactプロジェクトの準備は終わりです。

Firebaseの準備

まず、TOPからコンソールへ移動を押し、Firebaseにログインします。

firebase.google.com

プロジェクトを追加ボタンを押し、プロジェクト名を入力した後に、プロジェクトを作成します。

Firebaseプロジェクトに入れたら、Authenticationの設定をします。

プロバイダ、メール/パスワードのステータスが無効になっているので、有効にします。

ここまでできれば、firebase側の設定は終わりです。

React側でメールアドレス/パスワードのフォームを作り、実際にSign Upしてみましょう。

ReactとFirebaseを連携し、SignUpしてみる

Formの作成

react-firebase-sign-up/src/App.jsのコードは消さずに、そのままFormを追記していきます。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        {/* ここから */}
        <div className="form">
          <form className="register-form">
            <input type="text" placeholder="email address"/>
            <input type="password" placeholder="password"/>
            <button>Sign Up</button>
          </form>
        </div>
        {/* ここまで追記 */}
      </div>
    );
  }
}

export default App;

ブラウザを確認すると、ダサいですが、メールアドレスとパスワードを入力するFormが出来上がりました！

ReactとFirebaseの連携

秘匿情報

まず、react-firebase-sign-up/src/config/firebase.jsを作成します。

Firebaseから秘匿情報を確認し、以下のようにコードを書きます。

＊秘匿情報なので、git管理されている方は、.gitignoreに、/src/config/firebase.jsを追記する必要があります。

export default {
  apiKey: "**************",
  authDomain: "**************",
  databaseURL: "**************",
  projectId: "**************",
  storageBucket: "**************",
  messagingSenderId: "**************"
};

秘匿情報の取得方法は、Project Overviewをクリックし、以下のボタンをクリックするとモーダルで表示されます。

Firebaseを読み込む

まず、プロジェクトにfirebaseをインストールします。インストール後は、サーバを止め、 yarn startで再起動します。

$ yarn add firebase

次に、react-firebase-sign-up/src/App.jsにfirebaseの設定を追記します。

App.jsのコードは以下のようになります。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

// ここから
import firebase from 'firebase';
import firebaseConfig from './config/firebase';

firebase.initializeApp(firebaseConfig);
// ここまで追記

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <div className="form">
          <form className="register-form">
            <input type="text" placeholder="email address"/>
            <input type="password" placeholder="password"/>
            <button>Sign Up</button>
          </form>
        </div>
      </div>
    );
  }
}

export default App;

最後に、メールアドレス/パスワードをfirebaseにPOSTしてみます。

メールアドレス/パスワードをfirebaseにPOST

POSTするために以下の順番で実装していきます。

１. emailとpasswordをstateに定義

mae.chab.in

２. emailとpassword stateを更新できるようにする

mae.chab.in

３. handleSignUpメソッド実装

developer.mozilla.org

４. firebase authのcreateUserWithEmailAndPasswordメソッドを使用して POST

Interface: Auth  |  Firebase

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import firebase from 'firebase';
import firebaseConfig from './config/firebase';

firebase.initializeApp(firebaseConfig);

class App extends Component {

  constructor(props){
    // 1. Stateの定義
    super(props)
    this.state = {
      email: '',
      password: '', 
    }
  }

  // 3. handleSignUpメソッドの定義
  handleSignUp = e => {
    e.preventDefault()
    // stateからemailとpasswordを取得する
    const { email, password } = this.state;

    // 4. firebaseにemailとpasswordをPOST
    firebase.auth().createUserWithEmailAndPassword(email, password)
      .then(user => {
        console.log(user);
        this.setState({ email: null, password: null })
      })
      .catch(error => {
        console.log('firebase error', error);
      });
  }


  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <div className="form">
          <form className="register-form">
            {/* 2. テキストが入力されるたびに、State emailが更新されるようにする */}
            <input 
              type="text" 
              placeholder="email address"
              onChange={e => this.setState({ email: e.target.value })}
            />
            {/* 2. テキストが入力されるたびに、State passwordが更新されるようにする */}
            <input 
              type="password" 
              placeholder="password"
              onChange={e => this.setState({ password: e.target.value })}
            />
            {/* 3. handleSignUpメソッドをonPress時に実行されるようにする */}
            <button onClick={e => this.handleSignUp(e) }>Sign Up</button>
          </form>
        </div>
      </div>
    );
  }
}

export default App;

ブラウザで、メールアドレス/パスワードを入力！

Sign Upをおして、firebase上でユーザーが作成されているか確認する。

確認できたら、SignUp成功！

firebase便利ですね！