Supabase使用React状态注册电子邮件和密码

huangapple
go评论103阅读模式
英文:

Supabase signup with react state email and password

问题

我正在尝试使用 react-jsx 实现标准的 Supabase 注册，但一直收到以下响应：

"您必须提供电子邮件或电话号码以及密码"

我的代码如下：

  1. const [login, setLogin] = useState('')
  2. const [password, setPassword] = useState('')
  4. const signUpSubmitted = () => {
  5.   supabase.auth
  6.     .signUp({ login, password })
  7.     .then((response) => {response.error ? alert(response.error.message) : setToken(response)})
  8.     .catch((err) => { alert(err)})
  9. }

以及表单：

  1. <form id='sign-up'>
  2.     <h3>Sign Up</h3>
  3.     <label>Email:</label>
  4.     <input 
  5.     type='email' 
  6.     value={login}
  7.     onChange={(e) => setLogin(e.target.value)}
  8.     />
  9.     
  10.     <label>Password:</label>
  11.     <input 
  12.     type='password'
  13.     value={password}
  14.     onChange={(e) => setPassword(e.target.value)} 
  15.     />
  17.     <input onClick={signUpSubmitted} type='submit'/>
  18. </form>

我认为问题可能出在我尝试在传递给数据库之前将值保存在状态中。我不明白为什么会有问题，它们都应该是字符串，所以也许我理解错了。

英文:

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:

  1.   const [login, setLogin] = useState(&#39;&#39;)
  2.   const [password, setPassword] = useState(&#39;&#39;)
  4.   const signUpSubmitted = () =&gt; {
  5.     supabase.auth
  6.       .signUp({ login, password })
  7.       .then((response) =&gt; {response.error ? alert(response.error.message) : setToken(response)})
  8.       .catch((err) =&gt; { alert(err)})
  9.   }

and the form:

  1. &lt;form id=&#39;sign-up&#39;&gt;
  2.                 &lt;h3&gt;Sign Up&lt;/h3&gt;
  3.                 &lt;label&gt;Email:&lt;/label&gt;
  4.                 &lt;input 
  5.                 type=&#39;email&#39; 
  6.                 value={login}
  7.                 onChange={(e) =&gt; setLogin(e.target.value)}
  8.                 /&gt;
  9.                 
  10.                 &lt;label&gt;Password:&lt;/label&gt;
  11.                 &lt;input 
  12.                 type=&#39;password&#39;
  13.                 value={password}
  14.                 onChange={(e) =&gt; setPassword(e.target.value)} 
  15.                 /&gt;
  17.                 &lt;input onClick={signUpSubmitted} type=&#39;submit&#39;/&gt;
  18.             &lt;/form&gt;

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.

答案1

得分: 1

根据Supabase文档，您需要传递email而不是login。

  1. const { data, error } = await supabase.auth.signUp({
  2.   email: 'example@email.com',
  3.   password: 'example-password',
  4. })

我还建议进行一些其他优化：

  • 将您的提交处理程序移至<form />以支持使用Enter键提交表单。
  • 在您的提交处理程序中添加event.preventDefault()以防止默认的表单浏览器重定向行为。
  • 将您的提交输入更改为更语义化的<button />。
  • 使用htmlFor和id属性将标签和输入项链接在一起，以提高可访问性（只需确保它们是唯一的ID）。

更新后的组件：

  1. const [email, setEmail] = useState('');
  2. const [password, setPassword] = useState('');
  3. const [token, setToken] = useState();
  5. const handleSubmit = (event) => {
  6.   event.preventDefault();
  7.   supabase.auth
  8.     .signUp({ email, password })
  9.     .then((response) => {
  10.       response.error ? alert(response.error.message) : setToken(response)
  11.     })
  12.     .catch((err) => { alert(err) });
  13. }
  15. return (
  16.   <form id="sign-up" onSubmit={handleSubmit}>
  17.     <h3>Sign Up</h3>
  19.     <label htmlFor="email">Email:</label>
  20.     <input
  21.       id="email"
  22.       type="email" 
  23.       value={email}
  24.       onChange={(e) => setEmail(e.target.value)}
  25.     />
  26.     
  27.     <label htmlFor="password">Password:</label>
  28.     <input
  29.       id="password"
  30.       type="password"
  31.       value={password}
  32.       onChange={(e) => setPassword(e.target.value)}
  33.     />
  35.     <button type="submit">Sign Up</button>
  36.   </form>
  37. );
英文:

According to the Supabase docs, you need to pass email instead of login.

  1. const { data, error } = await supabase.auth.signUp({
  2.   email: &#39;example@email.com&#39;,
  3.   password: &#39;example-password&#39;,
  4. })

I would also suggest a few other optimizations:

  • Move your submit handler to the &lt;form /&gt; 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 &lt;button /&gt;.
  • Link your labels and inputs together with htmlFor and id attributes for accessibility (just make sure they're unique ids).

Updated Component:

  1. const [email, setEmail] = useState(&#39;&#39;);
  2. const [password, setPassword] = useState(&#39;&#39;);
  3. const [token, setToken] = useState();
  5. const handleSubmit = (event) =&gt; {
  6.   event.preventDefault();
  7.   supabase.auth
  8.     .signUp({ email, password })
  9.     .then((response) =&gt; {
  10.       response.error ? alert(response.error.message) : setToken(response)
  11.     })
  12.     .catch((err) =&gt; { alert(err) });
  13. }
  15. return (
  16.   &lt;form id=&quot;sign-up&quot; onSubmit={handleSubmit}&gt;
  17.     &lt;h3&gt;Sign Up&lt;/h3&gt;
  19.     &lt;label htmlFor=&quot;email&quot;&gt;Email:&lt;/label&gt;
  20.     &lt;input
  21.       id=&quot;email&quot;
  22.       type=&quot;email&quot; 
  23.       value={email}
  24.       onChange={(e) =&gt; setEmail(e.target.value)}
  25.     /&gt;
  26.     
  27.     &lt;label htmlFor=&quot;password&quot;&gt;Password:&lt;/label&gt;
  28.     &lt;input
  29.       id=&quot;password&quot;
  30.       type=&quot;password&quot;
  31.       value={password}
  32.       onChange={(e) =&gt; setPassword(e.target.value)}
  33.     /&gt;
  35.     &lt;button type=&quot;submit&quot;&gt;Sign Up&lt;/button&gt;
  36.   &lt;/form&gt;
  37. );

huangapple
  • 本文由 发表于 2023年2月13日 23:16:19
  • 转载请务必保留本文链接：https://go.coder-hub.com/75437776.html
  • reactjs
  • supabase
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定