24.01.24 수파베이스 유저 비밀번호 변경

오늘도 프로젝트를 여전히 진행 중입니다

구글에 supabase update user password라고 검색하니 바로 스택 오버플로우 검색 결과가 나와

공식 doc과 함께 참고해서 만들었습니다

https://stackoverflow.com/questions/71561522/how-to-update-the-password-of-a-supabase-user-on-a-nextjs-project/71948292#71948292?newreg=87301c7d3fcc4fe380ff42e93f8571de

How to update the password of a Supabase user on a NextJs project?

 

 

const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setNewPassword(e.target.value);
  };

  const updatePassword = async () => {
    const { error } = await supabase.auth.updateUser({ password: newPassword });
    if (error) {
      console.error('Error updating password', error);
      alert('비밀번호 업데이트 중 에러가 발생했습니다.');
    } else {
      alert('비밀번호가 성공적으로 업데이트되었습니다.');
      setNewPassword('');
    }
  };

<input type="password" value={newPassword || ''} onChange={handlePasswordChange} />
        <button type="button" onClick={updatePassword}>
          비밀번호 변경
        </button>

 

이제 저번 회원가입 때 만든 비밀번호 재확인과 유효성 검사를 추가해야겠습니다

 

const updatePassword = async () => {
    if (!isValidPassword(newPassword)) {
      setPasswordError('비밀번호는 8자 이상이며, 영문, 숫자, 특수문자를 모두 포함해야 합니다.');
      return;
    }

    if (!isValidConfirmPassword(newPassword, confirmPassword)) {
      setPasswordError('비밀번호와 비밀번호 확인이 일치하지 않습니다.');
      return;
    }
    const { error } = await supabase.auth.updateUser({ password: newPassword });
    if (error) {
      console.error('Error updating password', error);
      alert('비밀번호 업데이트 중 에러가 발생했습니다.');
    } else {
      alert('비밀번호가 성공적으로 업데이트되었습니다.');
      setNewPassword('');
    }
  };

 

유효성 검사 틀리면 바로 표시할 수 있게 ui도 조금 수정

&& 을 이용해 error 메시지가 있다면 바로 화면에 표기하도록 했습니다

{PasswordError && <StErrorMessage>{PasswordError}</StErrorMessage>}

export const StErrorMessage = styled.div`
  color: red;
  font-size: 13px;
  padding: 10px;
`;

 

---

그리고 실시간 유효성 검사를 위해 input에 바로 코드 작성

          <input
            placeholder="변경할 비밀번호"
            type="password"
            value={newPassword || ''}
            onChange={(e) => {
              setNewPassword(e.target.value);
              if (!isValidPassword(e.target.value)) {
                setPasswordError('비밀번호는 8자 이상이며, 영문, 숫자, 특수문자를 모두 포함해야 합니다.');
                setpasswordisValidIsValid(false);
              } else {
                setPasswordError('');
                // 비밀번호 확인도 같이 검사합니다.
                if (e.target.value !== confirmPassword) {
                  setPasswordError('비밀번호와 비밀번호 확인이 일치하지 않습니다.');
                  setpasswordisValidIsValid(false);
                } else {
                  setPasswordError('');
                  setpasswordisValidIsValid(true);
                }
              }
            }}
          />
          {PasswordError && <StErrorMessage>{PasswordError}</StErrorMessage>}
          <br></br>
          <input
            placeholder="변경할 비밀번호 확인"
            type="password"
            value={confirmPassword}
            onChange={(e) => {
              setConfirmPassword(e.target.value);
              // 비밀번호 확인이 비밀번호와 일치하는지 검사합니다.
              if (newPassword !== e.target.value) {
                setPasswordError('비밀번호와 비밀번호 확인이 일치하지 않습니다.');
                setpasswordisValidIsValid(false);
              } else {
                setPasswordError('');
                setpasswordisValidIsValid(true);
              }
            }}
          />