Firebase

Firebase認証とfirestoreの連携 – React

本稿では、firebaseで認証を経たユーザーの情報を、同じid（キー）を使ってfirestoreにも保存する方法をReactでご紹介します。firebaseの認証機能で保存できるユーザーの情報は、パスワードとidを除くと、ユーザー名、メールアドレス、photoURLに限られるので、それ以上のユーザーに紐づく情報を保存しようとするためにfirestoreを使用します。以下、firebase aut […]

メールとパスワードによるユーザー認証の実装方法 – Firebase + React

Firebase上のAuthenticationには様々な方法が提供されていますが、本稿では比較的簡単なメールとパスワードによるユーザー認証（サインアップ・ログイン）の方法をご紹介します。ユーザー認証にFirebaseを使うメリットとしては、（１）バックエンドサーバとdbの構築が不要、（２）React側で特別なグローバルな状態管理をせずともユーザーのログイン状態をグローバルに保持できる、（３）ユー […]

Facebook認証の実装方法 – Firebase + React

Firebase上のAuthenticationには様々な方法が提供されていますが、本稿ではやや設定の面倒なFacebook認証の方法をご紹介します。Webアプリを前提に、フロントエンドはReact（Next.jsでも可）を使用します。Facebook認証はgmail認証やgithub認証との比較では使用要件が厳しく、認証の設定のためには下記4点が済んでいることが前提になります。 Firebase […]

React + Firestore【入門から実装まで】

本稿ではFirestoreの概要、NoSQLデータベースの構造、Firestoreの初期設定、Reactの初期設定、書き込み、react-firebase-hooks（useCollection、useDocument）を使った読み込み方法（実装方法）まで丁寧に解説しています。書き込みはweb Version 8での記法と、2021年8月に正式リリースされたより新しいweb Version 9での […]

React + Firebaseを使ったユーザー認証の実装方法

React又はNext.jsでFirebaseを使ったユーザー認証（Authentication）をするためには、認証の後に、UseEffectとonAuthStateChangedを使ってサインアップ（及びログイン）状態を管理する方法が考えられますが、コードはやや複雑になります。Firebaseとreact-firebase-hooksというカスタムフックを使うことで、ユーザーの状態管理をずっと […]

FirebaseでWebアプリをデプロイする方法

今日はGoogleが開発・運営するFirebase上で、Hostingという機能を使って、ReactのWebアプリ又はWebサイトをデプロイする方法をご紹介します。FirebaseはGoogle Cloud Platform（GCP）上で動く多機能なWebサーバ（大部分が無料）で、他にもリアルタイムデータベース（Could Firestore）、認証機能（Firebase Authenticati […]