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