inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

React 팀 프로젝트 (로그인 검증 기능)

108

이록기

작성한 질문수 1

0

Supabase의 DB로 로그인 검증 기능을 만들려고 해요 그런데 로그인 검증을 하기 위해서 예외처리를 테스트 하는데 error 400 (Bad request) 가 발생 합니다. 데이터 값이 있으면 로그인은 됩니다. 하지만 존재 하지 않는 값의 예외처리를 할려 하는데 무조건 error 400 (Bad request) 가 나타나내요 이 문제를 해결해 줄 수 있는분 답변 부탁 드립니다.

  const handleLogin = async (e) => {
    e.preventDefault();

    if (!email || !password) {
      alert('이메일과 비밀번호를 입력해주세요.');
      return;
    }

    // 이메일 형식 확인 (정규식 사용)
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(email)) {
      alert('올바른 이메일 형식을 입력해주세요.');
      return;
    }

    if (password.length < 6) {
      alert('비밀번호는 최소 6자 이상이어야 합니다.');
      return;
    }

    try {
      const { data, error } = await supabase.auth.signInWithPassword({
        email,
        password,
      });

      if (error) {
        alert('이메일 또는 비밀번호가 잘못되었습니다.');
        return;
      }

      if (data?.user) {
        alert('로그인이 완료되었습니다.');
        navigate('/');
      } else {
        alert('회원 정보가 존재하지 않습니다.');
      }
    } catch (err) {
      console.error('오류 발생:', err);
      alert('오류가 발생했습니다. 잠시 후 다시 시도해주세요.');
    }
  };

react supabase vscode

답변 1

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.
이록기 님의 문제를 해결하기 위해 몇 가지 점검해볼 수 있는 사항을 안내해드리겠습니다.

첫 번째로, 로그인 검증 시 실제로 Supabase에서 반환하는 오류 메시지를 확인하는 것이 중요합니다. 400 Bad Request가 서버로부터 왔다면 주로 요청이 올바르게 구성되지 않았을 가능성이 있습니다.

  1. 오류 객체 확인: console.error()을 사용하여 error 객체의 자세한 내용을 출력해보세요. 예외 처리 블록 내에서 console.log(error)로 오류 메시지를 확인할 수 있습니다.
   if (error) {
     console.error('로그인 오류:', error);
     alert(error.message || '이메일 또는 비밀번호가 잘못되었습니다.');
     return;
   }
  1. API 요청 데이터 검토: supabase.auth.signInWithPassword() 메서드에 전달하는 email과 password가 올바르게 전달되는지 확인해보세요. 콘솔 로그나 디버깅을 통해 값이 올바른지 체크하는 것이 좋습니다.

  2. Supabase 에러 확인 및 문서 참고: Supabase의 공식 문서나 오류 메시지에 대한 정보를 참고하여 구체적인 에러 상황을 파악할 수 있습니다. Supabase Authentication Error Codes를 통해 지원되는 오류 코드와 해결책을 찾아보실 수 있습니다.

위의 방법들을 통해 400 Bad Request가 발생하는 정확한 이유를 파악하는 것이 중요합니다. 오류 메시지를 구체적으로 파악하면 문제 해결에 더 가까워질 것입니다. 도움이 되셨길 바랍니다!

계속해서 문제 발생할 경우, 추가 정보를 제공해주신다면 더 나은 답변을 드릴 수 있도록 하겠습니다. 😊

Git, Github 기초부터 실전까지 중 질문드립니다.

0

9

2

재생이 안됩니다.

0

15

0

클로드 설치 및 강의 미션 관련

0

19

0

/config Thinking mode 설정

0

20

1

안녕하세요, 강의 수강 중인 학생입니다.

0

19

2

rules 폴더나 CLAUDE.md 파일 관리 관련 질문

0

20

2

cursor 안에서 다운로드 안되는 게 많은데 대체가 필요할까요

0

40

2

업데이트로 인한 에이전트 생성 변경

0

43

2

starter kit 프로젝트에 prd 문서 만들기

0

51

2

명령어 여러줄 입력방법?

0

49

2

ctrl + 't' 단축어가 안먹어요

0

40

1

클로드코드 계획 보고 방법 알고싶어요.

0

54

2

실무 버전 출시는 언제?

0

50

1

예시 1, 2, 3에서 질문있습니다.

0

46

2

Cursor 프로젝트 목록 및 작업 환경 동기화 문의

0

36

1

파워쉘, 터미널

0

48

2

스킬과 서브에이전트 병행 사용 질문

0

57

2

강의 잘 들었습니다.

0

36

1

터미널에서 커서 AI 직접 실행

0

42

2

해결했습니다

0

39

1

이런 경우는 어떤 조치를 취해야할까요?

0

49

2

hooks 설정이 안되요

0

52

2

영상 최신으로 엡데이트 요청

0

73

2

소스 코드가 회사 보안 프로그램에 막혀서 안 보여요.

0

64

2