Get FirebaseAuthPlatform for Flutter web RecaptchaVerifier

Question

SITUATION: I'm in the process of implementing Firebase phone sign-in on flutter web. In doing so, I want to customize the reCAPTCHA that is called by the signInWithPhoneNumber function as outlined in the Firebase documentation.

final ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber(
  phoneNumber, verifier_should_go_here
);

COMPLICATION: I am trying to implement the RecaptchaVerifier, but it has a required parameter called FirebaseAuthPlatform, and I can't figure out how to generate this parameter for my app.

QUESTION: How can I create a RecaptchaVerifier to pass to the signInWithPhoneNumber function on flutter web?

Clericals

Answer 1

3 easy steps:

• You add the firebase_auth_platform_interface dependency to your pubspec.yaml file with flutter pub add firebase_auth_platform_interface
• You import the package like this: import 'package:firebase_auth_platform_interface/firebase_auth_platform_interface.dart' show FirebaseAuthPlatform;
• Inside the constructor for RecaptchaVerifier, you use FirebaseAuthPlatform.instance

Cite

Please, what configuration needs to be added to the index.html file to properly display the reCAPTCHA container? I've added <div id="recaptcha-container"></div> to the body, but the container doesn't appear. Do you have a simple full sample ? – Panelboard

@AkMax: Do we have solution for same? – Bechtel

Answer 2

You have two ways:

1. Use this import (it's included in "firebase_auth_web"):

import 'package:firebase_auth_web/firebase_auth_web.dart';

RecaptchaVerifier(
  auth: FirebaseAuthWeb.instance
)

2. Use the package "firebase_auth_oauth_platform_interface"

import 'package:firebase_auth_platform_interface/firebase_auth_platform_interface.dart';

RecaptchaVerifier(
  auth: FirebaseAuthPlatform.instance
)

Boast