masalibの日記

システム開発、運用と猫の写真ブログです

React Firebase入門 メールアドレスとパスワード変更

普通はしないのですが、パスワードが流出したみたいな事(笑)があったら必要な機能なので作ります。 あとメールアドレスの変更も実装するのですが、これっているの?ガラゲー時代と違ってあまり変更がないと思うだけど・・・

React Firebase入門シリーズ
1-1・ React Firebase入門 初期設定とsignup - masalibの日記
1-2・ 「react-hook-form」を入れてみた - masalibの日記
1-3・ React Firebase入門 signupの通信エラー対応 - masalibの日記
2・ React Firebase入門 ログイン処理 - masalibの日記
3・ React Firebase入門 ログイン認証とログアウト処理 - masalibの日記
4・ React Firebase入門 パスワード初期化処理 - masalibの日記
5・ React Firebase入門 メールアドレスの有効化 - masalibの日記
6・React Firebase入門 メールアドレスとパスワード変更 今ここ

続きを読む

React Firebase入門 メールアドレスの有効化

メールアドレスのフォーマットはチェックできてもメールアドレスが本当に存在しているのかは実際にメールを送らないとわかりません。Firebaseではメールを送る事でメールアドレスを有効化する事ができます。

React Firebase入門シリーズ
1-1・ React Firebase入門 初期設定とsignup - masalibの日記
1-2・ 「react-hook-form」を入れてみた - masalibの日記
1-3・ React Firebase入門 signupの通信エラー対応 - masalibの日記
2・ React Firebase入門 ログイン処理 - masalibの日記
3・ React Firebase入門 ログイン認証とログアウト処理 - masalibの日記
4・ React Firebase入門 パスワード初期化処理 - masalibの日記
5・React Firebase入門 メールアドレスの有効化 今ここ

続きを読む

React Firebase入門 パスワード初期化処理

認証システムでは当たり前のようにある機能のパスワード初期化処理を作りました。

React Firebase入門シリーズ
1-1・ React Firebase入門 初期設定とsignup - masalibの日記
1-2・ 「react-hook-form」を入れてみた - masalibの日記
1-3・ React Firebase入門 signupの通信エラー対応 - masalibの日記
2・ React Firebase入門 ログイン処理 - masalibの日記
3・ React Firebase入門 ログイン認証とログアウト処理 - masalibの日記
4・React Firebase入門 パスワード初期化処理 今ここ

続きを読む

Firebase Emulator Suiteをインストールして使ってみた

2020/11/10ぐらいに

https://nabettu.com/9359dcae953248e0b001046b0b49459c#564fcbff2af149d2ac16dc1962a61f3f

という記事で下記の記載があった

Introducing the Authentication emulator for rapid iteration and local development Authがエミュレータで使えるようになったやつ。これでログインしたり何だり〜の流れのテストもローカルで完結するようになりました

実際にFirebaseを使っていると告知があったのインストールしてみた

続きを読む

React Firebase入門 ログイン認証とログアウト処理

ログインができたのでログイン認証とログアウト処理を作りたいと思います。

React Firebase入門シリーズ
1-1・ React Firebase入門 初期設定とsignup - masalibの日記
1-2・ 「react-hook-form」を入れてみた - masalibの日記
1-3・ React Firebase入門 signupの通信エラー対応 - masalibの日記
2・ https://masalib.hatenablog.com/entry/2020/11/27/000000
3・React Firebase入門 ログイン認証とログアウト処理 今ここ

続きを読む

React Firebase入門 ログイン処理

SignUpができたのでログイン処理を作りたいと思います。

React Firebase入門シリーズ
1-1・ React Firebase入門 初期設定とsignup - masalibの日記
1-2・ 「react-hook-form」を入れてみた - masalibの日記
1-3・ React Firebase入門 signupの通信エラー対応 - masalibの日記
2・React Firebase入門 ログイン処理 今ここ

続きを読む

React Firebase入門 signupの通信エラー対応

サインアップのバリデーションができたのですが、通信中にエラーになるなど様々なエラーがあります。 現在はそららをすべてtry-catchで逃げています。

そちらを対応したいと思います

参考にしたのは公式 https://firebase.google.com/docs/reference/js/firebase.auth.AuthError?authuser=1
https://firebase.google.com/docs/reference/js/firebase.auth.Error?authuser=1

参考にした記事は
https://qiita.com/Yamamoto0525/items/054b28e8b34135399237

サインアップ時のエラーについて

サインアップ時のエラーレスポンス

エラーコード 概要
auth/email-already-in-use メールアドレスがすでに使用されている
auth/invalid-email メールアドレスの形式が正しくない
auth/weak-password パスワードが弱すぎる
auth/network-request-failed 通信エラーまたはタイムアウト

上記、以外は想定外のエラーとしています。 参考にした記事だと「auth/operation-not-allowed」があったが・・・これをユーザーに見せてもね〜・・・ また「auth/invalid-email」および「auth/weak-password」は 通信に行く前のバリデーションで弾いています。 想定外の事がありえるので念のために設定しました

実際の修正内容は以下です

   async function handleSignup (data) {  //react-hook-formを導入したためevent -> dataに変更
        //event.preventDefault()      //react-hook-formを導入したため削除

        try {
            setError("")
            setSuccessMessage("")
            //sing up ボタンの無効化
            dispatch({
                type: "setIsButtonDisabled",
                payload: true
            });

            await signup(state.username, state.passwordconfirm)
            dispatch({
                type: "signupSuccess",
                payload: "Signup Successfully"
            });

            //sing up ボタンの有効化
            dispatch({
                type: "setIsButtonDisabled",
                payload: false
            });
            setSuccessMessage("アカウントの作成に成功しました")

        } catch (e){
            //エラーのメッセージの表示
+             switch (e.code) {
+                 case "auth/network-request-failed":
+                     setError("通信がエラーになったのか、またはタイムアウトになりました。通信環境がいい所で再度やり直してください。");
+                     break;
+                 case "auth/weak-password":  //バリデーションでいかないようにするので、基本的にはこのコードはこない
+                     setError("パスワードが短すぎます。6文字以上を入力してください。");
+                     break;
+                 case "auth/invalid-email":  //バリデーションでいかないようにするので、基本的にはこのコードはこない
+                     setError("メールアドレスが正しくありません");
+                     break;
+                 case "auth/email-already-in-use":
+                     setError("メールアドレスがすでに使用されています。ログインするか別のメールアドレスで作成してください");
+                     break;
+                 default:  //想定外
+                     setError("アカウントの作成に失敗しました。通信環境がいい所で再度やり直してください。");
+             }
-             //dispatch({
-             //    type: "signupFailed",
-             //    payload: "Incorrect username or password"
-             //});
            //sing up ボタンの有効化
            dispatch({
                type: "setIsButtonDisabled",
                payload: false
            });
            
        }
    };

ちょっと脱線しましたがやっと signupができたと思います。