@psyrenpark/auth

v1.0.81

Published

2 years ago

viba auth

Downloads

0High
0Medium
0Low

psyrenpark

viba auth psyrenpark

@psyrenpark/auth

설명

인증, 토큰, email 발송등 auth에 관하여 클라이언트 (cms/web) 재사용을 위해 공통모듈로 분리
cognito라는 회원관리 시스템을 사용함으로써 패스워드등을 별도 보관하여 높은 보안 및 인증에 관한 효율적 사용성을 얻을수 있음

react 지원
react-native 지원
vue.js 지원
gatsby.JS 지원
next.js(테스트중)

업데이트 내용

v1.0.79

회원 가입시 이미 가입되어 있고 인증도 된경우의 에러 코드 변경

code : InvalidParameterException message : User is already confirmed. => code : UsernameExistsException message : User is already confirmed.

필요 파일

각 프로젝트의 개발 환경에 맞는 aws-exports.js 요청

React- native는
<project root>/aws-exports.js

web/cms은
<project root>/src/aws-exports.js

설정 및 설치

yarn add @psyrenpark/auth
yarn add @psyrenpark/api
yarn add @psyrenpark/storage
yarn add amazon-cognito-identity-js
yarn add aws-amplify

// react-native 추가 설치
yarn add @react-native-community/netinfo

DB tb_user 의 필수 컬럼

프로젝트마다 사용될 유저 테이블에 들어가야할 요소를 서버 개발자에게 요청할것 (중요)

email or phone (필수) // 고유키
reg_dt
up_dt
del_dt
signup_type // 회원가입 방법
user_type // 프로젝트마다 고유한 유저 타입이 있다면 정할것
user_name
...

루트에서 세팅

//--------------------------------------------------
// 각 프로젝트 루트
import { Auth } from "@psyrenpark/auth";
import { Api } from "@psyrenpark/api";
import { Storage } from "@psyrenpark/storage";
import awsmobile from "./aws-exports";
Auth.setConfigure(awsmobile);
Api.setConfigure(awsmobile);
Storage.setConfigure(awsmobile);

//--------------------------------------------------
// 혹 import가 지원 되지 않는 javascript 버전에서 사용시

// aws-exports
// export default awsmobile;
module.exports = awsmobile; // 로 변경

// 각 프로젝트 루트
const { apiObject } = require("./api");
const { Api } = require("@psyrenpark/api");
const { Auth, AuthType } = require("@psyrenpark/auth");
const { Storage } = require("@psyrenpark/storage");
const awsmobile = require("./aws-exports");

Auth.setConfigure(awsmobile);
Api.setConfigure(awsmobile);
Storage.setConfigure(awsmobile);

로딩 콜백 함수 샘플

로딩에 대한 불편함을 해결하기위해 콜백형식의 함수를 주입가능하도록 되어있음

// 아래 auth 함수가 실행될때 로딩함수를 넣으면
// 시작시 isLoading => true
// 종료시 isLoading => false
// 로 주입한 함수가 호출됨
const loadingFunction = (isLoading) => {
  dispatch({ type: "SET_IS_LOADING", payload: isLoading });
  // or
  setIsLoading(isLoading);
};

로그인 여부 체크

이미 로그인한적이 있는지 체크하는 함수
이 과정을 한 후에 인증이 필요한 api 사용가능
비동기, 콜백 방식중 필요한 방식을 선택하여 사용할 것
cms라면 루트 라우팅에서 로그인창을 띄울지 말지를 결정하는 프로세스(중요)

import { Auth } from "@psyrenpark/auth";

//--------------------------------------
// 비동기 방식
const isCheckToLoginFunction = async (props) => {
  try {
    var auth = await Auth.currentSession();
    // 로그인 상태
    return true;
  } catch (error) {
    // 로그아웃 상태
    return false;
  }
};

//--------------------------------------
// 콜백 방식
const checkToLoginFunction = async (props) => {
  Auth.currentSessionProcess(
    async (data) => {
      // 성공처리 및 로그인 된 상태
      // 자동 로그인 필요
      // 서버에서 유저 정보 필요시 여기서 비동기로 가져올것
    },
    (error) => {
      // 실패처리 및 로그아웃 상태
      // 로그인 화면으로 이동 필요
    },
    loadingFunction
  );
};

