Я хочу реализовать React компонент для аутентификации пользователя. Сгенерируй код компонента на TypeScript
import React, { useState } from 'react';

interface Props {
  onAuth: (username: string, password: string) => void;
}

const AuthForm: React.FC<Props> = ({ onAuth }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onAuth(username, password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor=username>Username:</label>
        <input
          type=text
          id=username
          value={username}
          onChange={(event) => setUsername(event.target.value)}
        />
      </div>
      <div>
        <label htmlFor=password>Password:</label>
        <input
          type=password
          id=password
          value={password}
          onChange={(event) => setPassword(event.target.value)}
        />
      </div>
      <button type=submit>Submit</button>
    </form>
  );
};

export default AuthForm;
Можешь добавить чекбокс Запомнить пароль?
import React, { useState } from 'react';

interface Props {
  onAuth: (username: string, password: string, forgotPassword: boolean) => void;
}

const AuthForm: React.FC<Props> = ({ onAuth }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [forgotPassword, setForgotPassword] = useState(false);

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onAuth(username, password, forgotPassword);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor=username>Username:</label>
        <input
          type=text
          id=username
          value={username}
          onChange={(event) => setUsername(event.target.value)}
        />
      </div>
      <div>
        <label htmlFor=password>Password:</label>
        <input
          type=password
          id=password
          value={password}
          onChange={(event) => setPassword(event.target.value)}
        />
      </div>
      <div>
        <input
          type=checkbox
          id=forgot-password
          checked={forgotPassword}
          onChange={(event) => setForgotPassword(event.target.checked)}
        />
        <label htmlFor=forgot-password>Забыли пароль?</label>
      </div>
      <button type=submit>Submit</button>
    </form>
  );
};

export default AuthForm;

В код был добавлен новый элемент <div> с чекбоксом Забыли пароль? перед кнопкой отправки. Также было добавлено новое состояние forgotPassword, которое устанавливается и обрабатывается при отправке формы через метод handleSubmit.