Trouble Shooting

supabase에서 비밀번호를 틀리면 틀렸다는 응답 값을 보내서 client에서 여러가지로 구분짓고 싶었는데 그냥 로그인 성공을 제외한 모든 status가 냅다 catch로만 잡힘.

해결한 서버 측 코드

api > auth > login > route.ts

export async function POST(request: NextRequest) {
  const supabase = createClient();
  const { email, password } = await request.json();

  try {
    const { data, error } = await supabase.auth.signInWithPassword({
      email,
      password,
    });
    if (error) {
      if (
        error.status === 400 &&
        error.message === "Invalid login credentials"
      ) {
        return NextResponse.json(
          { message: "비밀번호가 틀렸습니다." },
          { status: 201 } //이 부분이 핵심. response 값을 받고싶다면 2로 시작해야됨
        );
      }
      return NextResponse.json(
        { message: error.message },
        { status: error.status || 400 }
      );
    }

    return NextResponse.json({ message: "로그인 성공", data }, { status: 200 });
  } catch (error) {
    return NextResponse.json({ message: "서버 오류", error }, { status: 500 });
  }
}

내가 하고 싶었던 것

비번이 맞을 때 > 로그인 성공! 200 코드를 보내서 로그인이 성공했음을 알림.
비번이 틀렸을 때 > 로그인 실패! 400 코드로 비밀번호가 틀림을 알림.

나는 당연히 비밀 번호가 틀리면 4** 으로 시작하는 status를 넘겨주면 되는 줄 알았다.
왜냐면 오류나면 4로 시작하는 status가 넘겨지니까...

그치만 2로 시작하지 않는 status인 400이나 500은

클라이언트 측 코드에서

try catch 문에서 error로 catch된다.

나는 왜 내가 return으로 NextResponse를 넘겨줬는데.. 결과가 response에서 나오는 것이 아닌 서버 error로 catch가 되는걸까!? 하며 고통스러워했다.

하지만 error로 캐치 되지 않으려면 2로 시작하는 status를 넘겨주면 된다는 것을 알게되어 기쁘다.

오늘 한 것

• 회원가입/로그인 기능을 완료하였고 리팩토링까지 완료했다!

내일 할 것

• 비번 틀렸을 때 helper text "비밀번호가 일치하지 않습니다." 라고 보여줄것!
• 소셜로그인 카카오 api 연결하고 기술 공부해서 기능 완성시키기..