search

firebase / firebase-js-sdk

Firebase Javascript SDK
https://firebase.google.com/docs/web/setup
Other
4.82k stars 884 forks source link

Firebase: Error (auth/network-request-failed). #8459

Closed koroman17 closed 4 days ago

koroman17 commented 2 weeks ago

Operating System

Windows 11

Environment (if applicable)

Chrome Version 127.0.6533.122 (Official Build) (64-bit), nodejs v20.14.0

Firebase SDK Version

^10.13.0

Firebase SDK Product(s)

Auth

Project Tooling

react-native with expo go

Detailed Problem Description

create a user on emulators get this Firebase: Error (auth/network-request-failed). it works with firebase cloud

Steps and code to reproduce issue

run these commands

create this file in ./firebase/firebase.js

import { initializeApp } from "firebase/app";
import { connectAuthEmulator, getAuth } from "firebase/auth";

const firebaseConfig = {
    apiKey: "***",
    authDomain: "***",
    projectId: "***",
    storageBucket: "***",
    messagingSenderId: "***",
    appId: "***",
    measurementId: "***",
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth();
connectAuthEmulator(auth, "http://127.0.0.1:9099");

change App.js like this

import { StatusBar } from "expo-status-bar";
import { createUserWithEmailAndPassword } from "firebase/auth";
import { StyleSheet, Text, View } from "react-native";
import { auth } from "./firebase/firebase";
export default function App() {
    createUserWithEmailAndPassword(auth, "test@gmail.com", "test1234")
        .then((userCredential) => {
            console.log(userCredential);
        })
        .catch((err) => {
            console.log(err.code, err.message);
        });
    return (
        <View style={styles.container}>
            <Text>Open up App.js to start working on your app!</Text>
            <StatusBar style="auto" />
        </View>
    );
}

open the app on expo go on iOS

google-oss-bot commented 2 weeks ago

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

jbalidiong commented 2 weeks ago

Hi @koroman17, thanks for the report. I tried replicating, but I wasn't able to reproduce the error. I tried it using an iOS simulator, created multiple users and was able to do so. Can you inspect or upload your HAR file to the affected network calls? Feel free to take out the sensitive information.

koroman17 commented 2 weeks ago

Hi @jbalidiong sorry if I don't understand what you mean. As I guess, on the emulators page http://127.0.0.1:4000/ I got this log 127.0.0.1.log

As I notice, this keeps running image

jbalidiong commented 2 weeks ago

Thank you for providing the logs. Upon checking the logs, this doesn't contain the error on the initial post. I've made some adjustment to the createUserWithEmailAndPassword. Here is the adjusted code:

import { StatusBar } from "expo-status-bar";
import { createUserWithEmailAndPassword } from "firebase/auth";
import { Text, View, Button, StyleSheet} from "react-native";
import { auth } from "./firebase/firebase";

export default function App() {
    const creatUser = (e) =>{

        createUserWithEmailAndPassword(auth, "test@gmail.com", "test1234")
        .then((userCredential) => {
            console.log(userCredential);
        })
        .catch((err) => {
            console.log(err.code, err.message);
        });
    }
    const styles = StyleSheet.create({
        content:{justifyContent: "center",
        alignItems: "center",
        flex: 1
        }
    })
    return (
        <View style={styles.content}>
            <Text>Open up App.js to start working on your app!</Text>
            <Button onPress={creatUser} title="Create User"/>
            <StatusBar style="auto" />
        </View>
    );
}

To record the request, here is the steps to follow:

koroman17 commented 2 weeks ago

there is nothing in the HAR file { "log": { "version": "1.2", "creator": { "name": "WebInspector", "version": "537.36" }, "pages": [], "entries": [] } } this is the request image when I open it, it says {"message":"Method GET not allowed for /identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyB0ayanfz5y0Qodz2rpGEgZ2G6T0-WX600"}

koroman17 commented 2 weeks ago

I tried to change the IP in connectAuthEmulator(auth, "http://127.0.0.1:9099"); to localhost, 10.0.2.2 like people mentioned on stackoverflow, but it still throws Firebase: Error (auth/network-request-failed). Even if I change the IP to nothing it still doesn't throw any other error. I wonder how I can know what the right IP should be. Whenever I change the IP it throws FirebaseError: Firebase: Error (auth/emulator-config-failed)., js engine: hermes but if I reload it doesn't throw the error anymore

jbalidiong commented 1 week ago

@koroman17 thanks for the additional information and apologies for the late response. I am currently in discussion with our Auth engineers regarding this matter. To help us narrow down the possible reason why you are encountering this behavior, I suggest trying to use another network to see if it persists and not using the emulator when creating a user. If the issue persists, could you share with me the following details to help me analyze it and we might discuss this with our engineering team if necessary to verify if there's a bug on our end.

koroman17 commented 1 week ago

@jbalidiong I have no problem creating a user without the emulator. The problem lies in the emulator. And I want to use it to test functions. If you look at this {"message":"Method GET not allowed for /identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyB0ayanfz5y0Qodz2rpGEgZ2G6T0-WX600"}. AIzaSyB0ayanfz5y0Qodz2rpGEgZ2G6T0-WX600 is my project apiKey, does it mean it tried to connect to my cloud project instead of the emulator?

koroman17 commented 1 week ago

I got this warning 

WARN  [2024-09-03T12:45:52.463Z]  @firebase/auth: Auth (10.13.1):
You are initializing Firebase Auth for React Native without providing
AsyncStorage. Auth state will default to memory persistence and will not
persist between sessions. In order to persist auth state, install the package
"@react-native-async-storage/async-storage" and provide it to
initializeAuth:

import { initializeAuth, getReactNativePersistence } from 'firebase/auth';
import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';
const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(ReactNativeAsyncStorage)
});

