Firebase初心者がAuthでハマったエラー

FirebaseとNext.jsを使用してウェブアプリ開発（１）

暇な時間を使用して、FirebaseとNext.jsを使用してアプリ開発をしようかな？と思っています。アプリ開発は、まともにしたことないので、くだらないことを書いてるかもです。ここでは、開発していく中で、個人的にダルと感じたことをここにメモしておきます。

Firebase初心者がAuthでハマったエラー

今回は、FirebaseのAuthでハマったエラーをここに記載します。AIを使用しながら開発していくから、仕様書をしっかり読んでいなかったりする。から、今回はエラーがわからなかったって感じです。（AI検索で同じミスでたら引っかかれ）

エラー：Firebaseのメールアドレスとパスワードを使用した認証

Firebaseの公式の方でも使用方法が記載されており、誰でも簡単に使えるようになっています。それに従いつつ、AIを使いつつ、ログインページを作っていったのですが、ネットワークエラーで登録できない！？

FirebaseError: Firebase: Error (auth/network-request-failed)がずっと出てる。

• ネットワーク環境に問題がある？
• API KEYが違う？
• サーバーサイドからauthにアクセスしてる？
• Firebaseの承認済みアドレスに登録できてない？

解決策: ページのリロードを抑止

うーん、Formのリロードかよ...
エラーが出ていたCodeでは、e: React.FormEventとe.preventDefault()がないからページのリロードがされれるとのこと。

間違ったCode

const handleRegister = async () => {
  // フォーム送信のキャンセル処理がないため、自動的にページがリロードされる
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    console.log('登録成功', userCredential.user);
  } catch (error) {
    console.error('登録エラー', error);
  }
};

<form onSubmit={handleRegister}>
  <button type="submit">登録</button>
</form>

まぁ、追加すれば、うまくいった...

正しいCode

// フォームの onSubmit で呼び出す想定
const handleRegister = async (e: React.FormEvent) => {
  e.preventDefault();  // ← ここでページリロードを防ぐ
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    console.log('登録成功', userCredential.user);
  } catch (error) {
    console.error('登録エラー', error);
  }
};

<form onSubmit={handleRegister}>
  <button type="submit">登録</button>
</form>

つまり、

今回のミスは、フォーム送信時のデフォルト動作を抑止していなかったことにあります。
具体的には、<form> の中で登録処理を行う際に

const handleRegister = async () => { … }

のようにイベント引数を受け取らず、e.preventDefault() を呼び出していなかったため、ボタン押下時にブラウザがフォーム送信（＝ページリロード）を自動で実行してしまっていました。結果として、Firebase へのリクエストが途中でキャンセルされ、「ネットワークエラー」として扱われていたのです。

これを防ぐには、イベント引数を受け取って

const handleRegister = async (e: React.FormEvent) => {
  e.preventDefault();  // フォーム送信によるリロードを抑止
  …
}

とするか、ボタンに type="button" を付与してそもそも submit 動作を発生させないようにすれば、Firebase への通信が正常に完了するようになります。

ummm,,,以上