Firebase

【Firebase】Authenticationでユーザー登録する

作成日：2022年02月10日

更新日：2022年02月11日

前回は、ブラウザで Firestore Databese のデータを更新しました。

【Firebase】ブラウザでFirestore Databeseのデータを更新する

今回は、認証機能を設定するために、Authentication でユーザー登録します。

まずは、Firebase で Authentication を始めます。

Firebase にアクセスし、プロジェクトを選択します。

Authentication をクリックします。

『始める』をクリックします。

今回は、『メール/パスワード』を選択します。

メール/パスワードを有効にします。

『保存』をクリックしましょう。

設定が完了しました。

次に、実際開発しているプロジェクトにメールアドレスとパスワードを登録する機能を作成します。

Signup.js を作成し、簡単なフォームを作成しましょう。

jsx
import React, { useState } from "react";

const Signup = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(email, password);
  };

  return (
    <div>
      <form onSubmit={handleSubmit} className="sign">
        <div>
          <label>Email: </label>
          <input
            required
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <div>
          <label>Password: </label>
          <input
            required
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <button type="submit" className="button">
          登録
        </button>
      </form>
    </div>
  );
};

export default Signup;

firebase を設定している firebaseConfig.js で Authentication を設定します。

firebase/authからgetAuthをインポートします。

jsx
import { getAuth } from "firebase/auth";

getAuthにfirebaseを指定し、エクスポートします。

jsx
const fireauth = getAuth(firebase);

export const firebaseApp = {
  fireauth,
};

firebaseConfig.js の全文は、以下の通りです。

jsx
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
};

const firebase = initializeApp(firebaseConfig);
const firestore = getFirestore(firebase);
const fireauth = getAuth(firebase);

export const firebaseApp = {
  firestore,
  fireauth,
};

Firebase の設定が完了したので、認証用のフックを作成します。

useAuth.js を作成します。

jsx
export const useSignup = () => {};

firebaseAppをインポートしましょう。

jsx
import { firebaseApp } from "../firebase/firebaseConfig";

firebaseauthを設定します。

jsx
const fireauth = firebaseApp.fireauth;

signup 関数を作成し、この中でメールアドレスとパスワードが登録できる様にします。

jsx
const signup = (email, password) => {};

認証を登録する機能を搭載するために、firebase/authからcreateUserWithEmailAndPasswordをインポートします。

jsx
import { createUserWithEmailAndPassword } from "firebase/auth

signup関数の中に、createUserWithEmailAndPasswordを設定します。

第一引数にfireauth、第二引数にemail、第三引数にpasswordを指定します。

jsx
const signup = (email, password) => {
  createUserWithEmailAndPassword(fireauth, email, password);
};

then/catchを設定しましょう。

jsx
const signup = (email, password) => {
  createUserWithEmailAndPassword(fireauth, email, password)
    .then((res) => {
      console.log(res.user);
    })
    .catch((err) => {
      console.log(err.message);
    });
};

signupを返す様にします。

jsx
export const useSignup = () => {
  const fireauth = firebaseApp.fireauth;

  const signup = (email, password) => {
    createUserWithEmailAndPassword(fireauth, email, password)
      .then((res) => {
        console.log(res.user);
      })
      .catch((err) => {
        console.log(err.message);
      });
  };

  return { signup };
};

Signup.js に戻り、useSignup をインポートしましょう。

jsx
import { useSignup } from "../hooks/useAuth";

useSignupのsignupを指定します。

jsx
const { signup } = useSignup();

handleSubmit内で、signupを設定します。

jsx
const handleSubmit = (e) => {
  e.preventDefault();
  signup(email, password);
};

一通り完成したので、実際に登録してみます。

※パスワードは、6 文字以上を設定します。

『登録』をクリックすると、

Console に表示されました。

Firebase の Authentication へ移動し、確認してみましょう。

『Users』タブをクリックします。

先程登録したメールアドレスが表示されました。

次回は、Authentication でログイン機能を実装します。

【Firebase】Authenticationでログイン機能を実装する

お知らせ

私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。

Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。

詳しくはこちら（Udemyの外部サイトへ遷移します）

【Firebase】Authenticationでユーザー登録する

お知らせ

カテゴリ

最新順

【React】Zustandで、簡単に状態管理する

【Ruby on Rails】登録フォームを作成し、データベースを保存する

【Ruby on Rails】ルーティングを設定する

【Ruby on Rails】データベースの内容をブラウザに表示する

【Ruby on Rails】rails consoleを使い、データベースを追加する