[Supabase] Supabase 비밀번호 재설정

 

---

환경설정

- 코드 내에서 state를 관리해주기 위해서 => useState사용 (비밀번호 입력 관련)

- 변경 완료시 바로 로그인 화면으로 넘어가주기 위해서 useNavigate 사용 => React router dom 사용

- 리액트 타입 스크립트로 작성

// PasswordChange.tsx
const PasswordChange: React.FC = () => {
  const navigate = useNavigate();
  const [password, setPassword] = useState('');
  const [checkPassword, setCheckPassword] = useState('');
  ...

 

---

H3 중제목

  const [user, setUser] = useAtom(userAtom);

- 기존에 Login.tsx 에서 user Login을 해주고 user data를 전역 상태 관리 라이브러리인 Atom을 사용하여

데이터를 넣어주고, 이 파일에서 사용해준다.

 

 const handleResetPassword = async () => {
    if (password !== checkPassword) {
      setErrorMessage('비밀번호가 다릅니다.');
      setPassword('');
      setCheckPassword('');
      return;
    }
 // 현재 로그인된 회원이 있을시 비밀번호 변경
    if (user) {
      const { error } = await supabase.auth.updateUser({
        password: password
      });

      if (!error) {
        alert('비밀번호 재설정 완료!');
        setUser(null);
        supabase.auth.signOut();
        navigate('/login');
        const successMsg = 'Password changed successfully';
        setSuccessMessage(successMsg);
        console.log(successMsg);
      } else {
        alert(error);
        setErrorMessage(error.message);
        console.error('Error changing password:', error.message);
      }
    }
  };

- 현재 Atom상에 현재 로그인 데이터가 존재할 시,  onClick 핸들러가 발동되어, supabase에서 제공된 함수를 통해, 

유저 정보를 업데이트 시켜준다. 

- 이후 계정 로그아웃 시키고, 로그인 화면으로 이동시켜주었다.

<Button onClick={handleResetPassword}>비밀번호 변경하기</Button>

 

 

---

 

오류메시지

 

- 주어진 규칙과 달리 6자리 미만 입력시 발동되는 에러문이다.

 

 

- 패스워드와 패스워드 확인 두 개가 다를 시 오류 메시지를 띄우고 return 시켜주는

유효성 검사를 만들어두었다.

---

 

 

출처

https://supabase.com/docs/reference/javascript/auth-updateuser

Update a user | Supabase