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

★★★ イベント情報 ★★★
◇【参加登録受付中】Kong Summit, Japan 2022◇
今年は12月15日に開催決定!最新情報とデモとともにKongと事例/ユースケースのご紹介などAPIエコノミーやマイクロサービスに関心のある開発者の方にとっては必見です。ぜひお申し込みください!イベントの詳細・お申込はこちら

★★★ Live配信告知 ★★★
◇11月29日開催 19:00~ 世界一わかりみの深いクラウドネイティブon Azure◇
テーマは「Web App for ContainersとKeycloakで最速OpenID Connect」です!

◇11月30日開催 17:00〜 知ってると ちょっと便利なコマンド集◇
知っていると少し効率の上がるようなコマンドをいくつかご紹介します!

はじめに

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

新卒として学習のため、3人チームでwebアプリの開発を行わせて頂いています。

開発中、ログイン機能を実装するために学習したことを共有します!

“Firebase Authentication”は、Googleが運営するサービスで、ユーザー認証機能を提供し、ユーザ情報をクラウドで保存することができます。

この記事では、前編と後編に分けてReact + Firebase Authentication を利用してログイン機能を実装する方法をご共有します。

firebaseを使って簡単に認証機能を実装してみたい方は必見です!

firebase v8→v9 と react-router-dom v5 → v6 で記法が変わっている点で苦労したので、そのあたりも参考になるかもしれません。

今回使用した環境

  • 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の設定は完了です。お疲れ様でした。

次回の記事では、いよいよ認証機能を実装していきます!

こちらもぜひご覧ください!





ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!


ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる