【JS × Firebase】"Auth/network-request-failed"が地味ハマリポイントだった

これは何？

Next.js(App Router)のアプリケーションで、Firebaseを使ったログイン機能をつけようとして出たエラーへの対応ログです。

Next.jsでFirebaseを利用する手法については直接扱わないのですが、以下の記事がとても参考になりましたので、紹介しておきます😚

• 【Next.js】NextAuth×Firebaseで認証管理 in appディレクトリ

エラー出現

以下のような実装でログインフォームを作って、Firebaseで認証をしようとしたある日のこと。

1'use client';
2import React from 'react';
3import { signInWithEmailAndPassword } from 'firebase/auth';
4
5import { auth } from '@/firebase/client';
6
7const LoginForm = (): React.ReactElement => {
8  const [email, setEmail] = React.useState('');
9  const [password, setPassword] = React.useState('');
10
11  const handleLogin = async (): Promise<void> => {
12    await signInWithEmailAndPassword(auth, email, password)
13      .then((userCredential) => {
14        const user = userCredential.user;
15
16        // ログインができたかどうかを簡単に示す
17        alert('ログインOK!');
18      })
19      .catch((error) => {
20        console.log(error);
21      });
22  };
23
24  return (
25    <>
26      <form>
27        <input
28          type="text"
29          id="sign-in-email"
30          onChange={(e) => {
31            setEmail(e.target.value);
32          }}
33          placeholder="Your email"
34        />
35        <input
36          type="password"
37          id="sign-in-email"
38          onChange={(e) => {
39            setPassword(e.target.value);
40          }}
41          placeholder="Your password"
42        />
43        <button
44          onClick={handleLogin}
45          type="submit"
46        >
47          Login
48        </button>
49      </form>
50    </>
51  );
52};
53
54export default LoginForm;
55

ログインできるはずのemail & passwordを入力してLoginボタンを押すと、firebaseと通信するためのAPI_KEYの設定が正しいはずなのに"network-request-failed"に。

真実はシンプルだった

色々調べた結果、↑は「"素のformタグ"を使っていたから」ということがわかりました。

というのもこの実装では、formタグで囲ったLoginボタンを押すとページの更新が走ってしまうために、せっかくbuttonのonClickで処理しようとしていたfirebaseでの認証処理が中断されてエラーが発生していたのです。

ということで、私は囲っているformタグを削除してエラー解消に成功しました。

ちなみにこのエラーは「認証の処理中にページの更新が走った」ことが本質的な原因ですが、handleLoginをformタグのonSubmitで呼び出すことでは回避できませんでした。多分非同期処理を書いた関数をawaitつけずに呼んでるからだとおもう。

参考

• Firebase Project Results in "Auth/network-request-failed" error on login - Stack Overflow