특정 그룹 포함 여부 체크

이 유저가 특정 그룹에 속해있는지 체크하는 함수
이로직은 토큰안에 유저 그룹을 포함시키는 방법으로써 각 프로젝트마다 다르니 필요시 요청 (높은 보안 요구시)
user, admin, manager 등이 있을수 있다. (기능필요시 요청 할것)

import { Auth } from "@psyrenpark/auth";

//--------------------------------------
// 비동기 방식
const isIncludeGroupFunction = async (props) => {
  try {
    var isIncludeGroup = await Auth.isIncludeGroup("admin");

    if (!isIncludeGroup) {
      await Auth.signOut();
      // 로그아웃하고 홈으로 리다이렉트  및 유저 관련 리덕스 초기화
      return;
    }

    // 정상로직
  } catch (error) {}
};

cms등 특정 유저 로그인을 막기위한 처리 아닌경우 강제 로그아웃

cms나 특정 유저만 사용가능 해야할 경우
로그인후 await Auth.currentSession() 로 로그인체크
Auth.isIncludeGroup("특정 그룹 key"); 로 토큰안에 key가 포함되어 있는지 체크
false 일경우 강제 로그아웃 및 유저 정보 관련된 정보 초기화 할것

const isIncludeGroupFunction = async (props) => {
  try {
    var auth = await Auth.currentSession();
    console.log("checkAuth -> auth", auth);

    var isAdmin = await Auth.isIncludeGroup("admin");

    console.log("checkAuth -> isAdmin", isAdmin);

    if (!isAdmin) {
      // 로그아웃후 리덕스나 내부 저장소 날리는 작업필요
      await Auth.signOut();

      //clear()
      return;
    }
    // 성공후 자기 관리자 정보 가져오기
  } catch (error) {
    // 에러시 강제 로그아웃 후 리덕스나 내부 저장소 날리는 작업필요
    await Auth.signOut();

    //clear()
  }
};

회원가입

회원가입 함수
[선인증] 필요시 (휴대폰 인증, pass등) 화면 플로우에 맞게 클라이언트에서 미인증 서버 api 호출을
진행후 이결과를 cognitoRegComm안에 포함시켜준다. (중요)
현재 이메일 또는 전화번호 회원가입만 지원한다. (아이디등은 차후)
프로젝트에 따라 이메일을 자동 인증하는 경우와 인증을 체크하는 경우 2가지가 있다.
[후인증] 필요시 이메일 인증을 하는경우 이메일에 발송된 코드 입력창으로 이동시켜줘야한다.
[자동인증] 되는 경우 성공시 로그인화면 또는 자동로그인 화면으로 이동해야한다.
email은 소문자로 변경해주며, 앞뒤 트림도 해줘야한다.

import { Auth, CurrentAuthUiState, AuthType } from "@psyrenpark/auth";
//--------------------------------------
// 콜백 방식

const signUpFunction = async (formData) => {
  Auth.signUpProcess(
    {
      email: formData.userEmail,
      password: formData.userPassword,
      authType: AuthType.EMAIL,
      lang: "en", // 가입시 유저 선택 언어
      cognitoRegComm: {
        // 서버에서 회원가입시 처리할 필요 파라미터를 첨부한다. 위의 [DB tb_user 의 필수 컬럼] 참고
        // 패스워드 같은 정보는 포함시키지 않는다.
        name: formData.userName,
        age: formData.userAge,
        // ...
      },
    },
    async (data) => {
      // 성공처리 및 회원가입 성공
      // 자동인증인 경우 로그인 화면으로 이동  및 자동로그인 필요
      // 인증을 체크하는 경우 인증코드 입력창 화면으로 이동 필요
    },
    (error) => {
      // 회원가입 실패
    },
    loadingFunction
  );
};

회원가입 후 인증 확인 함수

회원인증 함수
인증을 체크하는 경우 코드입력 화면에서 코드값을 넣어 아래 함수를 실행한다.

