Firebase isn't registering my user's information. I keep getting a warning saying: 'onAuthStateChanged' is defined but never used and 'user' is assigned a value but never used. Also, when I enter the email and password it doesn't set to empty string even though I set my password and email both to (""). Any advice?

import './App.css';
import { auth } from './firebase';
import { useState, useEffect } from 'react';
import {
  signInWithEmailAndPassword,
  onAuthStateChanged,  //<-----Here's my problem
  createUserWithEmailAndPassword,
} from 'firebase/auth';

function App() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [user, setUser] = useState([]);  // <---------Here is the other issue
  const [isSignUp, setIsSignUp] = useState(false);

  useEffect(() => {
    auth.onAuthStateChanged((user) => {
      setUser(user);
    });
  });

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
  };

  const signIn = async () => {
    await signInWithEmailAndPassword(auth, email, password)
      .then(() => {
        setEmail('');
        setPassword('');
      })
      .catch((error) => {
        alert(error.message);
      });
  };

  const register = async () => {
    await createUserWithEmailAndPassword(auth, email, password).catch((error) =>
      console.log(error.message)
    );
    setPassword('');
    setEmail('');
  };
  return (
    <div className="App">
      {isSignUp ? (
        <>
          <h1>Registering...</h1>
          <input
            type="email"
            placeholder="email"
            value={email}
            onChange={handleEmailChange}
          />
          <input
            type="password"
            placeholder="password"
            value={password}
            onChange={handlePasswordChange}
          />
          <button onClick={register}>Sign Up</button>
          <button onClick={() => setIsSignUp(false)}>X</button>
        </>
      ) : (
        <>
          <h1>Logging in...</h1>
          <input
            type="email"
            placeholder="email"
            value={email}
            onChange={handleEmailChange}
          />
          <input
            type="password"
            placeholder="password"
            value={password}
            onChange={handlePasswordChange}
          />
          <button onClick={signIn}>Login</button>
          <button onClick={() => setIsSignUp(true)}>Register</button>
        </>
      )}
    </div>
  );
}

export default App;

CodePudding user response：

I see two mistakes.

First, you should use the modular syntax for your auth state handler:

useEffect(() => {
  onAuthStateChanged((user) => { //