🔓

React + Firebase v9(react-router-dom-v6) でログイン実装

2022/07/14に公開

Firebase (mail&google)

認証のためのFirebaseの学習について学んだことを記録します。

firebaseを使えるようになる。

メールアドレスとパスワードによるユーザー登録・ログインとgoogleにログインを行いたい。

上記の記事&それに続く記事を参考にページの枠組みとメールアドレスによるユーザー登録、ログインを実装

作成したページ
- Loginページ（メールアドレスログインとGoogleログイン）
- Signupページ（ユーザーの登録を行う）
- Homeページ（ログインしているユーザーが表示できる）
- NotFoundページ

さらに以下の記事のgoogleログインの関数を参考にgoogleによるログイン機能を追加

↓ gitこちら

ログインしていないユーザーに対してはLogin画面にリダイレクトする方法を用いたが、これはアクセス制限の方法としては適切なんだろうか。
エラー “You should call navigate() in a React.useEffect(), not when your component is first rendered.”
- 参考サイト https://stackoverflow.com/questions/70165718/you-should-call-navigate-in-a-react-useeffect-not-when-your-component-is-fi
- useEffectについての注意? useEffectへの理解が甘く何が問題かわからない。
アカウント情報もとに権限を切り替える機能の実装どうする?
- ページにログインしているユーザーを出力してみる?
- 特定のユーザーしかログインできないページを作成?
MUI使っていたけど書き方きちんと理解できていたわけではないので使用した方法まとめる
firebaseの関数使ったときerrorに何か文章入るかもしれないっぽい?そこを確認する。