javascript – Getting “auth/network-request-failed” when authenticating with firebase within reactjs (Not an actual network error)

Whenever an authentication request is sent to firebase (through google popup or email/password), a “auth/network-request-failed” is returned. I have tried to upgrade from firebase version 8 to version 9, but continue to get the same issue. I have insured that the config is setup correctly along with my import statements. I have similar code on a different app that worked fine and still does. I have ruled out my network as the issue and have checked the network tab in the developer window and did not see any failed calls there. Error is given whenever an authentication call happens no matter if it is signup with email/password, sign-in with email/password, or google popup. From what I understand, this error is an overarching catch for countless different errors. I spent a good chunk of time trying to rule out as many of them as possible.

Network Tab Screenshot

Console Error Screenshot

Imports (index.js)

import { loadStripe } from "@stripe/stripe-js";
import { PaymentElement, CardElement, Elements } from "@stripe/react-stripe-js";
import { getProducts } from "@stripe/firestore-stripe-payments";
import { setPersistence, browserSessionPersistence, onAuthStateChanged, signInWithEmailAndPassword, createUserWithEmailAndPassword, signInWithRedirect, signInWithPopup } from "@firebase/auth";
import React from "react";
import ReactDOM from "react-dom";
import {db, auth, provider} from "./firebase.js"

Imports (firebase.js)

import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore';
import { getAuth, GoogleAuthProvider } from "firebase/auth"

Firebase Setup (firebase.js)

const app = initializeApp(config);

const db = getFirestore(app);

const auth = getAuth();

const provider = new GoogleAuthProvider();
provider.setCustomParameters({ prompt: 'select_account' });

export {db, auth, provider};

Login React Component (index.js)

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.doThing = this.doThing.bind(this);
        this.state = {login: true}
        this.toggleState = this.toggleState.bind(this);
        this.dispAuth = this.dispAuth.bind(this);
        this.signup = this.signup.bind(this);
        this.googleSignIn = this.googleSignIn.bind(this);
    }

    toggleState() {
        this.setState(prevState => ({
            login: !prevState.login
        }));
    }
    
    googleSignIn() {
        setPersistence(auth, browserSessionPersistence).then(() => {
            signInWithPopup(auth, provider)
                .catch(error => {
                    var errorCode = error.code;
                    var errorMessage = error.message;
                    document.getElementById('err').innerHTML = errorMessage;
                    document.getElementById('err').style.display = 'block';
                });
        });
    }

    doThing(event) {
        event.preventDefault();
        setPersistence(auth, browserSessionPersistence).then(() => {
            return signInWithEmailAndPassword(auth, document.getElementById('email').value, document.getElementById('password').value)
                .catch((error) => {
                    var errorCode = error.code;
                    var errorMessage = error.message;
                    document.getElementById('err').innerHTML = errorMessage;
                    document.getElementById('err').style.display = 'block';
                });
        });
    }
    
    signup(event) {
        event.preventDefault();
        let p1 = document.getElementById('password').value;
        let p2 = document.getElementById('password2').value;
        let e = document.getElementById('email').value;
        if(p1 === p2) {
            createUserWithEmailAndPassword(auth, e, p1).catch(error => {
                var errorCode = error.code;
                var errorMessage = error.message;
                document.getElementById('err').innerHTML = errorMessage;
                document.getElementById('err').style.display = 'block'
            })
        } else {
            document.getElementById('err').innerHTML = 'Passwords Do Not Match';
            document.getElementById('err').style.display = 'block'
        }
    }
    
    dispAuth() {
        if(this.state.login) {
            return (
                <div>
                    <div id = 'err' className="err" style = {{display: 'none'}}></div>
                    <h1>Login:</h1> <br />
                    <form id = 'signInForm' onSubmit={this.doThing}>
                        <span>Email:</span> <br />
                        <input type="email" id = 'email' required /> <br />
                        <span>Password:</span> <br />
                        <input type="password" id = 'password' required /> <br />
                        <input type = "submit" className="loginBtn" value = "Login!" /><br />
                    </form>
                    <button className="login-with-google-btn" onClick = {this.googleSignIn}>
                        Continue With Google
                    </button>
                    <div className="toggleLink" onClick = {this.toggleState}><p>Create An Account</p></div>
                </div>
            )
        } else {
            return (
                <div>
                    <div id = 'err' className="err" style = {{display: 'none'}}></div>
                    <h1>Signup:</h1> <br />
                    <form autoComplete="off" onSubmit = {this.signup}>
                        <span>Email:</span> <br />
                        <input type="email" id = 'email' required /> <br />
                        <span>Password:</span> <br />
                        <input type="password" id = 'password' required /> <br />
                        <span>Confirm Password:</span> <br />
                        <input type="password" id = 'password2' required /> <br />
                        <input type="submit" className="loginBtn" value="Signup!" /><br />
                    </form>
                    <div className="toggleLink" onClick = {this.toggleState}><p>Sign In To An Existing Account</p></div>
                </div>
            )
        }
    }
                            
    render() {
        return (
            <div id = 'loginContainer'>
                {this.dispAuth()}
            </div>
        )
    }
}

App React Component (index.js)

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {payment: false}
        this.activatePayment = this.activatePayment.bind(this);
    }

    activatePayment(id) {
        db.collection("products").collection()
        this.setState(prevState => ({
            payment: !prevState.payment
        }));
    }
    
    render() {
        if(this.props.user) {
            return(
                <div>
                    {this.state.payment
                        ?<Elements stripe = {stripePromise}>
                            <form>
                                <CardElement></CardElement>
                                <button>Submit</button>
                            </form>
                        </Elements>
                        :<Products activatePayment = {this.activatePayment} />
                    }
                </div>
            )
        } else {
            return(
                <Login />
            )
        }
    }
}

Render React (index.js)

onAuthStateChanged(auth, user => {
    ReactDOM.render(
        <App user = {user} />,
        document.getElementById('root')
    )
})

I have tried to give as much information as I could, if there is any other information that may seem helpful, let me know and I will give that as soon as possible. Honestly, anything helps; I’ve been trying to debug this for 8 hours at this point.

Leave a Comment