Firebase

【Firebase】Authenticationで、パスワードリセットを実装する

作成日：2022年02月15日

更新日：2022年02月16日

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

【Firebase】認証されているユーザーのみ、Firebaseを使えるようにする

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

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

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

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

  return { passwordReset };
};

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

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

  const passwordReset = () => {};

  return { passwordReset };
};

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

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

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

sendPasswordResetEmailにfirebaseのfireauthと先程認証情報で取得した、userのemailを指定します。

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

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

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

usePasswordResetのpsasswordResetを使います。

jsx
const { passwordReset } = usePasswordReset();

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

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

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

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

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

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

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

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

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

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

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

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

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

Console を確認すると、

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

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

Console を確認すると、

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

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

【Firebase】Storageで保存した画像をブラウザに表示する

お知らせ

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

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

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

【Firebase】Authenticationで、パスワードリセットを実装する

お知らせ

カテゴリ

最新順

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

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

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

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

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