My React JS frontend application freezes whenever I try to input a new value using Firebase

Question

I am currently following a tutorial to make a simple frontend application that uses Firebase for authentication purposes. My code seemed to work when I only had the logic for registering a new user, however, something went amiss when I added the logic for a user trying to login. Every time I simply click into the Email box for logging in, my app freezes.

Here is the display of my application (ignore blue line):

Here is the code for App.js:

import { useState } from 'react';
import './App.css';
import { createUserWithEmailAndPassword,
onAuthStateChanged,
signInWithEmailAndPassword,
signOut } from 'firebase/auth';
import { auth } from './firebase-config'

function App() {
  const [registerEmail, setRegisterEmail] = useState('')
  const [registerPassword, setRegisterPassword] = useState('')
  const [user, setUser] = useState({});
  const [loginEmail, setLoginEmail] = useState('')
  const [loginPassword, setLoginPassword] = useState('')

  onAuthStateChanged(auth, (currentUser) => {
    setUser(currentUser)
  }, [])

  const register = async() => {
    try {
      const user = await createUserWithEmailAndPassword(auth, registerEmail, registerPassword);
      console.log(user)
    } catch (err) {
      console.log(err.message)
    }
  };

  const login = async() => {
    try {
      const user = await signInWithEmailAndPassword(auth, loginEmail, loginPassword);
      console.log(user)
    } catch (err) {
      console.log(err.message)
    }

  };

  const logout = async() => {

    await signOut(auth);

  };


  return (
    <div className="App">
      <div>
        <h3> Register User </h3>
        <input placeholder='Email...' onChange={(e) => setRegisterEmail(e.target.value)}/>
        <input placeholder='Password...' onChange={(e) => setRegisterPassword(e.target.value)}/>
        <button onClick={register}> Create User</button>
      </div>

      <div>
        <h3> Login </h3>
        <input placeholder='Email...' onChange={(e) => setLoginEmail(e.target.value)}/>
        <input placeholder='Password...' onChange={(e) => setLoginPassword(e.target.value)}/>

        <button onClick={login}> Login</button>
      </div>

      <h4> User Logged In: </h4>
      {user?.email}

      <button onClick={logout}> Sign Out </button>
    </div>
  );
}

export default App;

Finally, here is the code for the firebase.config.js file:

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

const firebaseConfig = {
  apiKey: "AIzaSyANfrqNmIbJLZlN-j6oOrjL8ZRv-YYM10M",
  authDomain: "authentication-tutorial-3259a.firebaseapp.com",
  projectId: "authentication-tutorial-3259a",
  storageBucket: "authentication-tutorial-3259a.appspot.com",
  messagingSenderId: "145171676516",
  appId: "1:145171676516:web:044dfc2fc86abbb1d74e71"
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);

Answer 1

You need to add values to both your inputs. The value is not changing, hence you get the feeling of you app getting stuck.

For signup inputs

<input value={registerEmail} placeholder='Email...' onChange={(e) => setRegisterEmail(e.target.value)}/>
<input value={registerPassword} placeholder='Password...' onChange={(e) => setRegisterPassword(e.target.value)}/>

For login inputs

<input value={loginEmail} placeholder='Email...' onChange={(e) => setLoginEmail(e.target.value)}/>
<input value={loginPassword} placeholder='Password...' onChange={(e) => setLoginPassword(e.target.value)}/>