尝试在客户端使用 Firebase 身份验证服务注册用户时出错。 Firebase：错误（auth.network-request-failed）

Question

I am trying to do authentication and registration by email and password using the internal authentication system within Firebase and Vue3 on the client. I get the following error when I trying to register a user:

Firebase: Error (auth.network-request-failed).
POST http://localhost:9099/identitytoolkit.googleapis.com/v1/accounts:signUp?key=AndHereIsTheKeyFromFB.net::ERR_CONNECTION_REFUSED

Component with registration form:

<template>
  <p><input type="text" placeholder="Email" v-model="email" /></p>
  <p><input type="password" placeholder="Password" v-model="password" /></p>
  <p><button @click="register">Submit</button></p>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {getAuth, createUserWithEmailAndPassword} from "firebase/auth";

const auth = getAuth();

const email = ref('')
const password = ref('')
const router = useRouter()
const register = () => {
  createUserWithEmailAndPassword(auth, email.value, password.value)
      .then((data) => {
        console.log('Successfully logged in!');
      })
      .catch(error => {
        console.log(error.code)
        alert(error.message);
      });
}
</script>

main.js with firebase configurations:

const firebaseConfig = {
    apiKey: "key",
    authDomain: "authDomain",
    databaseURL: "dbUrl",
    projectId: "Id",
    storageBucket: "sB",
    messagingSenderId: "msgSenderId",
    appId: "Id"
};

initializeApp(firebaseConfig)

if (location.hostname === "localhost") {
    connectAuthEmulator(getAuth(), "http://localhost:9099");
}

I also tried to change the hostname from localhost to 127.0.0.1, but this did not affect the result in any way. My experience with Firebrace and authentication through it is small, so I will be glad of any help in this situation

Answer 1

Fixed the issue with some changes to main.js configuration file contains the following lines from this:

if (location.hostname === "localhost") {
    connectAuthEmulator(getAuth(), "http://localhost:9099");
}

to this:

if (location.hostname === "localhost:8080") {
    connectAuthEmulator(getAuth(), "http://127.0.0.1:9099");
}

I don't know why, but the changing of port and localhost to IP like indication worked for me:)