CATEGORY

Firebase

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

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

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を使ってサインイン(ログイン)機能を実装し、Reduxを使いユーザーのログイン状況(State)を管理する方法が一般的ですが、コードは長く複雑になります。Firebaseとreact-firebase-hooksというカスタムフッ […]

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

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