import { Auth, CurrentAuthUiState, AuthType } from "@psyrenpark/auth";
//--------------------------------------
// 콜백 방식
const confirmSignUpFunction = async (formData) => {
  Auth.confirmSignUpProcess(
    {
      // 만약 화면 이동을 하였다면 이 변수는 이전화면에서 가져와야할 필요가 있다. (라우팅 porps,redux, context등을 이용)
      email: formData.userEmail,
      password: formData.userPassword,
      authType: AuthType.EMAIL,
      code: formData.userCode, // 이메일에 있는 인증코드
    },
    async (data) => {
      // 성공처리 및 인증 성공
      // 로그인 화면이나 자동로그인 필요
    },
    (error) => {
      // 실패처리,
      // 인증코드가 틀렸을경우 및 만료 된경우
      // 인증 메일 재전송이 필요하다.
    },
    loadingFunction
  );
};

회원가입 후 인증 재전송 함수

유저가 잘못 코드를 입력한경우 또는 재요청 버튼을 클릭한경우 아래 함수 실행

import { Auth, CurrentAuthUiState, AuthType } from "@psyrenpark/auth";
//--------------------------------------
// 콜백 방식
const resendSignUpFunction = async (formData) => {
  Auth.resendSignUpProcess(
    {
      // 만약 화면 이동을 하였다면 이 변수는 이전화면에서 가져와야할 필요가 있다. (라우팅 porps,redux, context등을 이용)
      email: formData.userEmail,
    },
    async (data) => {
      // 성공처리
      // 성공적으로 인증 메일 재전송
    },
    (error) => {
      // 실패처리,
    },
    loadingFunction
  );
};

import { Auth, CurrentAuthUiState, AuthType } from "@psyrenpark/auth";

//--------------------------------------
// 콜백 방식
const signInFuntion = async (formData) => {
  Auth.signInProcess(
    {
      email: formData.userEmail,
      password: formData.userPassword,
      authType: AuthType.EMAIL,
    },
    async (data) => {
      // 성공처리 및 로그인 된 상태
      // 서버에서 유저 정보 필요시 여기서 비동기로 가져올것
      // 서버로 자기 정보 가져오는 api를 호출해야한다.
    },
    async (data) => {
      // 회원가입은 되었으나 인증을 안했을경우
      // 인증 안하고 강제 종료 했거나 화면 나갔을경우 타는 함수
      // 인증 화면으로 이동필요
      // 자동으로 인증 메일 재발송됨
    },
    (error) => {
      // 실패처리,
    },
    loadingFunction
  );
};

소셜 로그인 관련

