masalibの日記

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

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ができたと思います。