前回は、Firestore Databese にルールを編集し、認証されてるユーザーのみ、Firebase を使えるようにしました。

今回は、Authentication で、パスワードの再設定ができるようにします。

まずは、useAuth.js に、usePasswordResetを作成します。

passwordResetを返す様にしましょう。

export const usePasswordReset = () => {
  const passwordReset = () => {}

  return { passwordReset }
}

getAuth から、認証情報を取得します。

export const usePasswordReset = () => {
  const auth = getAuth()
  const user = auth.currentUser

  const passwordReset = () => {}

  return { passwordReset }
}

パスワードリセットは、sendPasswordResetEmailを使います。

firebase/authからsendPasswordResetEmailをインポートしましょう。

import { signInWithEmailAndPassword } from "firebase/auth"

sendPasswordResetEmailfirebasefireauthと先程認証情報で取得した、useremailを指定します。

また、then/catch にメッセージを取得するようにします。

export const usePasswordReset = () => {
  const auth = getAuth()
  const user = auth.currentUser

  const passwordReset = () => {
    sendPasswordResetEmail(fireauth, user.email)
      .then(() => {
        console.log("Password reset email sent!")
      })
      .catch(err => {
        console.log(err.message)
      })
  }

  return { passwordReset }
}

App.js にusePasswordResetをインポートします。

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

usePasswordResetpsasswordResetを使います。

const { passwordReset } = usePasswordReset()

パスワードリセットボタンを作成します。

<button onClick={passwordReset} className="logout">
  パスワードリセット
</button>

では、パスワード再設定できるかどうか確認します。

image2

『パスワードリセット』ボタンをクリックし、Console を確認すると、

image3

成功した場合のメッセージが表示されました。

認証で使っているメールアドレスに、メールが届いているか確認します。

image4

メールが届いていました。

メールの中に記載されている、URL をクリックします。

image5

Reset your password 画面が表示されました。

新しいパスワードを入力し、『SAVE』ボタンをクリックします。

image6

パスワードの変更が成功した様です。

ブラウザでログインしてみましょう。

まずは、今まで使用していたパスワードを入力し、ログインしてみます。

Console を確認すると、

image7

パスワードが違います、というエラーメッセージが表示されました。

次に、変更したパスワードでログインしてみます。

Console を確認すると、

image8

ログインすることができました。

次回は、Firebase の Storage で保存した画像を画像をブラウザに表示します。

ブログ一覧