Firebase + Reactでログイン②Reactプロジェクト作成

2020年6月10日2021年4月26日

①Firebaseの設定
②Reactプロジェクト作成 ← 今ここ
③認証のためのユーザ登録の実装
④認証(ログイン・ログアウト)＆ユーザ削除

前回の①Firebaseの設定からの続きをしていきたいと思います。

こちらではReactのプロジェクトの作成＆前準備をしていきます。

Reactプロジェクト作成

コマンド(ターミナル)での操作をしていきます。

任意のディレクトリに移動して、プロジェクトを作成します。
今回は「login-app」という名前で作成していきます。

create-react-app login-app

「Succes!」が表示されたらプロジェクトができていると思いますので、
作成したディレクトリへ移動します。

cd !$

実装に必要なパッケージを使用するために
コマンドにて yarn add します。

yarn add firebase react-router react-router-dom

ファイル構成

以下のようなファイル構成になります。
※編集するものだけを載せています。

login-app
 ├── .env
 └── src
      ├── auth
           ├── AuthProvider.js
           ├── Login.jsx
           ├── PrivateRoute.js
           └── SignUp.jsx
      ├── components
           └── Home.jsx
      ├── reducers
           ├── index.js
           └── memo.js  
      ├── App.js
      ├── base.js
      ├── index.js  
      └── serviceWorker.js

このファイル構成をコマンドで作成します。
※コマンドを実行する場所はlogin-appを想定しています。
(流れに沿ってコマンド実行していれば、現在の場所はlogin-appだと思います。)

touch .env
cd src
mkdir auth components reducers
touch base.js components/Home.jsx
touch reducers/index.js reducers/memo.js
cd auth
touch AuthProvider.js PrivateRoute.js
touch Login.jsx SignUp.jsx
cd ../

ReactアプリとFirebaseを繋ぐ

.env

.envファイルを編集します。
Firebaseでアプリを作成時の、メモしたものをお使いください。

REACT_APP_FIREBASE_KEY="firebase_api_key"
REACT_APP_FIREBASE_DOMAIN="login-project-xxxxxxx.firebaseapp.com"
REACT_APP_FIREBASE_DATABASE="https://login-project-xxxxxxx.firebaseio.com"
REACT_APP_FIREBASE_PROJECT_ID="login-project-xxxxxxx"
REACT_APP_FIREBASE_STORAGE_BUCKET="login-project-xxxxxxx.appspot.com"
REACT_APP_FIREBASE_SENDER_ID="123412341234"

src/base.js

src/base.jsを編集します。

import firebase from 'firebase/app';
import 'firebase/auth';

export const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID
});