소셜 로그인 라이브러리 추가후 로그인후 나오는 인증 정보중
email, password는 고유 아이디, name은 있으면 넣고 없으면 디폴트로 넣어줄것
password의 고유 아이디는 앱, 웹 에서 서로 같아야 각각에서 같은 계정으로 로그인이 가능함. (중요)
앱을 여러개로 출시할경우 소셜 유형에 따라 (유저용앱, 관리자용앱) 고유 아이다가 서로 다를수 있으니 주의할것 (예씨 카카오톡)
각 라이브러리(웹, 앱) 로그인후 나오는 토큰 분해후 잘 체크해볼것
user_info 필수 param / [email, password, name]
소셜특징중 이메일을 알아낼수 없는경우 고유한 키를 조합할것 예시 (고유키+@[소셜].com (중요)
암호화가 필요할경우 isCrypto:true (테스트중)

import { Auth, CurrentAuthUiState, AuthType } from "@psyrenpark/auth";

//--------------------------------------
// 콜백 방식
const signInProcess = async (
    params = {},
    successCallback,
    failCallback,
    loadingCallback,
  ) => {
    if (loadingCallback) {
      loadingCallback(true);
    }

    try {

      // 중요
      // 쇼설 로그인 라이브러리 추가후 로그인후 나오는 인증 정보중
      // email, password는 고유 아이디, name은 았으면 넣고 없으면 디폴트로 넣어줄것
      // user_info 필수 param / email, password, name
      var user_info = await appleLogin();  //or await googleLogin();
      // var user_info  =
      // {
      //   ...userInfo.user, // 디비에 넣을 필요정보들
      //   email: userInfo.user.email, // 필수
      //   password: userInfo.user.id, // 필수
      //   name: user.givenName,       // 필수
      // }

    } catch (error) {
      if (loadingCallback) {
        loadingCallback(false);
      }

      if (failCallback) {
        failCallback(error);
      return;
    }

    await Auth.signUpProcess(
      {
        email: user_info.email,
        password: user_info.password,
        authType: AuthType.APPLE,         // or  authType: AuthType.GOOGLE, // enum에 없을경우 요청할것
        lang: params.lang ? params.lang : 'en',
        cognitoRegComm: {
          ...user_info,
          ...params,
        },
      },
      async (data) => {
        if (successCallback) {
          await successCallback(data);
        }
      },
      (error) => {
        if (failCallback) {
          failCallback(error);
        }
      },
      (flag) => {
        // if (!flag && loadingCallback) {
        loadingCallback(flag);
        // }
      },
    );
  };

비밀번호 분실 1단계

로그아웃 상태에서 비밀번호를 모를경우
이메일 인증후 새로운 패스워드 설정이 가능하다.
비밀번호 변경은 이메일 타입만 가능하다. 그외에는 비활성

import { Auth, CurrentAuthUiState, AuthType } from "@psyrenpark/auth";

//--------------------------------------
// 콜백 방식
const forgotPasswordFunction = async (formData) => {
  Auth.forgotPasswordProcess(
    {
      email: formData.userEmail,
      authType: AuthType.EMAIL,
    },
    async (data) => {
      // 성공처리 및 인증 메일 발송됨
      // 패스워드 분실 2단계로 이동
    },
    (error) => {
      // 실패처리,
    },
    loadingFunction
  );
};

비밀번호 분실 2단계

유저가 가입한 이메일로 인증메일 발송됨
발송된 유저 코드 입력 와 새로운 패스워드 입력 필요

import { Auth, CurrentAuthUiState, AuthType } from "@psyrenpark/auth";

//--------------------------------------
// 콜백 방식

const confirmForgotPasswordFunction = async (formData) => {
  Auth.confirmForgotPasswordProcess(
    {
      // 만약 화면 이동을 하였다면 이 변수는 이전화면에서 가져와야할 필요가 있다. (라우팅 porps,redux, context등을 이용)
      email: userEmail,
      code: formData.userCode,
      newPassword: formData.userPassword, //새로 지정할 newPassword 이다.
      authType: AuthType.EMAIL,
    },
    async (data) => {
      // 성공처리 및 패스워드 변경
      // 성공하면 자동으로 로그인 되니
      // 바로 메인으로 이동하면됨
    },
    (error) => {
      // 코드 잘못 입력
    },
    loadingFunction
  );
};

비밀번호 분실 2단계 인증 코드 재전송

유저가 잘못 코드를 입력한경우 또는 재요청 버튼을 클릭한경우 아래 함수 실행

import { Auth, CurrentAuthUiState, AuthType } from "@psyrenpark/auth";
//--------------------------------------
// 콜백 방식
const resendForgotPasswordFunction = async (formData) => {
  Auth.resendForgotPasswordProcess(
    {
      // 만약 화면 이동을 하였다면 이 변수는 이전화면에서 가져와야할 필요가 있다. (라우팅 porps,redux, context등을 이용)
      email: formData.userEmail,
      authType: AuthType.EMAIL,
    },
    async (data) => {
      // 성공처리
    },
    (error) => {
      // 실패처리,
    },
    loadingFunction
  );
};

로그인 상태에서 패스워드 변경

로그인된 상태에서 비밀번호를 변경할 경우
여기서는 메일이 발송되지않는다.
이미 로그인된 상태에서 실행해야한다.

import { Auth, CurrentAuthUiState, AuthType } from "@psyrenpark/auth";
//--------------------------------------
// 콜백 방식
const changePasswordFunction = async (formData) => {
    Auth.changePasswordProcess(
      {
        // 만약 화면 이동을 하였다면 이 변수는 이전화면에서 가져와야할 필요가 있다. (라우팅 porps,redux, context등을 이용)
        email: formData.userEmail,
        oldPassword: formData.userOldPassword,
        newPassword: formData.userNewPassword,
        authType: AuthType.EMAIL,
      },
      async (data) => {
        // 성공처리
        // 정상적으로 패스워드 변경
        // 로그아웃 시켜 로그인 화면으로 이동시키는 편이 좋음
      },
      (error) => {
        // 실패처리

      },
      loadingFunction
    );
  );
};

로그아웃

로그아웃을 하면 토큰이 발급되지 않는다
isCheckToLoginFunction or checkToLoginFunction에서 실패남
로그아웃후 로그인화면으로 강제 이동필요(중요)
소셜 로그인일경우 성공 처리 사이에 소설 로그인을 넣어서 처리한다.

import { Auth, CurrentAuthUiState, AuthType } from "@psyrenpark/auth";
//--------------------------------------
// 콜백 방식
const signOutFunction = async () => {
  Auth.signOutProcess(
    {
      authType: AuthType.EMAIL,
    },
    async (data) => {
      // 성공처리 및 로그아웃
      // 리덕스나, context의 저장된 정보 초기화 필요
      // 그후 로그인 화면으로 이동
    },
    (error) => {
      // 실패처리,
    },
    loadingFunction
  );
};

유저 탈퇴 관련

실제 amplify에서 삭제 기능은 없으므로 서버딤딩지에게 유저 삭제 api 기능 요청할것
서버 담장자는 express-lib-doc.md 참고
클라이언트는 이 api가 성공후 꼭 반드시 로그아웃후 redux, context안의 유저 정보등 정리 할것
이후 web, cms, react-native등 이후 강제 로그인화면으로 이동 필요

에러 코드 정의

실제 amplify에서 주는 코드 외
이 라이브러리에서 던져 주는 에러코드도 있다
이 목록에 없는 코드 발견시 제보 바람


// amplify에서 error
error.code === "UsernameExistsException"        // email등이 중복되었을 경우
error.code === "InvalidParameterException"      // 필요 파라미터가 부족할경우
error.code === "NotAuthorizedException"         // 인증 권한이 없을경우
error.code === "UserNotFoundException"          // 헤딩 유저가 없을 경우
error.code === "CodeMismatchException"          // 인증 코드가 틀렸을경우
error.code === "LimitExceededException"         // 인증시도 초과시
error.code === "UserLambdaValidationException"  // 개발시난 에러 (api 담당자에게 버그수정 요청)


// custom error
error.code === "NotSignedException"             // 로그인 되지 않았을 경우
error.code === "NotImplementedException"        // 아직 미구현 일경우 (쇼셜 관련 기능)
error.code === "NotSupportAuthTypeException"    // 아직 지원되지 않는 쇼셜 타입
error.code === "SamePasswordException"          // 패스워드 변경시 이전패스워드와 현재 패스워드가 같을경우


// 에러 코드 처리
// - error.code로 검사할것 사용할것

(error) => {
  // 실패처리,
  console.log("changePasswordFunction -> error.code", error.code);
  console.log("changePasswordFunction -> error.name", error.name);
  console.log("changePasswordFunction -> error.message", error.message);
  alert(error.message);
},

// 패스워드를 잘못 입력했을경우 참고 자료
- https://github.com/aws-amplify/amplify-js/issues/1234

- ( 10번 이내 )
code    : NotAuthorizedException
message : "Incorrect username or password"

- ( 10번 이상 )
code    : NotAuthorizedException
message : "Password attempts exceeded"

// 무차별 대입 공격으로부터 보호

- https://stackoverflow.com/questions/37732970/how-aws-cognito-user-pool-defends-against-bruteforce-attacks

`로그인 시도는 5회 실패할 수 있습니다. 그 후 우리는 1초에서 시작하여 각 시도가 실패한 후 최대 약 15분까지 두 배로 증가하는 시간으로 임시 잠금을 시작합니다. 임시 잠금 기간 동안의 시도는 무시됩니다. 임시 잠금 기간이 지난 후 다음 시도가 실패하면 마지막 시간의 두 배 기간으로 새로운 임시 잠금이 시작됩니다. 시도하지 않고 약 15분을 기다리면 임시 잠금도 재설정됩니다. 이 동작은 변경될 수 있습니다.`

이메일 전송 양식 설명

변경필요시 아이콘과 맨트를 적어서 서버관리자에게 전달할것
다국어처리 필요시 서버관리자에게 전달 할것
이메일전송시 일단 기본적 양식으로 날라감
예시 맨트 SBAA0404: "안녕하세요",
SBAA0405: "싸이페어에 오신 것을 환영합니다",
SBAA0406: "하단의 인증번호를 싸이페어 화면에 입력해주세요.",
SBAA0407: "이메일 인증번호",
SBAA0408: "(주)싸이페어",
SBAA0409: "",
SBAA0410: "이 메일은 (주)싸이페어에서 발송되었습니다.", \

추가로 이메일에 붙을 아이콘 첨부바람

예시 icon https://sf-prod-file.s3-ap-northeast-1.amazonaws.com/public/email/img/icon/square_logo_Blck_400.png
완성 예시 https://sf-prod-file.s3-ap-northeast-1.amazonaws.com/public/email/email-example.jpg

react-hook-form 예시

필수는 아니나 사용하면 편리
form속성같이 auth화면에서 사용하면 편리하게 개발 가능
필수 속성, 입력값 정규식 체크 등이 편리하게 사용가능
자세한 내용은 https://react-hook-form.com/ 참고

//-------------------------------------------
// react 버전

import React, { useState, useEffect, useContext } from "react";
import { Grid, Checkbox, TextField } from "@material-ui/core";
//-------------------------------------------
// redux
import { useDispatch, useSelector } from "react-redux";

//--------------------------------------------------
// auth
import {
  Auth,
  CurrentAuthUiState,
  AuthType,
  UserState,
} from "@psyrenpark/auth";

//--------------------------------------------------
// hook
import { useForm, useWatch, Controller } from "react-hook-form";
import { useTypedController } from "@hookform/strictly-typed";

//--------------------------------------------------

export const SignInComponent = (props) => {
  const reducer = useSelector((state) => state.reducer);
  const dispatch = useDispatch();

  // useForm 속성
  const {
    register,
    handleSubmit,
    watch,
    errors,
    formState,
    control,
    trigger,
  } = useForm();

  // material ui 사용시
  const TypedController = useTypedController({ control });

  const { toggle } = watch();

  const signInFuntion = async (data) => {
    console.log("signInFuntion -> data", data);

    var userEmail = data.userEmail;
    var userPassword = data.userPassword;
  };

  return (
    <Grid className="sign_in sign">
      {/* Input 사용시 */}
      <Grid className="input_wrap">
        <input
          name="userEmail"
          ref={register({
            required: true,
            pattern: /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/,
          })}
          type="text"
          placeholder="이메일 주소"
        />
      </Grid>

      {/* material ui TextField 사용시 */}
      <Grid className="input_wrap">
        <TypedController
          name="userEmail"
          defaultValue=""
          render={(props) => <TextField {...props} />}
          rules={{
            required: true,
            pattern: /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/,
          }}
        />
      </Grid>

      {errors?.userEmail && (
        <p className="warning">email 정보가 올바르지 않습니다.</p>
      )}
      <Grid className="input_wrap">
        <input
          name="userPassword"
          ref={register({
            required: true,
            pattern: /(?=.*\d{1,50})(?=.*[~`!@#$%\^&*()-+=]{1,50})(?=.*[a-zA-Z]{2,50}).{8,50}$/,
          })}
          type="password"
          placeholder="비밀번호"
          onKeyUp={() => {
            if (window.event.keyCode === 13) {
              handleSubmit(signInFuntion);
            }
          }}
        />
      </Grid>
      {errors.userPassword && (
        <p className="warning">password 정보가 올바르지 않습니다.</p>
      )}
      <button
        type="button"
        className={
          watch("userEmail", false) && watch("userPassword", false)
            ? "btn_move on"
            : "btn_move"
        }
        // className={"btn_move"}
        onClick={handleSubmit(signInFuntion)}
      >
        다음
      </button>
    </Grid>
  );
};

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@psyrenpark/auth

설명

업데이트 내용

필요 파일

설정 및 설치

최신 버전 적용 방법

DB tb_user 의 필수 컬럼

루트에서 세팅

로딩 콜백 함수 샘플

로그인 여부 체크

특정 그룹 포함 여부 체크

cms등 특정 유저 로그인을 막기위한 처리 아닌경우 강제 로그아웃

회원가입

회원가입 후 인증 확인 함수

회원가입 후 인증 재전송 함수

로그인

소셜 로그인 관련

비밀번호 분실 1단계

비밀번호 분실 2단계

비밀번호 분실 2단계 인증 코드 재전송

로그인 상태에서 패스워드 변경

로그아웃

유저 탈퇴 관련

에러 코드 정의

이메일 전송 양식 설명

react-hook-form 예시