Search code examples
flutterfirebasefirebase-authenticationrecaptchaflutter-web

Flutter web firebase auth signInWithPhoneNumber showing error "captcha-check-failed" in release mode


I'm facing a problem with Flutter Web Firebase Phone Auth Verification. In debug it is working well and showing me the reCaptcha. But when I host it through GitHub pages in release mode, it shows an error "captcha-check-failed". Even the capcha isn't showing in release mode.

The signInWithPhoneNumber function:

Future<void> loginWithPhoneRequestOTPWeb(
  WidgetRef ref,
  GlobalKey<FormState> formKey,
  String phoneNumber,
) async {
  try {
    EasyLoading.show();
    await FirebaseAuth.instance
        .signInWithPhoneNumber(
      phoneNumber,
      RecaptchaVerifier(
        container: 'recaptcha',
        size: RecaptchaVerifierSize.compact,
        theme: RecaptchaVerifierTheme.dark,
        onError: (e) {
          print(e);
          EasyLoading.showError(e.message!);
          return;
        },
        onExpired: () {
          print('Expired');
          EasyLoading.showError('Session Expired');
          return;
        },
        onSuccess: () {
          EasyLoading.dismiss();
          print('Captcha Success');
        },
      ),
    )
        .then((ConfirmationResult result) {
      // update the verificationphone provider
      ref.read(sendOtpProvider(formKey).state).update((_) => true);
      ref.read(confirmationResultProvider(formKey).state).update((_) => result);
      EasyLoading.showSuccess(t!.otpSentSuccessfully);
    });
  } on FirebaseAuthException catch (e) {
    if (e.code == 'invalid-phone-number') {
      print('The provided phone number is not valid.');
      EasyLoading.showError('The provided phone number is not valid.');
    } else if (e.code == 'too-many-requests') {
      print(
          'You have exceeded the number of attempts allowed for this operation.');
      EasyLoading.showError(
          'You have exceeded the number of attempts allowed for this operation.');
    } else {
      print(e.code.toString());
      EasyLoading.showError(e.code.toString());
    }
  } catch (e) {
    print(e.toString());
    EasyLoading.showError(e.toString());
  }
}

I've tried without the RecaptchaVerifier as it is optional parameter.

Error Screenshot:

enter image description here

If I've missed anything please let me know. Thank You :)


Solution

  • Okay, I've figure out my problem. In the firebase authentication section, there is an "Authorized domains" section. Here I've to add my domains. But firebase only takes .com domains. As a result, I used firebase hosting and it is working fine

    enter image description here