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

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

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

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

Authentication をクリックします。

image2

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

image3

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

image4

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

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

image5

設定が完了しました。

image6

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

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

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をインポートします。

import { getAuth } from "firebase/auth"

getAuthfirebaseを指定し、エクスポートします。

const fireauth = getAuth(firebase)

export const firebaseApp = {
  fireauth,
}

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

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 を作成します。

export const useSignup = () => {}

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

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

firebaseauthを設定します。

const fireauth = firebaseApp.fireauth

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

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

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

import { createUserWithEmailAndPassword } from "firebase/auth

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

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

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

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

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

signupを返す様にします。

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 をインポートしましょう。

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

useSignupsignupを指定します。

const { signup } = useSignup()

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

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

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

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

image7

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

image8

Console に表示されました。

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

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

image9

image10

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

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

ブログ一覧