【React】useForm 登録・確認パスワード不一致で変更が完了してしまう症状の解決方法　

# はじめに
supabase認証のパスワード再設定機能をuseFormで実装中、登録パスワードが確認用パスワードと不一致でも変更が完了してしまう症状が発生したため、こちらの解決方法を記事にします。

<br>

修正前コード内容

```.PasswordReset.tsx
import { supabase } from '../../utils/supabase'
import { useNavigate } from 'react-router'
import { SubmitHandler, useForm } from 'react-hook-form'

type Inputs = {
  password: string;
}

export const PasswordReset = () => {
  const navigate = useNavigate();
  const { register, handleSubmit, reset, getValues } = useForm<Inputs>({ defaultValues: { password: "" } })

  const onSubmit: SubmitHandler<Inputs> = async (data: Inputs) => {
    try {
      const { password } = data;
      const { error } = await supabase.auth.updateUser({
        password,
      });
      if (error) {
        throw new Error(error.message);
      }
      navigate('/login') // 成功したらloginページへ
      alert("パスワード変更が完了しました")
    } catch (err) {
      alert("エラーが発生しました");
    } finally {
      reset();
    }
  }

  return (
    <div>
      <h1 className='text-5xl font-bold'>パスワード再設定登録画面</h1>
      <form className='space-y-4' onSubmit={handleSubmit(onSubmit)}>
        <label>パスワード</label>
        <input
          type="password"
          placeholder='パスワードを入力してください'
          className='block border border-gray-300'
          {...register("password", { required: "パスワードは必須です"}) }
        />

        <label>パスワード確認</label>
        <input 
          type="password"
          placeholder='パスワードをもう一度入力...'
          className='block border border-gray-300'
          {...register("password", { required: "確認用パスワードは必須です",
            validate: (value) => value === getValues('password') || "パスワードが一致しません"
          })}
        />
        <button className='bg-blue-600 text-white hover:cursor-pointer hover:bg-blue-700'>パスワード変更</button>
      </form>
    </div>
  )
}

```
# 解決方法
属性を別々の名前にする

```PasswordReset.tsx
import { supabase } from '../../utils/supabase'
import { useNavigate } from 'react-router'
import { SubmitHandler, useForm } from 'react-hook-form'

type Inputs = {
  password: string;
  confirmPassword: string;
}

export const PasswordReset = () => {
  const navigate = useNavigate();
  const { register, handleSubmit, reset, getValues, formState: {errors} } = useForm<Inputs>({ defaultValues: { password: "" } })

  const onSubmit: SubmitHandler<Inputs> = async (data: Inputs) => {
    try {
      const { password } = data;
      const { error } = await supabase.auth.updateUser({
        password,
      });
      if (error) {
        throw new Error(error.message);
      }
      navigate('/login') // 成功したらloginページへ
      alert("パスワード変更が完了しました")
    } catch (err) {
      alert("エラーが発生しました");
    } finally {
      reset();
    }
  }

  return (
    <div>
      <h1 className='text-5xl font-bold'>パスワード再設定登録画面</h1>
      <form className='space-y-4' onSubmit={handleSubmit(onSubmit)}>
        <label>パスワード</label>
        <input
          type="password"
          placeholder='パスワードを入力してください'
          className='block border border-gray-300'
          {...register("password", { required: "パスワードは必須です"}) }
        />

        <label>パスワード確認</label>
        <input 
          type="password"
          placeholder='パスワードをもう一度入力...'
          className='block border border-gray-300'
          {...register("confirmPassword", { required: "確認用パスワードは必須です", // ←ココ
            validate: (value) => value === getValues('password') || "パスワードが一致しません"
          })}
        />
        <button className='bg-blue-600 text-white hover:cursor-pointer hover:bg-blue-700'>パスワード変更</button>
        {errors.confirmPassword && <p>{errors.confirmPassword.message}</p>}
      </form>
    </div>
  )
}

```

# 参考
https://qiita.com/yuma_matzui/items/72570f597e1517438572


# おわりに
useFormの勉強になりました。


<br>

[<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3707255/8bfacf61-7d8d-6d27-cb07-98d1f8f27fcd.png"  width=100%>](https://projisou.jp)