Authenticate using your email OR username in Firebase authentication system

Question

I am having a hard time in integrating the username as another way for the users to login in firebase. Is there a way for me to do that or am I stuck with only using .signInWithEmailAndPassword? I have read one of a document from firebase regarding signing in with custom token but not really sure if my understanding about it is correct.

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [username, setUsername] = useState('');
  const [error, setError] = useState(null);
  const navigate = useNavigate();
  const user = useSelector((state) => state.user);
  const handleEmailChange = (event) => {
    setEmail(event.target.value);
  };

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

  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    firebase
      .auth()
       /*I have a feeling i need to have this changed*/
      .signInWithEmailAndPassword(email, password) || .signInWithEmailAndPassword(email, password) 
      .catch((error) => {
        setError(error.message);
      });
  };

  useEffect(() => {
    if (user) {
      // if user is logged in, redirect to home page
      navigate('/');
    }
  }, [user]);

I hope you can help. Your advice would be greatly appreciated!