サインアップのバリデーションができたのですが、通信中にエラーになるなど様々なエラーがあります。 現在はそららをすべて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ができたと思います。