Supabase signup with react state email and password - reactjs

Question

I am trying to implement the standard Supabase signup, using react-jsx, but keep getting the response:
"You must provide either an email or phone number and a password"
My code looks as follows:
const [login, setLogin] = useState('')
const [password, setPassword] = useState('')
const signUpSubmitted = () => {
supabase.auth
.signUp({ login, password })
.then((response) => {response.error ? alert(response.error.message) : setToken(response)})
.catch((err) => { alert(err)})
}
and the form:
<form id='sign-up'>
<h3>Sign Up</h3>
<label>Email:</label>
<input
type='email'
value={login}
onChange={(e) => setLogin(e.target.value)}
/>
<label>Password:</label>
<input
type='password'
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<input onClick={signUpSubmitted} type='submit'/>
</form>
I assume the problem lies with me attempting to save the values in a state, before passing them to the database. I don't see why it should be a problem, they are both strings from what I understand, so maybe I'm way off.

Answer 1

According to the Supabase docs, you need to pass email instead of login.
const { data, error } = await supabase.auth.signUp({
email: 'example#email.com',
password: 'example-password',
})
I would also suggest a few other optimizations:
Move your submit handler to the <form /> in order to support submitting the form with the Enter key.
Add event.preventDefault() to your submit handler to prevent the default form browser redirection behavior.
Change your submit input to a more semantic <button />.
Link your labels and inputs together with htmlFor and id attributes for accessibility (just make sure they're unique ids).
Updated Component:
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [token, setToken] = useState();
const handleSubmit = (event) => {
event.preventDefault();
supabase.auth
.signUp({ email, password })
.then((response) => {
response.error ? alert(response.error.message) : setToken(response)
})
.catch((err) => { alert(err) });
}
return (
<form id="sign-up" onSubmit={handleSubmit}>
<h3>Sign Up</h3>
<label htmlFor="email">Email:</label>
<input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<label htmlFor="password">Password:</label>
<input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button type="submit">Sign Up</button>
</form>
);