inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

React-firebase authentication 관련 질문

66

jourxy05

작성한 질문수 1

1

firebase authentication 을 사용해서 회원가입을 구현 했습니다. 회원가입 페이지에서 정보를 입력하고 휴대전화에 sms를 보낸 후 인증번호를 입력하면 회원가입이 되는 것 까지 모두 정상적으로 작동합니다. 하지만 회원가입 페이지에서 sms 인증을 보낸 후 대략 1~2분 후

*Timeout at handleError (http://localhost:3000/static/js/bundle.js:115024:58) at http://localhost:3000/static/js/bundle.js:115047:7

이런 오류가 발생합니다. 도통 왜 발생하는지 못찾겠습니다.. 한번만 도와주세요ㅜㅜㅜㅜ

회원가입 페이지 코드 부분 / sms 인증코드 확인 부분

const sendVerificationCode = async () => {
    if (!validateForm()) return;

    try {
        if (!window.recaptchaVerifier || window.recaptchaVerifier.expired) {
            resetRecaptcha();
        }

        const phoneNumber = `+82${formData.phoneNumber.slice(1)}`;
        const appVerifier = window.recaptchaVerifier;

        const confirmationResult = await Promise.race([
            signInWithPhoneNumber(auth, phoneNumber, appVerifier),
            new Promise((_, reject) =>
                setTimeout(() => reject(new Error("Request timeout")), 120000) // 2 minutes
            ),
        ]);

        window.confirmationResult = confirmationResult;
        alert("Verification code sent!");
    } catch (error) {
        console.error("Error sending verification code:", error);
        resetRecaptcha();
    }
};
const verifyCode = async () => {
    if (!inputValue.trim()) {
        alert("Please enter the verification code.");
        return;
    }

    try {
        const result = await Promise.race([
            window.confirmationResult.confirm(inputValue),
            new Promise((_, reject) =>
                setTimeout(() => reject(new Error("Verification timeout")), 180000) // 3 minutes
            ),
        ]);

        alert("Verification successful!");
        // Handle user information here...
    } catch (error) {
        console.error("Verification error:", error);
        alert("Verification failed. Please try again.");
    }
};


 

react firebase authentication

답변 1

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

jourxy05님께서 작성하신 코드를 검토해보니, SMS 인증 과정에서 발생하는 타임아웃 문제는 비동기 작업을 위한 Promise.race() 메소드를 사용하여 발생하고 있는 것으로 보입니다. 코드에서 Promise.race()는 두 개의 비동기 작업을 경쟁시키고, 먼저 완료된 프로미스가 반환됩니다.

특히, signInWithPhoneNumber 함수는 Firebase의 비동기 함수이며, 이 함수 실행 시간이 2분 넘을 경우 자동적으로 타임아웃 에러를 발생시키는 구조로 작성되어 있습니다.

이 문제를 해결하기 위해, 타임아웃 시간이 적절하게 설정되어 있는지 확인해 주시고, 네트워크 상태나 Firebase 설정을 점검해 보세요. 만약 지속적으로 문제가 발생한다면, Firebase 인증 설정에서 API 키나 다른 설정이 올바른지 확인해 보는 것도 좋습니다.

추가적인 사항으로는, 리캡차 검증이 만료된 경우, resetRecaptcha() 함수를 호출하여 재설정하는 부분이 있으니 그 부분을 통해 문제를 감지할 수 있는지 확인해보세요.

보다 구체적인 해결책이 필요하시면 Firebase의 문서를 참조하거나, Firebase 지원에 직접 문의하셔도 좋습니다.

문제가 잘 해결되기를 바랍니다! 😊

Firebase Phone Authentication 문서도 참고해 보세요.

커서에서 파일추가 Side bar 추가가 어려워요

0

14

1

섹션 8 git 및 github사용 관련

0

12

1

바이브코딩으로서의 개발공부

0

15

1

github 사용 관련 질문

0

15

1

클로드 코드 명령어 입력란이 맨 밑에 있어요

0

9

1

prd생성 관련 소스..

0

12

1

토큰오류 아시나요?

0

15

1

유튜브 시연 영상 추가 기능 강의 업로드 계획

0

12

1

(VS코드) install command 아무리 해도 안나옵니다

0

24

1

강의 수강 후 포트폴리오 준비 방향에 대해 조언 부탁드립니다.

2

28

1

@/styles/globals.css'

0

24

2

VS Code의 Command pallet에서 'install command'해도 'code' command가 안보입니다.

0

29

1

파일 디렉토리 구조가 다르네요

0

30

1

클로드 초기설정

0

30

1

슬슬 따라하기가 힘들어진다.

0

70

2

[문의] 섹션 7 미션 진행 중...

0

29

2

기본 브랜치의 이름이 master에요.

0

42

2

관리자 페이지 질문

0

21

1

plans 생성이 안됩니다.

0

37

3

더빙에 어떤 ai가 쓰였는지 궁금합니다.

0

46

2

보안 적용에 대한 강의가 있을까요?

0

31

2

Auto-memory 기능

0

34

2

64강 context 7 관련 질문

0

38

2

Auto-memory 기능

0

30

1