비밀번호 해싱 적용하기

임홍원·2024년 1월 25일
post-thumbnail

bcrypt로 비밀번호 해싱을 적용했다.
본인은 Next.js, NextAuth, Typescript를 사용중이다.

설치

yarn add bcrypt
yarn add @types/bcrypt

타입스크립트를 사용중이므로 @types/bcrypt도 설치해준다.

해싱

비밀번호 해싱은 프론트단에서 하면 보안 이슈가 발생할 수 있으므로 백엔드단에서 해 주어야 한다.

하지만 나는 Next.js 를 사용하고 있으므로 route handlers에서 사용하였다.

// api/auth/signup/route.ts
const hashedPassword = await bcrypt.hashSync(userData.password, 5);

  const { error: saveError } = await supabase
    .from('company_user')
    .insert<Omit<CompanyUserSignUpType, 'confirmPassword'>>({
      ...userData,
      password: hashedPassword,
    });

hashSync로 비밀번호 해싱을 적용한다.
두번째 매개변수는 해싱연산을 얼마나 할 것인지 정해주는 매개변수이다.

if (userData) {
          const result = await bcrypt.compareSync(
            password,
            userData?.password as string,
          );
          if (!result) {
            return null;
          }
        }

해싱된 비밀번호를 비교하기위해 bcrypt의 compareSync 메서드를 사용한다.

compareSync의 첫번째 매개변수로는 평문의 문자열이고, 두번째 매개변수로는 해싱된 문자열이다.

profile
Frontend Developer

0개의 댓글