I’m working on a React JS application where I use Firebase authentication and reCAPTCHA for phone number verification. The issue arises after the user inputs their phone number, solves the reCAPTCHA, and proceeds to the next screen. After some time, I get a Timeout error, even though the reCAPTCHA was solved correctly and the verification flow should be complete.

Here’s the flow:

User enters their phone number.
reCAPTCHA is solved and sendVerificationCode is triggered successfully.
User proceeds to the next screen to input the verification code.
After some time (without user input), a Timeout error occurs.

login:1 Uncaught (in promise) Timeout (h)
setTimeout      
(anonymous) @   recaptcha__es.js:61
(anonymous) @   recaptcha__es.js:978
(anonymous) @   recaptcha__es.js:366
(anonymous) @   recaptcha__es.js:165
(anonymous) @   recaptcha__es.js:287
(anonymous) @   recaptcha__es.js:287
(anonymous) @   recaptcha__es.js:506
(anonymous) @   recaptcha__es.js:978
(anonymous) @   recaptcha__es.js:1103
Promise.then        
d.B @   recaptcha__es.js:1103
(anonymous) @   recaptcha__es.js:483
(anonymous) @   recaptcha__es.js:483
(anonymous) @   recaptcha__es.js:366
(anonymous) @   recaptcha__es.js:165
F   @   recaptcha__es.js:287
Promise.then        
I   @   recaptcha__es.js:287
(anonymous) @   recaptcha__es.js:287
(anonymous) @   recaptcha__es.js:287
(anonymous) @   recaptcha__es.js:506
(anonymous) @   recaptcha__es.js:482
(anonymous) @   recaptcha__es.js:423
ot  @   recaptcha__es.js:738
l   @   recaptcha__es.js:564

My recaptcha and verification flow is this:

    const initializeRecaptcha = () => {
        if (window.recaptchaVerifier) {
            window.recaptchaVerifier.clear();
        }
    
        window.recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {
            'size': 'invisible',
            'callback': (response) => {
                console.log('reCAPTCHA solved, you can now proceed with phone verification.', response);
            },
            'expired-callback': () => {
                console.log('reCAPTCHA expired, reinitializing...');
                initializeRecaptcha();
            }
        });
    };
    

    const handlePhoneSubmit = async () => {
        try {
            initializeRecaptcha();
            
            const recaptchaToken = await window.recaptchaVerifier.verify();
            console.log('reCAPTCHA token verified:', recaptchaToken);
            
            const formattedPhone = `+${phone}`;
            console.log("Phone number submitted in E.164 format: ", formattedPhone);
            
            await sendVerificationCode(formattedPhone);
            setCurrentScreen(2);
        } catch (error) {
            if (error.message.includes('Timeout')) {
                console.error('reCAPTCHA timeout, please try again.');
                createNotification('reCAPTCHA expirado, por favor intente de nuevo.', 'error');
                initializeRecaptcha();
            } else {
                console.error('Error during phone submit:', error);
                createNotification('Ocurrió un error durante el envío del teléfono.', 'error');
            }
        }
    };

And I jump from screens for a signup or signin way like this (in total i have 4 screens but after first and waiting a little bit the timeout comes in.

                {currentScreen === 1 && (
                    <div id="phone_input_container" className={styles.form}>
                        <h2 className={global.textPrimary}>Crear una cuenta o iniciar sesión</h2>
                        <p>Ingresa tu número de móvil. Te enviaremos un código de 6 dígitos para verificarte:</p>
                        <div className={styles.phoneInputContainer}>
                            <PhoneInput
                                country={'es'}
                                value={phone}
                                onChange={setPhone}
                                containerStyle={{ width: '100%' }}
                                inputStyle={{ width: '100%' }}
                                buttonStyle={{ background: 'none', border: 'none' }}
                                dropdownStyle={{ width: '300px', maxHeight: '200px', overflowY: 'auto' }}
                                preferredCountries={['es', 'ad']}
                                placeholder='Introduce tu número aquí'
                            />
                        </div>
                        <div id="recaptcha-container" style={{ visibility: 'hidden' }}></div>
                        <button className={global.buttonPrimary} onClick={handlePhoneSubmit}>Continuar</button>
                        <p className={styles.legalText}>
                            Al continuar, aceptas nuestros <a href="../../aviso-legal" target="_blank" rel="noopener noreferrer">Aviso Legal</a> y <a href="../../politica-privacidad" target="_blank" rel="noopener noreferrer">Política de Privacidad</a>.
                        </p>
                        <div className={styles.separator}></div>
                        <div className={styles.additionalInfo}>
                            <h3>¿Por qué un número de teléfono?</h3>
                            <p>Es más sencillo de recordar que un email y una contraseña, y nos ayuda a verificar que eres una persona.</p>
                        </div>
                    </div>
                )}

                {currentScreen === 2 && (
                    <div id="code_input_container" className={styles.form}>
                        <h2>Te hemos enviado un código de 6 dígitos</h2>
                        <p>Ingresa el código para iniciar sesión o crearte una cuenta:</p>
                        <div className={styles.codeInputs}>
                            {code.map((digit, index) => (
                                <input
                                    key={index}
                                    type="text"
                                    maxLength="1"
                                    value={digit}
                                    onChange={(e) => handleCodeChange(e.target.value, index)}
                                    ref={(el) => (inputRefs.current[index] = el)}
                                    className={styles.codeInput}
                                    style={{ width: '2rem', textAlign: 'center', margin: '0.5rem' }}
                                />
                            ))}
                        </div>
                        <button className={global.buttonPrimary} onClick={handleCodeSubmit}>Verificar</button>
                        <div className={styles.separator}></div>
                        <div className={styles.additionalInfo}>
                            <h3>¿Por qué un número de teléfono?</h3>
                            <p>Es más sencillo de recordar que un email y una contraseña, y nos ayuda a verificar que eres una persona.</p>
                        </div>    
                    </div>
                )}

I tried all things I could and find everything I could and I did not find the solution. I am using Firebase.