FirebaseとReactで認証付きアプリのサンプルを実行するまで

画像出典：firebase

現在FirebaseでWebアプリを作っています。アプリを作る上でユーザー認証は欠かせないものの、作るのが大変ということが多いですが、Firebaseを使うと簡単に実装することができました。

私はWebアプリを作る上でReactを使うことが多いので、今回はFirebaseとReactでユーザー認証を行うサンプルアプリを実行して、Firebaseでホスティングしてみました。

今回参考にしたサンプルはこちらです。

rwieruch/react-firebase-authentication

Firebaseにプロジェクトを登録する

まずはFirebaseのコンソールから、プロジェクトを登録します。

プロジェクト登録

アプリを設定する

プロジェクトを登録したらログインの設定を行います。

サイドメニューのAuthenticationから、メールアドレスによるログインを有効にします。

メールアドレスログイン


メールアドレスログイン

Firebaseコマンドラインツールのインストール

Firebaseにアプリをデプロイするには、Firebaseコマンドラインツールをインストールする必要があります。

npmパッケージで提供されているので、npmでインストールします。

npm intall -g firebase-tools

その後ターミナルから以下のコマンドを実行します。

firebase login

cd /path/to/project/directory // プロジェクトディレクトリに移動

firebase init

firebase initを実行すると、使用する機能やプロジェクトを聞かれるので該当するものを選択します。

firebaseの機能

この場合は、Firestore,Hosting,Storageを有効にしてみました。

また途中で、 What do you want to use as your public directory?と聞かれるので、Reactアプリに合わせるためにbuildに変更してください。

プロジェクトを作成した後も、firebase.jsonを修正すれば変更可能です。

initが終了したら、試しにdeployしてみます。

firebase deploy

これでデフォルトのページがデプロイされました。

サンプルアプリを実行する

認証用のサンプルアプリをダウンロードします。

rwieruch/react-firebase-authentication

ダウンロードしたら、

package.json
public
src

をコピーします。

プロジェクト

その後npmパッケージをインストールします。

npm install

インストール後は、src/firebase/firebase.jsの中のconfigを自分のプロジェクトのものに変更します。 prodとdevが定義されていますが、一旦同じものを入れました。

configは、Firebaseのコンソールのトップ、ウェブアプリにFirebaseを追加から表示することができます。

ウェブアプリにFirebaseを追加

設定を書き換えたら、アプリをビルドしてfirebaseにデプロイします。

npm run build
firebase deploy

以上で、サンプルアプリがFirebaseにデプロイされました。

デプロイ後以下のようなページが表示されていれば成功です。

サンプル

サインアップページからユーザー登録をすると、Firebaseのユーザーが追加されます。

エンジニアリング Firebase React JavaScript

関連記事