invertase / react-query-firebase

React Query hooks for managing asynchronous operations with Firebase. Supports Authentication, Analytics, Firestore & Realtime Database.

Home Page:https://react-query-firebase.invertase.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

useAuthSignInWithEmailAndPassword returns misleading errors

alhill opened this issue · comments

Hi, I'm building a login with firebase and react-query-firebase and I have some weird problems with the errors which the hook returns There's a lot of problems that can make fail a login attempt... but useAuthSignInWithEmailAndPassword returns auth/network-request-failed to everyone of them.

My test code:

import React from 'react'
import { auth } from '../utils/firebase'
import { Link, useNavigate } from 'react-router-dom'
import { useAuthSignInWithEmailAndPassword } from '@react-query-firebase/auth'
import { Container } from '../components'

const Login = () => {

    const navigate = useNavigate()
    const [form] = Form.useForm()
    const signInMutation = useAuthSignInWithEmailAndPassword(auth, {
        onSuccess: () => navigate("/admin"),
        onError: err => {
            console.log(err)
        }
    })

    const handleLogin = async () => {
        const { email, password } = form.getFieldsValue(true)
        signInMutation.mutate({ email, password }) 
    }

    return (
        <Container>
            <Form 
                form={form} 
                layout="vertical"
                onFinish={handleLogin}
            >
                <Form.Item
                    label="Email"
                    name="email"
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="Password"
                    name="password"
                >
                    <Input.Password />
                </Form.Item>
                <Button type="primary" onClick={() => form.submit()}>Login</Button>
            </Form>
            <br />
            <Link to="/">Back to home</Link>
        </Container>
    )
}

export default Login

If I inspect the Network tab of the browser I can see that the server response shows the real error code, in this case MISSING_EMAIL, but it has the same behaviour with MISSING_PASSWORD, EMAIL_NOT_FOUND, INVALID_EMAIL or INVALID_PASSWORD. All of them just return auth/network-request-failed as error.
image

Firebase is well configurated and working and obviously I have internet connection. In fact, if the user/pass is correct it just works fine.

auth/network-request-failed should only arise when there's connection or maybe Firebase config problems, but not problems with the user/password pair, this makes difficult to debug problems with authentication and impossible to return to the user a more semantic error when entering a bad login pair.

After reinstalling the project, this and many other small glitches related with react-query-firebase dissappeared and I can't reproduce anymore the situation which it was making it fail so... I guess it's fixed?