10分でできるReact+FirebaseのGoogleAuth

やりたいこと

Reactを使って
FirebaseのAuthenticationの
Googleログイン、ログアウトの
ボタンを作る

Firebase Google Authenticationドキュメント

Firebaseの設定

1. Firebaseの管理画面でAuthenticationでGoogleのログインを有効にする
2. 後述のReactのFirebaseの設定のためにAPIキー一覧を取得しておく
   • ※最近のバージョン(2018年６月)だと右上の「ウェブ設定」ボタンから

※参考: https://qiita.com/cyokodog@github/items/eeedc5c94477602ec9f3 の記事のgoogleアカウントで認証できるように設定するまで

React環境作成

$ npx create-react-app react-firebase
$ npm install firebase

Firebaseの設定を読み込むjsを作成

$ cd react-firebase
$ vi firebase.js

firebase.js

import firebase from 'firebase/app'
import 'firebase/auth'

const config = {
  apiKey: 'xxxxx',
  authDomain: 'xxxxx.firebaseapp.com',
  databaseURL: 'https://xxxxx.firebaseio.com',
  projectId: 'xxxxx',
  storageBucket: '',
  messagingSenderId: 'xxxxx'
}

firebase.initializeApp(config)

export default firebase

ユーザー情報を持ってない場合はログインボタンを表示、持っている場合はUIDとログアウトボタンを表示する画面の作成

$ vi App.js

App.js

import React, { Component } from 'react'
import firebase from './firebase'
import './App.css'

class App extends Component {
  state = {
    user: null
  }

  componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      this.setState({ user })
    })
  }

  login() {
    const provider = new firebase.auth.GoogleAuthProvider()
    firebase.auth().signInWithRedirect(provider)
  }

  logout() {
    firebase.auth().signOut()
  }

  render() {
    return (
      <div className="App">
        <p className="App-intro">
          UID: {this.state.user && this.state.user.uid}
        </p>

        {this.state.user ? (
          <button onClick={this.logout}>Google Logout</button>
        ) : (
          <button onClick={this.login}>Google Login</button>
        )}
      </div>
    )
  }
}

export default App

動作確認

$ npm start

補足：FirebaseのAPIキーを隠しファイル(.env)で管理

package.jsonがある階層に下記のような.envファイルを作成

.env

REACT_APP_FIREBASE_APIKEY=XXXXXXXXXX
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=XXXXXXXXXX

firebase.jsを下記のように修正

firebase.js

import firebase from 'firebase/app'
import 'firebase/auth'

const config = {
  apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
  authDomain: 'xxxxx.firebaseapp.com',
  databaseURL: 'https://xxxxx.firebaseio.com',
  projectId: 'xxxxx',
  storageBucket: '',
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID
}

firebase.initializeApp(config)

export default firebase

実際のサンプルコード