>reactReactとFirebaseを使ってログインフォームを実装する32020年4月5日ログイン機能を確認するため、先にEメールとパスワードでのログインを完了させます。その次にダイアログ表示まで実装します。連載記事(全4回)FirebaseでEメールとパスワードでのログイン設定FIrebaseのコンソール画面の左側にあるAuthenticationをクリックします。ログイン方法からメール/パスワードをクリックして有効にするをオンにして保存しましょう。これだけでEメールとパスワードでのログインできます。Linkログインフォームをダイアログ表示にするmaterial-uiのダイアログを使用します。ダイアログを管理するステートを用意し、trueの時はダイアログ表示、falseで閉じます。下記のURLを参照してください。https://material-ui.com/components/dialogs/NavBarを編集しましょう。Reduxのstoreからログイン情報を取得して、ログインとログアウト処理を切り替えています。LoginFormにformTextを渡すことでログインとサインアップも切り替えてます。firebase.auth().signOut()でログアウトできます。コメントを参照してください。connect(mapStateToProps)(NavBar);ログインフォームはダイアログで表示するのでLandingPage.jsxのLoginFormコンポーネントは削除しましょう。ログイン状態ならLoginedPageにリダイレクトするようにします。connect(mapStateToProps)(LandingPage);ここで挙動を確認してみましょう。ローカルサーバー起動します。ヘッダーのログイン、新規登録ボタンでダイアログが表示されます。test@gmail.comなどの適当なEメールとパスワードで登録すると、ページが偏移してLoginedPageになります。ログアウトをクリックしてLandingPageになっていたら正しく動作しています。FirebaseのコンソールでAuthenticationを確認するとユーザーが登録されています!おわりお疲れさまでした!ほぼ完成です。あとはソーシャルログインを実装するためにfirebaseにそれぞれのプロバイダーapiキーなどを登録するだけです。今回はダイアログの表示とログイン状態による表示の切り替えが主でした。material-uiを使えば簡単に実装できます。次回でログインフォームは完成です。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。独学で3DCGを習得して現在フリーランスTAとして活動中。ポートフォリオはこちらこのブログでは独学や3DCG、プログラミングについて書いていきます。Harkerblog。