inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

React-firebase authentication 관련 질문

72

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 문서도 참고해 보세요.

스니펫이 이상해요

0

6

1

/output-style 명령어는 폐기 되었다고 나오네요.

0

9

1

프롬프트 작성시 html, css, javascript

0

8

1

Editor Component의 최적화 불가능 이슈

0

13

2

Cursor 창이 수업 내용과 달라요.

0

14

2

Supabase MCP 관련 질문입니다

0

12

1

에러핸들링- rootlayout에 관하여

0

9

2

useCallback ⊂ useMemo

0

19

2

강의 내용 누락

0

8

0

클로드 로그인 후 승인창이 안떠요

0

24

1

깃허브 저장소를 어디에 첨부하셨나요?

1

24

1

61강 claude.local.md 변경사항 관련 질문

0

29

3

스타터 저장소

1

30

1

라이브러리 설치 질문

0

24

2

linter 질문

0

32

2

github

0

38

2

react-fetch -2 (loading) 에러

0

34

2

Claude에서 Bash, PowerShell 커맨드 묻기

0

41

2

mission 4 실행중 같은 질분 반복

0

31

2

리덕스 툴킷 맵다

0

27

1

sequential thinking mcp 사용 유용성에 대하여 질문있습니다.

0

51

2

타입 점검하기 swr관련 질문 있습니다.

0

39

2

VS Code? Cursor?

0

60

1

터미널과 클로드코드의 차이

0

57

2