Auth error only after recaptcha: "Cannot read property 'style' of null"
Problem
Describe your environment Operating System version: Linux 5.7.5-arch1-1 x86_64 Browser version: Firefox 79.0b3 (64-bit) Firebase SDK version: 7.15.5 Firebase Product: auth Describe the problem I am setting up Phone Auth with firebase. If there is a problem with the phone number (too long, too short, etc), but the captcha is shown (delaying the error until after resolving the captcha), the following error is thrown: [code block] I have a feeling it happens when firebase auth attemps to reset the recaptcha after a problem with phone auth occurs. There is no issue when captcha is shown but phone number is valid. Steps to reproduce: Go to the below codesandbox (open it in incognito -- hopefully that'll make sure captcha is shown) Open console Click submit (with an invalid phone number) Ensure captcha is shown, if not, refresh and try again until it is Observe the following error is thrown: [code block] Relevant Code: https://codesandbox.io/s/compassionate-bouman-vw5zn?file=/index.html Related issues: https://github.com/dozoisch/react-google-recaptcha/issues/129 * https://github.com/google/google-api-javascript-client/issues/281
Error Output
error until after resolving the captcha), the following error is thrown:
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix Auth Error After Recaptcha with Invalid Phone Number
The error 'Cannot read property 'style' of null' occurs because the Firebase Auth SDK attempts to manipulate the reCAPTCHA element after an invalid phone number is submitted. When the phone number is invalid, the SDK does not handle the reCAPTCHA reset properly, leading to a null reference when trying to access the reCAPTCHA's DOM element.
Awaiting Verification
Be the first to verify this fix
- 1
Check Phone Number Validity
Before invoking the Firebase Auth phone number verification, validate the phone number format and length. If the phone number is invalid, prevent the reCAPTCHA from being displayed.
javascriptif (!isValidPhoneNumber(phoneNumber)) { alert('Invalid phone number'); return; } - 2
Handle Recaptcha Response Properly
Ensure that the reCAPTCHA is only rendered when the phone number is valid. If the phone number is invalid, do not call the Firebase Auth method that triggers the reCAPTCHA.
javascriptfirebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier).catch((error) => { handleAuthError(error); }); - 3
Implement Error Handling
Add error handling to catch any issues that arise during the phone number verification process. This should include checking for the specific error related to invalid phone numbers and providing user feedback without triggering reCAPTCHA.
javascriptfunction handleAuthError(error) { if (error.code === 'auth/invalid-phone-number') { alert('Please enter a valid phone number.'); } } - 4
Test the Implementation
After making the changes, test the implementation by submitting both valid and invalid phone numbers to ensure that the reCAPTCHA is only shown for valid inputs and that appropriate error messages are displayed for invalid inputs.
javascriptconsole.log('Testing phone number validation...');
Validation
Confirm that the error no longer appears in the console when submitting an invalid phone number and that the reCAPTCHA is only displayed for valid phone numbers. Additionally, ensure that appropriate alerts are shown for invalid inputs.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep