【React】Firebase × Recoil を使った認証機能の実装方法 - Qiita

概要 Firebase AuthenticationとRecoilを使った、ユーザー認証部分の処理を紹介します。 状態管理ライブラリにRecoilを使うことで、redux tool kitやuseContextを使うよりもシンプルに実装することができます。 環境 windows10 VSCode npm アーキテクチャ コンポーネントは、3つあります。 App.tsx：起点となるコンポーネント Auth.tsx：認証を行うコンポーネント Main.tsx：ログインしたユーザーが閲覧できるコンポーネント 処理の流れ ① アプリケーションを起動したときにまずApp.tsxが呼ばれます。ログアウト状態から始まるので、Auth.tsxへ遷移します。 ② Firebase Authに登録しているユーザーを使って、ログインします。 ③ Firebase Authのログイン状態をオブザーバーで監視します