目次
はじめに
こんにちは!新卒エンジニアの佐々木千奈です!
新卒として学習のため、3人チームでwebアプリの開発を行わせて頂いています。
開発中、ログイン機能を実装するために学習したことを共有します!
“Firebase Authentication”は、Googleが運営するサービスで、ユーザー認証機能を提供し、ユーザ情報をクラウドで保存することができます。
この記事では、前編と後編に分けてReact + Firebase Authentication を利用してログイン機能を実装する方法をご共有します。
firebaseを使って簡単に認証機能を実装してみたい方は必見です!
firebase v8→v9 と react-router-dom v5 → v6 で記法が変わっている点で苦労したので、そのあたりも参考になるかもしれません。
- [React + Firebase Authentication](前編)reactプロジェクトの作成とfirebaseの初期設定
↑ 今回はこちら - [React + Firebase Authentication](後編)ワンクリックログイン機能とルーティングの設定
今回使用した環境
- node.js v16.15.0
- yarn v1.22.19
- React v18.2.0
- TypeScript
- firebase v9.10.0
- react-router-dom v6.4.1
- recoil v0.7.5
事前準備
今回はjs環境にNode.js、パッケージマネージャーにyarnを利用するため、インストールの確認を行います。
Node.js
下記コマンドでNode.jsがインストールされているか確認します。
$ node -v v16.15.0
インストールされていた場合はバージョン情報が表示されます。まだインストールされていない場合は公式ドキュメントを参照し、こちらからインストールしてください。
yarn
下記コマンドでyarnがインストールされているか確認します。
$ yarn -v 1.22.19
インストールされていた場合はバージョン情報が表示されます。まだインストールされていない場合は公式ドキュメントを参照し、インストールしてください。
Reactプロジェクトの準備
今回はyarnでReact+TypeScriptの環境を作成しました。npmの場合は少しコマンドが違うので注意してください。
プロジェクトの名前は”react-firebase-auth-sample”としました。
React+TypeScriptアプリのひな型を作成
$ yarn create react-app --template typescript react-firebase-auth-sample
環境の作成が完了したらディレクトリを移動
$ cd react-firebase-auth-sample
必要なパッケージのインストール
$ yarn add firebase react-router-dom @types/react-router-dom recoil
プロジェクトの開始
$ yarn start
firebaseの初期設定
ユーザーの登録
Firebase Authenticationの機能を利用する前にFirebaseでユーザーアカウント登録を行う必要があります。こちらから事前にユーザー登録を行ってください。また、今回のプロジェクトは無料のSparkプランのみで十分なため、料金はかかりません。
プロジェクトの作成
Firebaseのアカウントを取得してFirebaseにアクセスすると以下の画面が表示されます。”使ってみる”ボタンをクリックしてコンソールへ移動してください。
Create a projectをクリックしてプロジェクトの作成を行ってください。
プロジェクト名の設定を行います。ここでは”react-firebase-auth”という名前を付けました。
アナリティクスの設定を行います。ここではoffにして”プロジェクトを作成”をクリック、そして次へ進みます。
ページ遷移するとプロジェクトの作成画面が表示されます。以下の表示になれば終了です。”続行”を押してプロジェクトの概要ページへ移動してください。
アプリの追加
以下のようなプロジェクトの概要画面が表示されます。ReactからFirebaseに接続するための認証情報が必要になるため、アプリの追加を行います。今回はWebアプリのため、下の図で赤枠で囲っている”ウェブ”を選択し設定を行います。
ウェブアプリにFIrebaseを追加します。アプリのニックネームを入力し、”アプリを登録”をクリックします。
Firebase SDKの設定
先ほどの画面で表示されている情報はreactで環境変数として利用するためReactプロジェクトフォルダの直下に”.env.local”ファイルを作成して設定を行います。Reactでの環境変数についての詳細が気になる方はをご覧ください。
.env.local
Reactプロジェクトでは環境変数の設定で先頭にREACT_APP_をつける必要があります。
以下ように.env.localファイルに設定を行います。以下の値はダミーのため、必ず先ほどのページに記載されているご自身の取得した値を設定してください。
REACT_APP_FIREBASE_API_KEY=”project-api-key" REACT_APP_FIREBASE_AUTH_DOMAIN="project.firebaseapp.com" REACT_APP_FIREBASE_PROJECT_ID="react-firebase-auth-ooooo" REACT_APP_FIREBASE_STORAGE_BUCKET="[react-firebase-auth-ooooo.appspot.com](http://react-firebase-auth-ooooo.appspot.com/)" REACT_APP_FIREBASE_MESSAGE_SENDER_ID="10551793939" REACT_APP_FIREBASE_APP_ID="1:1055170818016:web:67b4fd678909798"
firebase.jsの作成
環境変数の設定が完了したらFirebase接続のための設定ファイルfirebase.jsをsrcフォルダの下に作成します。firebase v9 では以下のコードをコピペで利用できます。.env.localファイルの環境変数をprocess.env.環境変数名で取得して利用しています。
// firebase.js import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; const firebaseConfig = { apiKey: process.env.REACT_APP_FIREBASE_API_KEY, authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN, projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID, storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID, appId: process.env.REACT_APP_FIREBASE_SENDER_ID, }; initializeApp(firebaseConfig); export const fireauth = getAuth();
※v8 → v9 の変更点
v8 → v9 の主な目的は”必要なものだけをインポート”するアプローチを提供する”ことで、そのため一部の記法が変更されています。(v8との互換性に関して気になる方はCompatを調べてみてください。)
v8では
// 8.8.1 import firebase from 'firebase/app'; import 'firebase/auth'; const firebaseApp = firebase.initializeApp({ /* config */ }); const auth = firebaseApp.auth(); auth.onAuthStateChanged(user => { console.log(user); });
のように書いていた処理をv9では以下のように記載します。
import { initializeApp } from 'firebase/app'; import { getAuth, onAuthStateChanged } from 'firebase/auth'; const firebaseApp = initializeApp({ /* config */ }); const auth = getAuth(); onAuthStateChanged(auth, user => { console.log(user); });
主な変更点は以下の通りです。
- import時は関数単位でimportすること
- 関数実行時のauthからのオプショナルチェイニングがなくなり、authを第一引数にとる
プロバイダの追加
firebaseコンソールのAuthenticationをクリック
Authenticationのページで”始める”ボタンをクリック
“ログイン方法の追加”で、今回はgoogleによるワンクリックログインを行いたいため、googleプロバイダを選択します。
メールアドレスを選択し”保存”ボタンをクリックします。
ログインプロバイダに”Google”が追加されていることを確認してください。
ここまででfirebaseの設定は完了です。お疲れ様でした。
次回の記事では、いよいよ認証機能を実装していきます!
こちらもぜひご覧ください!