then I follow it, but the problem is if I want to connect my auth to the emulator I have to leave app away like in

export const auth = getAuth(); // there is no app inside getAuth
connectAuthEmulator(auth, "http://127.0.0.1:9099");

but if I use const auth = initializeAuth(app, { persistence: getReactNativePersistence(ReactNativeAsyncStorage) }); I have no glue how to connect it to the emulator, because even if I try to do this connectAuthEmulator(auth, "http://127.0.0.1:9099"); It'd still connect to my cloud auth

jbalidiong commented 1 week ago

@jbalidiong I have no problem creating a user without the emulator. The problem lies in the emulator. And I want to use it to test functions. If you look at this {"message":"Method GET not allowed for /identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyB0ayanfz5y0Qodz2rpGEgZ2G6T0-WX600"}. AIzaSyB0ayanfz5y0Qodz2rpGEgZ2G6T0-WX600 is my project apiKey, does it mean it tried to connect to my cloud project instead of the emulator?

This is expected if you've provided your FirebaseConfig in the app initialization. Your app will use the configuration that you've provided but will not connect to your project, instead, it will connect to your emulator suite.

jbalidiong commented 1 week ago

I got this warning

WARN  [2024-09-03T12:45:52.463Z]  @firebase/auth: Auth (10.13.1):
You are initializing Firebase Auth for React Native without providing
AsyncStorage. Auth state will default to memory persistence and will not
persist between sessions. In order to persist auth state, install the package
"@react-native-async-storage/async-storage" and provide it to
initializeAuth:

import { initializeAuth, getReactNativePersistence } from 'firebase/auth';
import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';
const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(ReactNativeAsyncStorage)
});

then I follow it, but the problem is if I want to connect my auth to the emulator I have to leave app away like in

export const auth = getAuth(); // there is no app inside getAuth
connectAuthEmulator(auth, "http://127.0.0.1:9099");

but if I use const auth = initializeAuth(app, { persistence: getReactNativePersistence(ReactNativeAsyncStorage) }); I have no glue how to connect it to the emulator, because even if I try to do this connectAuthEmulator(auth, "http://127.0.0.1:9099"); It'd still connect to my cloud auth

I also got this warning, but I was able to create a user in the emulator suite. I've created a minimal app that uses Firebase emulator suite and Authentication for your reference. Encountering Firebase: Error (auth/network-request-failed) could be caused by proxy intercepting, DNS failure, no network connectivity etc. It would greatly help in our investigation if you could provide the network trace by done by the app for us to debug and narrow down the possible cause of the issue.

koroman17 commented 5 days ago

@jbalidiong thanks for your instruction. I followed your https://github.com/jbalidiong/issue-8459, but the same thing still happens. When I run npm run ios, it tells me to install Xcode, but I'm using windows, so I have to run npx expo start instead. Just inform you in case it matters. this is my firebaseConfig

apiKey: "AIzaSyB0ayanfz5y0Qodz2rpGEgZ2G6T0-WX600",
authDomain: "fir-emulatorstest.firebaseapp.com",
projectId: "firebaseemulatorstest",
storageBucket: "firebaseemulatorstest.appspot.com",
messagingSenderId: "940329084772",
appId: "1:940329084772:web:43b2d725b0d339f842bc71",

when I click createUser it just throws auth/network-request-failed Firebase: Error (auth/network-request-failed). and there is no user created on http://localhost:4000/auth

Can you use teamviewer to interact with my computer?

koroman17 commented 4 days ago

After all I've known how to solve it image in connectAuthEmulator(auth, "http://192.168.1.14:9099"); I have to change the IP to the one expo go is running on and in firebase.json

"auth": {
    "host": "192.168.1.14",
    "port": 9099
},
"functions": {
    "host": "192.168.1.14",
    "port": 5001
},
"firestore": {
    "host": "192.168.1.14",
    "port": 8080
},
"storage": {
    "host": "192.168.1.14",
    "port": 9199
},

@jbalidiong I told you the problem about the right IP it should be