初心者がReact+FirebaseでWebアプリを作成する③ ～Firebase Authenticationの認証機能を使ってみた～

②の続きです。

今回はfirebaseの認証機能を使って、ログインしたユーザーがだけが書き込みをできるようにします。

↓のGitHubのページを参考にしました。
https://github.com/firebase/firebaseui-web-react

その他参考。
https://firebase.google.com/docs/auth/web/manage-users?hl=ja
https://firebase.google.com/docs/auth/web/start?hl=ja

まずはfirebaseのAuthenticathionのログイン方法でGoogleとメール／パスワード認証を有効にしてみましょう。
TwitterなどはAPIを申請をしなければならないので無効にしています。

以下のnpmコマンドを実行。

npm install --save react-firebaseui

npm install --save firebase

firebase-uiがインストールできたら↓のように変数uiConfigを定義して、
StyledFirebaseAuthで呼び出すようにします。

App.js

    const uiConfig = {
　　　//認証するときポップアップします
      signInFlow: 'popup',

　　　//サインインしたときのリンク先
      signInSuccessUrl: '/',

      //認証方法一覧。
      //Googleの部分をFacebook、Twitter等に変えれば、そのAPIが使用できます
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
      ]
    };

今回は以下のようにまとめました。
stateにisLoginを設けて、true、falseでログイン状態を管理しています。
コンポーネント化していないので散らかっていますが、後ほどまとめていきます。

App.js

import React from 'react';
import './App.css';
import firebase from "firebase/app"
import "firebase/auth"
import "firebase/firestore"

//①でモジュール化したfirebase.jsをインポート
import { firestore } from './plugins/firebase';

import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';


class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      name: '',
      address: '',
      isLogin: false,
    }    
    this.getName = this.getName.bind(this);
    this.getAddress = this.getAddress.bind(this);
    this.addData = this.addData.bind(this);
    this.logOut = this.logOut.bind(this);
  }

  //コンポーネント配置時にログインできてるか確認します
  componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      this.setState({
        isLogin: true,
      });
    });
  }

　//名前の入力フォーム情報読み込み
  getName(event) {
    this.setState({
      name: event.target.value,
    });
  };

　//住所の入力フォーム情報読み込み
  getAddress(event) {
    this.setState({
      address: event.target.value,
    });
  };

　//登録ボタンを押すとデーターベースに反映
  addData(){ 
    firestore.collection('users').add({
    name: this.state.name,
    address: this.state.address,
    created_at: new Date(),
    }).then(() => {
    this.setState({
      name: '',
      address: '',
    });
  })};

　//ログアウトボタンを押すとisLoginがfalseになる
  logOut(){
    this.setState({
      isLogin: false,
    });
  }



  render(){
    const uiConfig = {
      signInFlow: 'popup',
      signInSuccessUrl: '/',
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
      ]
    };
　　
    //空の変数を定義してifでログイン／ログアウト時の表示画面を切り替える
    let successfulUser;

    if(this.state.isLogin){
      successfulUser=(
        <div>
        <form>
        <TextField  label="名前" 
         value= {this.state.name} 
         onChange={(event)=>{this.getName(event)}}/> 
         <br/>

         <TextareaAutosize 
         aria-label="住所" 
         rowsMax={4} 
         placeholder="住所" 
         value= {this.state.address} 
         onChange={(event)=>{this.getAddress(event)}}
         />;
         <br/>

        <Button variant="contained" color="primary" onClick={this.addData}>登録</Button>
        </form>
        <Button variant="contained" color="secondary" onClick={this.logOut}>ログアウト</Button> 
        </div>

      );
     }else{
      successfulUser=(
         <div>
         <p>Please sign-in:</p>
         <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>
         </div>
       );
      }   

     return(
　　　　//最終的な表示画面
       <div>
          {successfulUser}   
       </div>
      );
    }
}
export default App;

するとログイン画面が表示されます。

ログインできたら②で作った投稿画面へ切り替わります。

これでログインしたユーザーだけが書き込みをできるようになりました。
ユーザー情報もちゃんと登録されています。

componentDidMountについてはReactの公式ページが一番分かりやすかったです。
ライフサイクル図が秀逸だと思います。
↓
https://ja.reactjs.org/docs/react-component.html

それではまた投稿いたします。