Flutter Web中Firebase Auth调用signInWithPhoneNumber报错

错误详情 #

调用signInWithPhoneNumber()时触发以下错误：

TypeError: Cannot read properties of undefined (reading 'settings')
at new RecaptchaVerifier (https://www.gstatic.com/firebasejs/9.9.0/firebase-auth.js:8390:43)
at RecaptchaVerifier.new (http://localhost:60687/packages/firebase_auth_web/src/interop/auth.dart.lib.js:863:233)
at new firebase_auth_web_recaptcha_verifier_factory.RecaptchaVerifierFactoryWeb.new (http://localhost:60687/packages/firebase_auth_web/src/firebase_auth_web_recaptcha_verifier_factory.dart.lib.js:175:49)
at firebase_auth_web_recaptcha_verifier_factory.RecaptchaVerifierFactoryWeb.__.delegateFor (http://localhost:60687/packages/firebase_auth_web/src/firebase_auth_web_recaptcha_verifier_factory.dart.lib.js:87:14)
at RecaptchaVerifier.new (http://localhost:60687/packages/firebase_auth/firebase_auth.dart.lib.js:643:94)
at auth_service.AuthService.new.signInUp (http://localhost:60687/packages/qew_app/page_models/welcome_page_model.dart.lib.js:12180:98)
at signInUp.next (<anonymous>)
at runBody (http://localhost:60687/dart_sdk.js:40660:34)
at Object._async [as async] (http://localhost:60687/dart_sdk.js:40691:7)
at auth_service.AuthService.new.signInUp (http://localhost:60687/packages/qew_app/page_models/welcome_page_model.dart.lib.js:12179:20)
at logister_page_model.LogisterPageModel.new.logister (http://localhost:60687/packages/qew_app/page_models/welcome_page_model.dart.lib.js:9060:65)
at logister.next (<anonymous>)
at runBody (http://localhost:60687/dart_sdk.js:40660:34)
at Object._async [as async] (http://localhost:60687/dart_sdk.js:40691:7)
at logister_page_model.LogisterPageModel.new.logister (http://localhost:60687/packages/qew_app/page_models/welcome_page_model.dart.lib.js:9055:20)
at logister_widgets.PhoneNumberCard.new.<anonymous> (http://localhost:60687/packages/qew_app/page_models/welcome_page_model.dart.lib.js:9318:23)
at logister_widgets._PhoneNumberCardState.new.formSubmit (http://localhost:60687/packages/qew_app/ui/views/pages/logister/logister_widgets.dart.lib.js:1543:12)
at http://localhost:60687/packages/qew_app/ui/views/pages/logister/logister_widgets.dart.lib.js:1547:1021
at [_finalizeEditing] (http://localhost:60687/packages/flutter/src/widgets/title.dart.lib.js:36779:9)
at editable_text.EditableTextState.new.performAction (http://localhost:60687/packages/flutter/src/widgets/title.dart.lib.js:36652:39)
at text_input.TextInput.__._handleTextInputInvocation (http://localhost:60687/packages/flutter/src/services/text_formatter.dart.lib.js:2373:66)
at _handleTextInputInvocation.next (<anonymous>)
at runBody (http://localhost:60687/dart_sdk.js:40660:34)
at Object._async [as async] (http://localhost:60687/dart_sdk.js:40691:7)
at [_handleTextInputInvocation] (http://localhost:60687/packages/flutter/src/services/text_formatter.dart.lib.js:2288:20)
at OptionalMethodChannel._handleAsMethodCall (http://localhost:60687/packages/flutter/src/services/restoration.dart.lib.js:1599:57)
at _handleAsMethodCall.next (<anonymous>)
at runBody (http://localhost:60687/dart_sdk.js:40660:34)
at Object._async [as async] (http://localhost:60687/dart_sdk.js:40691:7)
at [_handleAsMethodCall] (http://localhost:60687/packages/flutter/src/services/restoration.dart.lib.js:1596:20)
at http://localhost:60687/packages/flutter/src/services/restoration.dart.lib.js:1593:126
at http://localhost:60687/packages/flutter/src/services/restoration.dart.lib.js:6148:31
at Generator.next (<anonymous>)
at runBody (http://localhost:60687/dart_sdk.js:40660:34)
at Object._async [as async] (http://localhost:60687/dart_sdk.js:40691:7)
at http://localhost:60687/packages/flutter/src/services/restoration.dart.lib.js:6145:82
at Object.invoke2 (http://localhost:60687/dart_sdk.js:191758:7)
at ui._ChannelCallbackRecord.new.invoke (http://localhost:60687/dart_sdk.js:133047:15)
at ui._Channel.new.push (http://localhost:60687/dart_sdk.js:133118:54)
at ui.ChannelBuffers.new.push (http://localhost:60687/dart_sdk.js:133209:19)
at _engine.EnginePlatformDispatcher.__.invokeOnPlatformMessage (http://localhost:60687/dart_sdk.js:171990:27)
at _engine.TextEditingChannel.new.performAction (http://localhost:60687/dart_sdk.js:186458:49)
at http://localhost:60687/dart_sdk.js:186537:24
at _engine.GloballyPositionedTextEditingStrategy.new.maybeSendAction (http://localhost:60687/dart_sdk.js:178127:40)
at Object._checkAndCall (http://localhost:60687/dart_sdk.js:5279:16)
at Object.dcall (http://localhost:60687/dart_sdk.js:5284:17)
at HTMLInputElement.<anonymous> (http://localhost:60687/dart_sdk.js:109003:100)

当前环境配置 #

Flutter端初始化 #

已通过flutterfire生成的代码完成Firebase初始化：

await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
);

Web端JS SDK配置 #

index.html中手动引入并初始化了Firebase JS SDK 9.6.10：

<script type="module" src="https://www.gstatic.com/firebasejs/9.6.10/firebase-auth.js"></script>
<script type="module" src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
<script type="module" src="https://www.gstatic.com/firebasejs/9.6.10/firebase-functions.js"></script>
<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js";
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-analytics.js";

  const firebaseConfig = {
    apiKey: "secret",
    authDomain: "secret",
    projectId: "secret",
    storageBucket: "secret",
    messagingSenderId: "secret",
    appId: "secret",
    measurementId: "secret"
  };

  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
}

已尝试的无效操作 #

• 更换Firebase JS SDK至新版本
• 调整Firebase控制台的auth配置项

问题根源 #

经排查，错误源于加载的JS模块中authExtern未定义，本质是FlutterFire插件与手动引入的JS SDK版本不兼容，或双重初始化导致Firebase实例冲突。

解决/绕过方案 #

方案1：移除Web端手动初始化代码 #

FlutterFire会自动通过插件加载并初始化对应版本的Firebase JS SDK，手动在index.html中初始化会导致实例冲突。需删除index.html中所有Firebase相关的<script>标签及初始化代码，仅保留flutterfire_cli生成的配置即可。

方案2：严格统一插件与JS SDK版本 #

若必须手动引入JS SDK，需确保firebase_auth_web插件版本与JS SDK版本完全兼容：

1. 查看pubspec.yaml中firebase_auth依赖的版本，对应找到兼容的JS SDK版本
2. 修改index.html中所有JS SDK的引入链接为对应版本，确保版本号完全一致
3. 执行flutter clean && flutter pub get清除缓存并重新获取依赖

方案3：降级firebase_auth_web至稳定版本 #

部分新版本插件存在兼容性问题，可降级至已知稳定版本，例如：
在pubspec.yaml中指定：

firebase_auth: ^4.1.0

对应使用JS SDK 9.6.10，且移除手动初始化代码。

方案4：绕过直接调用的临时方案 #

若需紧急上线，可通过Firebase Cloud Functions做中间层：

1. 编写云函数接收手机号，调用Firebase Admin SDK发送验证码
2. 前端调用该云函数获取验证码，再通过signInWithCredential完成登录
   此方法可绕开前端RecaptchaVerifier的初始化问题。

内容的提问来源于stack exchange，提问作者max shulov