React+Redux+Firebase Authenticationでログイン/ログアウト機能を実装する (1)

はじめに

表題の通り、React+Reduxで作っているアプリにFirebase Authenticationによるユーザー認証システムをのっけてみようというものです。ログインにはGoogleアカウントを使用することにします。

アプリといってもあくまでログイン機能のサンプルなので

• ログインしていない場合はログインボタンが表示されており、そのボタンをおすとポップアップでGoogleアカウントログイン

• ログインしている場合は画面にユーザー情報を表示する

だけのものです。

サンプルアプリのリポジトリは↓にあります。
https://github.com/k5trismegistus/react-redux-firebase-login

リポジトリをみてもらえばわかりますが、ディレクトリ構造は次のようになっています。フロントエンドは家でちょろちょろいじる程度なのでよくわかってないです><。普通こうじゃない？みたいなツッコミがアレばぜひコメントください。

src/
  ├ actions
  ├ components (Presentational)
  ├ containers (Container)
  ├ firebase (Firebaseの設定など)
  ├ reducers
  └ index.js (エントリーポイント)

Firebaseの準備

何はともあれFirebaseが使えないと話になりません。さっそく準備しましょう。

次の記事を参考にして、Firebaseを使える状態にしておきます。'firebase-toolsを使う'まで行えばOKかと。
FirebaseのGoogleアカウントOAuth認証を試したのでメモ

準備ができたら、次のようにfirebase用のファイルを作成しておきましょう。

まずはアプリ内でfirebaseを使えるようにするイニシャライザ。

firebase/index.js

import firebase from 'firebase'
import { config } from './config'

export const firebaseApp = firebase.initializeApp(config)

次にAPIキーなどの情報を記載する設定ファイル。空欄になっているところはfirebaseコンソールから得られる情報で埋めてください。

firebase/config.js

export const config = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: ""
}

Redux Stateの設計

ログイン情報だけなので、こんな設計にしてみました。

{
  auth: {
    uid: '',
    displayName: '',
    email: ''
  }
}

displayNameがGoogle+の名前に対応します。

非ログイン状態であればすべて空文字、ログイン情報であれば値が入っているということにします。ログインしているかどうかの判定はuidに値が入っているかどうかで行うことにしましょう。

ルートReactコンポーネントの準備

基本的な考え方

このサンプルアプリでは、次のような設計をとります。

• ログイン時に表示されるコンポーネントとログアウト時に表示されるコンポーネントが存在する
• 上位のコンポーネントでログイン状態をみて、状態に応じてどちらかを表示するか切り替える。

まずは簡単な最上位のコンポーネントから作ることにしましょう。

Container component

containers/AppContainer.js

import firebase from 'firebase'
import { connect } from 'react-redux'
import App from '../components/App'

const mapStateToProps = (state) => {
  console.log(state.auth.uid)
  return {
    uid: state.auth.uid,
  }
}

const AppContainer = connect(
  mapStateToProps
)(App)

export default AppContainer

Reduxステートのauth.uidをPresentational componentのpropsにバインドするだけ。

Presentational component

components/App.jsx

import React, { Component } from 'react'

import UserInfoContainer from '../containers/UserInfoContainer'
import AuthContainer from '../containers/AuthContainer'
import { firebaseApp } from '../firebase'

export default class App extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
        { this.props.uid ? <UserInfoContainer /> : <AuthContainer /> }
      </div>
    )
  }
}

uidの有無に応じて表示する下位のコンポーネントを切り替えます。
今回はログインしていたらUserInfo、ログアウトしていたらAuthというコンポーネントを表示するようにします。

今後

(2)では、Authコンポーネントをつくりログインできるところまでを解説しています。
React+Redux+Firebase Authenticationでログイン/ログアウト機能を実装する (2)