Estoy tratando de implementar una página de autenticación súper simple y súper primitiva para mi sitio web. El usuario ve un solo campo de entrada y un botón de envío. Si la entrada coincide con la contraseña (queda por agregar hash), el usuario se autentica.

Sin embargo, el problema es que siempre debe ingresar la cadena correcta y presionar el botón Enviar dos veces. No sé por qué sucede esto, y obviamente es bastante molesto.

¿Hay alguna solución para esto? Todo lo que encontré es usar e.preventDefault(), que ya estoy usando, pero fue en vano.

 import { useState } from 'react' import App from '../App' export default function Password() { const [auth, setAuth] = useState(false) const [pass, setPass] = useState("") const secret = "" const handleChange = e => { setPass(e.target.value) } const handleSubmit = e => { e.preventDefault() e.nativeEvent.stopImmediatePropagation(); if (pass === secret) { setAuth(true) } } if (auth) { return ( <App/> ) } else { return ( <form onSubmit={handleSubmit}> <input style={{ border: "1px solid grey", borderRadius: "4px" }} type="text" value={pass} onChange={handleChange} /> <input style={{ border: "1px solid grey", borderRadius: "4px" }} type="submit" value="submit" /> </form> ) } }