사용자가 비밀번호를 변경할 수 있도록 허용하기

우리의 서버리스 노트 앱에서 사용자가 비밀번호를 변경할 수 있도록 하고 싶습니다. 우리는 사용자 관리를 위해 Cognito를 사용하고 있으며, React 앱에서 AWS Amplify를 사용하고 있습니다. 이번 장에서는 이를 어떻게 구현할지 살펴보겠습니다.

참고로, 우리는 다음과 같은 포크된 버전의 노트 앱을 사용하고 있습니다:

먼저 사용자가 비밀번호를 변경할 수 있는 설정 페이지를 수정해 보겠습니다.

설정 페이지 추가

Change indicator src/containers/Settings.js의 return 문을 다음으로 교체하세요.

return (
  <div className="Settings">
    <LinkContainer to="/settings/email">
      <LoaderButton block bsSize="large">
        이메일 변경
      </LoaderButton>
    </LinkContainer>
    <LinkContainer to="/settings/password">
      <LoaderButton block bsSize="large">
        비밀번호 변경
      </LoaderButton>
    </LinkContainer>
    <hr />
    <Elements
      stripe={stripePromise}
      fonts={[
        {
          cssSrc:
            "https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800",
        },
      ]}
    >
      <BillingForm isLoading={isLoading} onSubmit={handleFormSubmit} />
    </Elements>
  </div>
);

Change indicator 그리고 다음을 import 하세요.

import { LinkContainer } from "react-router-bootstrap";
import LoaderButton from "../components/LoaderButton";

이 코드는 사용자가 비밀번호와 이메일을 변경할 수 있는 페이지로 이동하는 두 개의 링크를 추가합니다.

Change indicator src/containers/Settings.css를 다음으로 교체하세요.

@media all and (min-width: 480px) {
  .Settings {
    padding: 60px 0;
    margin: 0 auto;
    max-width: 480px;
  }

  .Settings > .LoaderButton:first-child {
    margin-bottom: 15px;
  }
}

설정 페이지 스크린샷

비밀번호 변경 폼

이제 사용자가 비밀번호를 변경할 수 있는 폼을 만들어 보겠습니다.

Change indicator src/containers/ChangePassword.js에 다음 내용을 추가합니다.

import React, { useState } from "react";
import { Auth } from "aws-amplify";
import { useNavigate } from "react-router-dom";
import { FormGroup, FormControl, FormLabel } from "react-bootstrap";
import LoaderButton from "../components/LoaderButton";
import { useFormFields } from "../lib/hooksLib";
import { onError } from "../lib/errorLib";
import "./ChangePassword.css";

export default function ChangePassword() {
  const nav = useNavigate();
  const [fields, handleFieldChange] = useFormFields({
    password: "",
    oldPassword: "",
    confirmPassword: "",
  });
  const [isChanging, setIsChanging] = useState(false);

  function validateForm() {
    return (
      fields.oldPassword.length > 0 &&
      fields.password.length > 0 &&
      fields.password === fields.confirmPassword
    );
  }

  async function handleChangeClick(event) {
    event.preventDefault();

    setIsChanging(true);

    try {
      const currentUser = await Auth.currentAuthenticatedUser();
      await Auth.changePassword(
        currentUser,
        fields.oldPassword,
        fields.password
      );

      nav("/settings");
    } catch (error) {
      onError(error);
      setIsChanging(false);
    }
  }

  return (
    <div className="ChangePassword">
      <form onSubmit={handleChangeClick}>
        <FormGroup bsSize="large" controlId="oldPassword">
          <FormLabel>기존 비밀번호</FormLabel>
          <FormControl
            type="password"
            onChange={handleFieldChange}
            value={fields.oldPassword}
          />
        </FormGroup>
        <hr />
        <FormGroup bsSize="large" controlId="password">
          <FormLabel>새 비밀번호</FormLabel>
          <FormControl
            type="password"
            onChange={handleFieldChange}
            value={fields.password}
          />
        </FormGroup>
        <FormGroup bsSize="large" controlId="confirmPassword">
          <FormLabel>새 비밀번호 확인</FormLabel>
          <FormControl
            type="password"
            onChange={handleFieldChange}
            value={fields.confirmPassword}
          />
        </FormGroup>
        <LoaderButton
          block
          type="submit"
          bsSize="large"
          disabled={!validateForm()}
          isLoading={isChanging}
        >
          비밀번호 변경
        </LoaderButton>
      </form>
    </div>
  );
}

대부분의 코드는 매우 직관적입니다. 여기서 중요한 부분은 사용자에게 현재 비밀번호와 새 비밀번호를 입력받는 것입니다. 사용자가 입력을 완료하면 다음 코드를 호출합니다.

const currentUser = await Auth.currentAuthenticatedUser();
await Auth.changePassword(currentUser, fields.oldPassword, fields.password);

위 코드는 Amplify의 Auth 모듈을 사용해 현재 사용자를 가져옵니다. 그리고 이 정보를 바탕으로 기존 비밀번호와 새 비밀번호를 전달해 비밀번호를 변경합니다. Auth.changePassword 메서드가 완료되면 사용자를 설정 페이지로 리디렉션합니다.

Change indicator 몇 가지 스타일도 추가해 보겠습니다.

@media all and (min-width: 480px) {
  .ChangePassword {
    padding: 60px 0;
  }

  .ChangePassword form {
    margin: 0 auto;
    max-width: 320px;
  }
}

Change indicator 새로운 페이지를 src/Routes.js에 추가합니다.

<Route
  path="/settings/password"
  element={
    <AuthenticatedRoute>
        <ChangePassword />
    </AuthenticatedRoute>
  }
/>

Change indicator 그리고 해당 페이지를 임포트합니다.

import ChangePassword from "./containers/ChangePassword";

이제 /settings/password 페이지에서 비밀번호를 변경할 수 있습니다.

비밀번호 변경 페이지 스크린샷

다음으로, 사용자가 이메일을 변경할 수 있는 폼을 구현해 보겠습니다.