Firebaseを利用した認証機能の作成(2) view (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

Viewの実装

ログイン機能のviewを作成します。未ログイン時にはGoogleアカウントでログインボタンを表示し、ログイン時には名前とログアウトボタンを表示します。

src/components/Login.js

import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { isLoaded, isEmpty } from 'react-redux-firebase'
import { loginWithGoogle, logout } from '../actions/authActions'

let Login = ({ auth, loginWithGoogle, logout }) => {
  if (!isLoaded(auth)) {  // #4
    return (<div>ログイン中...</div>);
  }
  if (isEmpty(auth)) {  // #5
    return (
      <button onClick={loginWithGoogle}>Googleアカウントでログイン</button>
    )
  }
  return (
    <div>
      {auth.displayName} さん   {/* #6 */}
      <button onClick={logout}>ログアウト</button>   {/* #7 */}
    </div>
  );
}

Login.propTypes = {
  auth: PropTypes.object.isRequired,
  loginWithGoogle: PropTypes.func.isRequired,
  logout: PropTypes.func.isRequired
}

const mapStateToProps = state => (
  { auth: state.firebase.auth }  // #1
)

const mapDispatchToProps = dispatch => {
  return {
    loginWithGoogle: () => dispatch(loginWithGoogle()),  // #2
    logout: () => {dispatch(logout())  // #3
    }
  }
}

Login = connect(
  mapStateToProps,
  mapDispatchToProps
)(Login)

export default Login;

• 認証情報は、state.firebase.authで取得できます(#1)。authというプロパティ名でviewに渡します。
• ログイン関連のfunctionをviewに渡します(#2, #3)。
• 認証情報の読み込み中は、isLoaded(auth)がfalseになるので、その間は読み込み中である旨を表示します(#4)。
• ログアウトしている場合は、isEmpty(auth)がtrueになるので、ログインボタンを表示します(#5)。
• ログインしている場合は、ユーザ名(#6)とログアウトボタン(#7)を表示します。

動作確認

ログイン、ログアウトの機能ができたので、動作確認します。

ログアウト状態です。

Googleでログインボタンを押すと、画面が切り替わり、アカウント選択画面になります。

アカウントを選択すると、元の画面に戻り、少しの間ログイン中...と表示されます。

読み込みが終わると、ログイン名とログアウトボタンが表示されます。

ログアウトを押すと、ログインボタンが表示されます。

Firebaseのデータも確認しておきましょう、

Firebase Console > Authentication > ユーザに、ログインしたことのあるユーザ一覧が表示されます。

Databaseのデータタブで、/userパスにユーザの情報が格納されていることが確認できます。

以上で認証機能の作成は完了です。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com