[React + Firebase Authentication]（前編）reactプロジェクトの作成とfirebaseの初期設定

1 はじめに
- 1.1 今回使用した環境
2 事前準備
- 2.1 Node.js
- 2.2 yarn
3 Reactプロジェクトの準備
4 firebaseの初期設定

はじめに

こんにちは！新卒エンジニアの佐々木千奈です！

新卒として学習のため、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); });

主な変更点は以下の通りです。