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

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
【6/19開催】Kong Community Japan Meetup #4
本イベントでは、Kong Inc. のVP of ProductであるReza Shafii氏もプレゼンターとして参加。当社からはアーキテクト マネージャーの槌野の登壇が決定!参加無料です!!
https://column.api-ecosystem.sios.jp/connect/kong/1081/

【6/21開催】開発者目線でのSBOMとの向き合い方
SBOMの導入から開発者がSBOMの作成・管理を自動で行っていくための方法(デモ)を紹介します。SBOMを全く知らない人から、開発との統合までを紹介するので様々なレベルの方に学びがあるライブとなる予定です!
https://tech-lab.connpass.com/event/321422/

【7/19開催】現場で役立つAzure神小技10+α 〜生成AI,RAG,コスト削減など旬な技術満載のLT大会〜
Azureの最新技術や実用的な小技を紹介する特別なライトニングトーク大会を開催します!
https://tech-lab.connpass.com/event/319077/

【7/26開催】最適なIaCツールを選ぼう
プロジェクトでのツール選びに困らないための重要な観点をご説明します!
https://tech-lab.connpass.com/event/319532/

はじめに

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

新卒として学習のため、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の設定は完了です。お疲れ様でした。

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

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

アバター画像
About tina 12 Articles
高専専攻科情報系学科卒業後、2022年にサイオステクノロジーに入社。入社後は、フロントエンド、インフラなどを学習してGrafana plugin開発に携わり、その後も学習をしながら日々業務に奮闘中。
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

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

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


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



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

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる