firebase React

ReactとFirebaseで新規登録機能の実装方法について

 

こんにちはnaoです。

今回はReactとFirebaseを使った認証について説明をしたいと思います。

Firebaseでは認証を簡単に

実現できるのですが、メールアドレスとパスワード以外に

Googleアカウントを利用した認証も行うことができます。

サクッとどんなことができるのかを見ていきましょう！

今回使用するライブラリのバージョンは↓

  • React 18.20
  • firebase 9.17.1
nao
さっそくやっていきましょう。

Reactのプロジェクト作成

macOS上でReactプロジェクトを作成するためにNode.jsのインストールが必要となります。

Node.jsインストールを行ってからReactプロジェクトの作成を行いましょう！

npx create-react-appコマンドを利用してReactのプロジェクトを作成します。

コマンドの後ろにはプロジェクト名を指定します。

プロジェクト名には任意の名前をつけましょう！

 command
npx create-react-app react-firebase

 

Firebaseの初期設定

Firebaseを使用するにはユーザアカウント登録を行う必要があります。

もしアカウントを持っていない場合は

Firabaseのページでユーザ登録を行なってください。

Googleのアカウントが必要となりますが

すぐにユーザ登録をすることができます。

次にプロジェクトの作成が必要となります。

画面右上にある”コンソールへ移動”ボタンをクリックしてください。

ここからプロジェクトを作っていきます。

1 プロジェクトの名前をつける画面が表示されるので任意の名前をつけてください。

2　次にGoogleアナリティクスの設定ですが、ON、OFFどちらでも大丈夫です。

続行をクリックすると、プロジェクトが作成されるのでしばらく待ちましょう。

3   プロジェクトの詳細画面に遷移するので、次はReactからFirebaseのサービスに接続するための

認証情報が必要になるので、プロジェクトの概要画面の左から3番目のボタンをクリックしてアプリの登録を行います。

4   アプリの登録を行うためニックネームの設定を行う必要があります。任意の名前をつけてください。

 

5 次にfirebaseに接続するための認証情報が出てくるのでコピーをしてメモ帳に貼りましょう。

 

この情報をReactプロジェクトのルートディレクトリに.envファイルに書き込みましょう。

 shortcode
REACT_APP_FIREBASE_API_KEY=
REACT_APP_FIREBASE_AUTH_DOMAIN=
REACT_APP_FIREBASE_PROJECT_ID=
REACT_APP_FIREBASE_STORAGE_BUCKET=
REACT_APP_FIREBASE_MESSAGE_SENDER_ID=
REACT_APP_FIREBASE_APP_ID=

次にFirebase接続のための設定ファイルfirebase.jsをsrcフォルダの下に作成します。

 

 firebase.js
import firebase from "firebase/compat/app";
import "firebase/compat/firestore";
import "firebase/compat/auth";
import "firebase/compat/storage";
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,
};
firebase.initializeApp(firebaseConfig);
export const provider = new firebase.auth.GoogleAuthProvider();
export const auth = firebase.auth();
export const db = firebase.firestore();
export const storage = firebase.storage();

 

firebaseに接続するために必要なfirebaseと認証に必要なfirebase/authをimportしています。

Reactにデフォルトから含まれているわけではないのでf、irebaseパッケージのインストールが必要なのでインストールしましょう。

 command
npm install --save firebase

 

Firebaseの認証の設定

 

Firebaseの認証の設定を行います。

プロジェクトの概要ページからAuthenticationをクリックしてください。

firebase authentication

 

Authenticationのページが表示されるので”始まる”ボタンをクリックしてください。

ログイン方法のプロバイダが色々と出てくるので

メールアドレスとパスワードをクリックしましょう。

詳細設定の画面に遷移するので「メール/パスワード」を「有効」にして

「保存」ボタンをクリックしましょう。

 

ユーザ登録画面の作成

ここからコードを書いていきましょう。

src配下にcomponentsフォルダを作成してSignUp.jsを作成します。

 SignUp.js
export const SignUp = () => {
return <h1>ユーザ登録画面</h1>;
};

次にApp.jsにSignUp.jsをimportしましょう。

 App.js
import { SignUp } from "./components/SignUp";
function App() {
return (
<div style={{ margin: "2em" }}>
<SignUp />
</div>
);
}
export default App;

 

ターミナルでnpm startコマンドを入力してサーバを立ち上げて

以下のような画面になっていれば大丈夫です。

 

再度SignUp.jsを編集します。

 

 SignUp.js
export const SignUp = () => {
const handleSubmit = (e) => {
e.preventDefault();
const { email, password } = e.target.elements;
console.log(email.value, password.value);
};
return (
<div>
<h1>ユーザ登録画面</h1>
<form onSubmit={handleSubmit}>
<div>
<label>メールアドレス</label>
<input name="email" type="email" placeholder="email" />
</div>
<div>
<label>パスワード</label>
<input name="password" type="password" />
</div>
<div>
<button>登録</button>
</div>
</form>
</div>
);
};

ユーザ登録フォームを作成しました。

登録ボタンをクリックするとhandleSubmit関数が実行され

e.preventDefault()でsubmitイベントのデフォルトの動作を停止しています。

const { email, password } = e.target.elements;では実際に入力した

情報を取得して、変数に代入しています。

ブラウザのconsoleで自分が入力した文字がconsoleに表示されているかを

確認しましょう。

Firebaseを用いてユーザ登録をする

ここからはfirebaseにユーザ情報を登録しましょう。

SignUp.jsを以下のようにしてください。

 SignUp.js
import { auth } from "../firebase";
export const SignUp = () => {
const handleSubmit = (e) => {
e.preventDefault();
const { email, password } = e.target.elements;
auth.createUserWithEmailAndPassword(email.value, password.value);
};
return (
<div>
<h1>ユーザ登録画面</h1>
<form onSubmit={handleSubmit}>
<div>
<label>メールアドレス</label>
<input name="email" type="email" placeholder="email" />
</div>
<div>
<label>パスワード</label>
<input name="password" type="password" />
</div>
<div>
<button>登録</button>
</div>
</form>
</div>
);
};

formで入力をしたemailとpasswordを

auth.createUserWithEmailAndPassword(email.value, password.value)で

送信しています。

これで新規登録をして、firebaseにユーザが登録されているか確認をしましょう。

まとめ

今回はReactとfirebase authenticationを使用して新規登録を実装しました。

メールアドレスとパスワード以外にもGoogleログインやTwitterログインも

あるので、機会があれば試していこうと思います！

ここまで見てくださりありがとうございました！

-firebase, React