■目次

Firebase Authenticationとは

https://www.youtube.com/watch?v=PNvLGoop8z8&list=PLX8Rsrpnn3IWavNOj3n4Vypzwb3q1RXhr&index=12

• OAuth認証(オーオウス認証)：TwitterやFacebook、Instagramなど各SNSでログインできる方法のこと

1. コンソールからAuthenticationを設定する

<aside> ⚠️ Firebaseの初回デプロイまでやってから以下を進めよう！

やっていなかった場合は以下を参考にやっておこう！

プロジェクトの作成〜初回デプロイまで【TypeScript対応】

</aside>

1. Firebaseから以前デプロイした該当プロジェクトページを開く

2. サイドバーの「構築」をクリックし、展開したメニュー一覧から「Authentication」をクリックする

   

3. 以下画面が表示されたら「ログイン方法を設定」をクリック

   他の画面が表示されたら、おそらく上部に「始める」ボタンがあるはずなので、それをクリック

   

4. 以下から実装したいログイン方法を選択し、次に表示される画面で「有効にする」ボタンにチェックを入れて「保存」ボタンをクリックする

   ※ 今回は「メール/パスワード」で実装を進めていく

   

   

5. 保存が完了すると以下のような画面になる

   他のログイン方法も追加したい場合は、右上にある「新しいプロバイダを追加」ボタンをクリックすれば、4. と同じ画面が表示されて追加できるようになる

   

6. 設定完了！

2. Firebase用の設定ファイルを作る

1. Firebaseのサイドバー上にある歯車マークをクリックし、展開される一覧から「プロジェクトの設定」をクリックする

   

2. スクロールすると「マイアプリ」が表示されるはず

   その中にある「SDKの設定と構成」からラジオボタン「Config（または構成）」にチェックを入れる

   表示されたコードをコピーする

   

3. VSCodeで該当プロジェクトを開き、srcディレクトリ内に「firebase」ディレクトリ（フォルダ）を作成する

   その中にconfig.js（config.ts）を作成する

   

   

4. 作成したconfig.js（config.ts）に、先ほどコピーしたコードを貼り付け、exportしておく

   

   src/firebase/config.js

   <aside> 🌿 GitHubをトリガーとしてFirebaseにデプロイしない場合は、.gitignoreにconfig.jsを追加しておくこと！ ▼.gitignore

   # firebase config
   /src/firebase/config.js
   

   または.envに各値を格納し、firebaseConfigの各値を差し替えてもOK！

   </aside>

5. firebaseディレクトリ内に、エントリポイント用としてindex.js（index.ts）を作成する

   

6. 作成したindex.jsに、今回使用するfirebaseパッケージと、先ほどexportしたfirebaseConfigをimportしていく　※TypeScriptも同じでOK！

   ▼コピペ用

   import { initializeApp } from "firebase/app";
   import { getAuth } from "firebase/auth";
   import { getFirestore, Timestamp } from "firebase/firestore/lite";
   import { getStorage } from "firebase/storage";
   import { getFunctions } from "firebase/functions";
   import { firebaseConfig } from "./config";