React+Redux+typescript+firebaseで認証機能作るのが辛い①

firebaseで認証機能を作りたかった

　firebaseって、簡単に認証機能を使えるようにできているので、npmで取ってきたらあとはすぐにできる。。。はずだった。探してみると、確かに公式でもAPIの呼び方はあるし、Qiitaや他のブログなどにも色々探せば出てきた。でも私がコピぺ活用しやすい形式での実装が見つけられなかったので四苦八苦した話。全部書くとアレなので、ステップに分けて投稿する第一弾。

目次

　・Reactとfirebaseで認証機能作る //①
　・ReactとReduxとfirebaseで認証機能作る //②
　・Routeで認証するかホーム画面へ遷移するかを分ける //③

Reactとfirebaseで認証機能作る

参考：10分でできるReact+FirebaseのGoogleAuth
シンプルで動くまでの最短を行くことができました。ただし、私はtypescript派なので、少しもじりました。
１からの手順は上記の記事を参考にしてください。上記と違うのは、create-react-appにtypescriptオプションをつけたことくらいです。（地味にjsからtsの変換も慣れないうち私は苦労したのでコード載せておきます。
いじったファイルは次の通り

firebase.ts

import * as 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",
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    projectId: "xxxxx",
    storageBucket: "xxxxx.appspot.com"
};

firebase.initializeApp(config)

export default firebase

App.tsx

import * as React from 'react'
import './App.css'
import firebase from './firebase'

interface UserStatus {
  user: firebase.User | null
}

class App extends React.Component {
  public state: UserStatus = {
    user: null
  }

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

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

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

  public 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

stateは、本来使用するべきinterfaceに書き換えるべきでしたが、まずは実行出来るところまで行こうとしていたためご容赦ください。
で、実行すると、
・ログイン前

・ログイン後

はい、簡単にログイン処理ができました。firebase側でログイン状態を持ってくれているのでcomponentDidMountの中でfirebaseのメソッド呼ぶだけでログイン状態の保持もできる。なんてシンプルなんだ！

そしたらまあ、ログインしているならホームの画面に行く。それ以外の場合はログイン画面へリダイレクトする画面フローにしたくなるわけです。

ただ、Reactとfirebaseだけで構成してあるため、画面が複数になったりすると、この構成だとなかなか厳しいものがある。じゃあやっぱりRedux使った方がいいよねってことで、ちゃんとReduxに合った方法で実装していこうと言うことにした。

。。。正直参考にしたコード少し弄ればすぐだとなめていたのだが、思った以上に苦労したので、次回まとめます。

ひとまず認証の動作確認まででこの記事は終わり。

次→https://qiita.com/teshima/items/2191a9751a4ab16e7ec2