最初に…
現在学習中のReactReduxでFirebaseUIを使用して作ろうとしたAuth認証。
がしかしこれは失敗談です(やり方はあるのかも？)結論：Reduxを使用してHomeにログイン情報の表示ができませんでした。
FirebaseUIを使用すると簡単に実装できますが、細かい設定をするとなると向かないのかな？と感じてしまいました。
やり方があれば知りたいのでどなたかご意見下さると幸いです。
合わせてご指摘事項等ありましたらご連絡頂けますとありがたいです。
環境構築
０． $ npx-create-react-app (projectname)
１． $ npm install --save firebase history@4.10.1 firebaseui --save
２． firebaseコンソールでの初期設定(詳細は割愛)
３． $ firebase init （初期化各種項目は割愛）
※２．のhistoryは、後々pushメソッドをVer.5.0.0で使用するとエラーが出るので予め対策
→Uncaught Could not find router reducer in state tree, it must be mounted under "router"
１．Firebaseコンソール(Web)でAuthenticationの設定
・firebaseのプロジェクト画面(コンソール)を開いてメニューからAuthenticationをクリックして有効にする
・今回はメール,google,Twitter認証の３つでの実装をしてみる
・Teitterの認証取得は「Twitter 開発者 申請」で入力すれば出てくるので割愛します。
→因みに皆さん英語で申請されている様ですが日本語でも申請通るみたいですね。
→Twitterに関しては有効にした後にコールバックURLをTwitterデベロッパーのプロジェクトページの欄に入力する必要がある
２．認証情報ファイルの作成
・コンソール画面の設定アイコン(歯車の)から設定画面に入る
・マイアプリの”Firebase SDK snippet”の項目の構成にチェックを入れてスクリプトをコピーする（以下の内容が記述されたものをコピーできる）
・作業ディレクトリに戻り、src配下にfirebaseディレクトリを作成し以下のconfig.js(公式ドキュメントにもある)とエントリーポイントのindex.jsを作成する
・こういった情報は.envの方がいい？(他の記事見てるとそのやり方も見かけますが)とりあえずgitignoreには記載します。。。
export const firebaseConfig = {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
};
以下は今回使用するサービスのみ記述する
// 以下は今回使用するfirebaseのサービス(一つずつ記述が必要)
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import { firebaseConfig } from "./config"; //先に作成したconfig.jsの読み込み
export const providerGoogle = new firebase.auth.GoogleAuthProvider(); //使用するプロバイダー名で定数化
export const providerTwitter = new firebase.auth.TwitterAuthProvider(); //使用するプロバイダー名で定数化
export const firebaseApp = firebase.initializeApp(firebaseConfig); //コピーした設定を使ってアプリケーションの初期化を実施することでアプリ内でfirebaseのサービスが使えるようになる
//以下は毎回firebase.hoge()とメソッドを入力するのが面倒なので最初にそれぞれのメソッドに対し定数化しておく
export const auth = firebase.auth();
export const db = firebase.firestore();
export const FirebaseTimestamp = firebase.firestore.Timestamp; //データベースのデータ作成日時を記録しておけるもの(サーバーからタイムスタンプを取得して記録する)
export default firebase;
３．認証ログインページの作成の作成
簡単に実装するならFirebaseUIがいいというのを見かけ試してみました。const uiConfig〜signinOptionsまではセットでしか使えないみたいです。
import React from "react";
import firebase from "../firebase/index";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
const uiConfig = {
signInFlow: "popup",
signInSuccessUrl: "/",
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID,
//firebase.auth.FacebookAuthProvider.PROVIDER_ID,
//firebase.auth.GithubAuthProvider.PROVIDER_ID,
//firebase.auth.PhoneAuthProvider.PROVIDER_ID
],
};
const SignIn = () => {
return (
<div>
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
</div>
);
};
export default SignIn;
使用する各プロバイダーのアイコンはどこから来てるの？と思えますが、<StyledFirebaseAuth>にsignInOptionsのプロバイダーが入ってくると、FirebaseUIが効いてそれぞれ記述したプロバイダー(今回は：Google、Twitter、Email)認証の３つが並びます。
今回コメントアウトしてあるプロバイダーもここに並べれば表示だけはされたので(必要なら)認証をとってFirebaseの設定を有効にするだけで使用できるはずです。
４．Reduxで状態管理する為、必要な情報を見てみる
ここからFluxに基づいて初期stateの項目を管理すべくまずはconsole.log(result)で見てみるが何も返ってこない・・・
加えてEmail認証ではEmailの入力欄しか無いことに気づく(パスワード設定はできないみたい：これもカスタマイズできんのか？)
uiConfig内の項目はごちゃごちゃイジれないみたいなので(というか分からない)今回諦めて別の方法で実装する必要がありそうだと言うことだけは分かった。
・なんかモバイル(Andoroid)では各Providerごとにカスタマイズが効くみたいな記事は見かけましたが、Reactでは無理なのか・・・
最後に
・この３ファイルのみでログインが実装できるのは驚きだが、自分の意図したとおりに組むのにはまだまだスキル不足が否めない
→学習に余裕ができたらカスタマイズに関して(できるのかできないのかも含め)調べてみたいと思う。