"Warning: Cannot update a component" when creating a user with Firebase react hooks

Question

In my React App I want to create a user with Firebase react hooks using createUserWithEmailAndPassword authentication but I get these errors.

Error 1

POST https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyBXHi4lOwy_psckXilP3B5ar864Hzv82W8 400

Error 2

react_devtools_backend.js:3973 Warning: Cannot update a component (`BrowserRouter`) while rendering a different component (`Register`).
To locate the bad setState() call inside `Register`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
   at Register (http://localhost:3000/static/js/bundle.js:1470:158)
   at Routes (http://localhost:3000/static/js/bundle.js:119933:5)
   at main
   at App
   at Router (http://localhost:3000/static/js/bundle.js:119866:15)
   at BrowserRouter (http://localhost:3000/static/js/bundle.js:118675:5)

My code:

Here is my code:

import React from 'react';
import { useRef } from 'react';
import { useCreateUserWithEmailAndPassword } from 'react-firebase-hooks/auth';
import { useNavigate } from 'react-router-dom';
import { Button, Form } from 'react-bootstrap';
// import auth from '../../../../firebase.init.js';
import './Register.css';
import auth from '../../../firebase.init';


const Register = () => {
    const [
        createUserWithEmailAndPassword,
        user,
        loading,
        error,
    ] = useCreateUserWithEmailAndPassword(auth);
    // use navigate hooks 
    const navigate = useNavigate();
    // if user is true then go to the home page 
    if (user) {
        navigate('/home');
    }
    // use the useRef() hook 
    const emailRef = useRef('');
    const nameRef = useRef('');
    const passwordRef = useRef('');


    const handaleLogin = () => {
        navigate('/login');
    }

    const handleRegisterFrom = async (e) => {
        e.preventDefault();
        const name = nameRef.current.value;
        const email = emailRef.current.value;
        const password = passwordRef.current.value;
        await createUserWithEmailAndPassword(email, password);
        console.log(email, password, name);
    }
    return (
        <div>
            <h1 className="text-success text-center"> Please Register  </h1>
            <div className="register-container login-container container w-50 mx-auto">
                <Form onSubmit={handleRegisterFrom}>
                    <Form.Group className="mb-3" controlId="formBasicText">
                        <Form.Label>Name : </Form.Label>
                        <Form.Control ref={nameRef} type="text" placeholder="Name" 
                                 required className='py-2' />

                    </Form.Group>
                    <Form.Group className="mb-3" controlId="formBasicEmail">
                        <Form.Label>Email address</Form.Label>
                        <Form.Control ref={emailRef} type="email" placeholder="Enter 
                           email" required className='py-2' />
                        <Form.Text className="text-muted">
                            We'll never share your email with anyone else.
                        </Form.Text>
                    </Form.Group>

                    <Form.Group className="mb-3" controlId="formBasicPassword">
                        <Form.Label>Password</Form.Label>
                        <Form.Control ref={passwordRef} type="password" 
                               placeholder="Password" required className='py-2' />
                    </Form.Group>
                    <Form.Group className="mb-3" controlId="formBasicCheckbox">
                        <Form.Check type="checkbox" label="Agree with terms and 
                                   conditions"/>
                    </Form.Group>
                    <Button variant="primary" type="submit">
                        Register
                    </Button>
                </Form>
                <p className='register-text'>Already Have An Account  <span 
                   className='text-success register' onClick={handaleLogin}> Please 
                    Login</span> </p>
            </div>
        </div>
    );
};

export default Register; 

How can I fix this?

Answer 1

Error 1 appears to be an issue in the backend, a server 400 error. You'll need to check there what the error was returned for if it's not in the response body.

Error 2, you are navigating as an unintentional side-effect. Navigation actions should be dispatched from a lifecycle, i.e. useEffect as intentional side-effects.

Example:

useEffect(() => {
  if (user) {
    navigate('/home');
  }
}, [navigate, user]);