🐛 using flutterfire_ui: ^0.3.4 SMS login when entering the otp get Future already completed

[richard457]

════════ Exception caught by gesture ═══════════════════════════════════════════
The following StateError was thrown while handling a gesture:
Bad state: Future already completed
When the exception was thrown, this was the stack
#1      PhoneAuthFlow.verifySMSCode
package:flutterfire_ui/…/flows/phone_auth_flow.dart:93
#2      _SMSCodeInputViewState.submit
package:flutterfire_ui/…/views/sms_code_input_view.dart:39

[darshankawar]

@richard457
Can you provide flutter doctor -v and a complete minimal reproducible code sample that shows this error ?
Thanks.

[richard457]

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutterfire_ui/auth.dart';
import 'package:flutterfire_ui/i10n.dart';
import 'package:flipper_routing/routes.router.dart';
import 'package:flipper_services/proxy.dart';
import 'package:flipper_dashboard/loader_percentage.dart';
import 'package:flipper_models/view_models/startup_viewmodel.dart';
import 'package:flutter/scheduler.dart';
import 'package:stacked/stacked.dart';
import 'package:flipper_models/login.dart';
import 'config.dart';
import 'decorations.dart';

// Overrides a label for en locale
// To add localization for a custom language follow the guide here:
// https://flutter.dev/docs/development/accessibility-and-localization/internationalization#an-alternative-class-for-the-apps-localized-resources
class LabelOverrides extends DefaultLocalizations {
  const LabelOverrides();

  @override
  String get emailInputLabel => 'Enter your email';
}

final emailLinkProviderConfig = EmailLinkProviderConfiguration(
  actionCodeSettings: ActionCodeSettings(
    url: 'https://reactnativefirebase.page.link',
    handleCodeInApp: true,
    androidMinimumVersion: '12',
    androidPackageName:
        'io.flutter.plugins.flutterfire_ui.flutterfire_ui_example',
    iOSBundleId: 'io.flutter.plugins.flutterfireui.flutterfireUIExample',
  ),
);

final providerConfigs = [
  const EmailProviderConfiguration(),
  // emailLinkProviderConfig,
  const PhoneProviderConfiguration(),
  // const GoogleProviderConfiguration(clientId: GOOGLE_CLIENT_ID),
  // const AppleProviderConfiguration(),
  // const FacebookProviderConfiguration(clientId: FACEBOOK_CLIENT_ID),
  // const TwitterProviderConfiguration(
  //   apiKey: TWITTER_API_KEY,
  //   apiSecretKey: TWITTER_API_SECRET_KEY,
  //   redirectUri: TWITTER_REDIRECT_URI,
  // ),
];

class LoginView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final auth = FirebaseAuth.instance;

    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light,
        visualDensity: VisualDensity.standard,
        inputDecorationTheme: const InputDecorationTheme(
          border: OutlineInputBorder(),
        ),
      ),
      initialRoute: auth.currentUser == null ? '/' : '/',
      routes: {
        '/': (context) {
          return PhoneInputScreen(
            actions: [
              SMSCodeRequestedAction((context, action, flowKey, phone) {
                Navigator.of(context).pushReplacementNamed(
                  '/sms',
                  arguments: {
                    'action': action,
                    'flowKey': flowKey,
                    'phone': phone,
                  },
                );
              }),
            ],
            headerBuilder: headerIcon(Icons.phone),
            sideBuilder: sideIcon(Icons.phone),
          );
        },
        '/phone': (context) {
          return SignInScreen(
            actions: [
              ForgotPasswordAction((context, email) {
                Navigator.pushNamed(
                  context,
                  '/forgot-password',
                  arguments: {'email': email},
                );
              }),
              VerifyPhoneAction((context, _) {
                Navigator.pushNamed(context, '/phone');
              }),
              AuthStateChangeAction<SignedIn>((context, state) async {
                /// this mark that we are logged in
                User? user = FirebaseAuth.instance.currentUser;
                Login login = await ProxyService.api.login(phone: user!.email!);

                /// this mark that we are logged in
                ProxyService.box.write(
                  key: 'userId',
                  value: login.id.toString(),
                );
                ProxyService.box.write(
                  key: 'userPhone',
                  value: user.email,
                );
                await ProxyService.api.authenticateWithOfflineDb(
                  authId: user.uid,
                );

                /// then go startup logic
                ProxyService.nav.navigateTo(Routes.initial);
              }),
              EmailLinkSignInAction((context) {
                Navigator.pushReplacementNamed(context, '/email-link-sign-in');
              }),
            ],
            headerBuilder: headerImage('assets/logo.png'),
            sideBuilder: sideImage('assets/logo.png'),
            subtitleBuilder: (context, action) {
              return Padding(
                padding: const EdgeInsets.only(bottom: 8),
                child: Text(
                  action == AuthAction.signIn
                      ? 'Welcome to flipper! Please sign in to continue.'
                      : 'Welcome to flipper! Please create an account to continue',
                ),
              );
            },
            footerBuilder: (context, action) {
              return Center(
                child: Padding(
                  padding: const EdgeInsets.only(top: 16),
                  child: Text(
                    action == AuthAction.signIn
                        ? 'By signing in, you agree to our terms and conditions.'
                        : 'By registering, you agree to our terms and conditions.',
                    style: const TextStyle(color: Colors.grey),
                  ),
                ),
              );
            },
            providerConfigs: providerConfigs,
          );
        },
        '/sms': (context) {
          final arguments = ModalRoute.of(context)?.settings.arguments
              as Map<String, dynamic>?;

          return SMSCodeInputScreen(
            auth: auth,
            actions: [
              AuthStateChangeAction<AuthFailed>((context, state) async {
                print('Auth failed: $state');
              }),
              AuthStateChangeAction<SignedIn>((context, state) async {
                Login login =
                    await ProxyService.api.login(phone: arguments!['phone']);

                /// this mark that we are logged in
                ProxyService.box.write(
                  key: 'userId',
                  value: login.id.toString(),
                );
                User? user = FirebaseAuth.instance.currentUser;
                await ProxyService.api.authenticateWithOfflineDb(
                  authId: user!.uid,
                );

                /// then go startup logic
                ProxyService.nav.navigateTo(Routes.initial);
              })
            ],
            flowKey: arguments?['flowKey'],
            action: arguments?['action'],
            headerBuilder: headerIcon(Icons.sms_outlined),
            sideBuilder: sideIcon(Icons.sms_outlined),
          );
        },
        '/startup': (context) {
          return ViewModelBuilder<StartUpViewModel>.reactive(
            fireOnModelReadyOnce: true,
            onModelReady: (model) =>
                SchedulerBinding.instance?.addPostFrameCallback((timeStamp) {
              model.runStartupLogic();
            }),
            viewModelBuilder: () => StartUpViewModel(),
            builder: (context, model, child) {
              return LoadingWithPercentage();
            },
          );
        },
        '/forgot-password': (context) {
          final arguments = ModalRoute.of(context)?.settings.arguments
              as Map<String, dynamic>?;

          return ForgotPasswordScreen(
            email: arguments?['email'],
            headerMaxExtent: 200,
            headerBuilder: headerIcon(Icons.lock),
            sideBuilder: sideIcon(Icons.lock),
          );
        },
        '/email-link-sign-in': (context) {
          return EmailLinkSignInScreen(
            actions: [
              AuthStateChangeAction<SignedIn>((context, state) {
                Navigator.pushReplacementNamed(context, '/profile');
              }),
            ],
            config: emailLinkProviderConfig,
            headerMaxExtent: 200,
            headerBuilder: headerIcon(Icons.link),
            sideBuilder: sideIcon(Icons.link),
          );
        },
      },
      title: 'Firebase UI demo',
      debugShowCheckedModeBanner: false,
      locale: const Locale('en'),
      localizationsDelegates: [
        FlutterFireUILocalizations.withDefaultOverrides(const LabelOverrides()),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        FlutterFireUILocalizations.delegate,
      ],
    );
  }
}

flutter doctor

[√] Flutter (Channel stable, 2.8.1, on
    Microsoft Windows [Version
    10.0.19042.1415], locale en-US)
[√] Android toolchain - develop for Android
    devices (Android SDK version 31.0.0-rc4)   
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual    Studio Community 2019 16.10.0)
[√] Android Studio (version 4.2)
[√] IntelliJ IDEA Community Edition (version   
    2021.2)
[√] VS Code (version 1.63.2)
[√] Connected device (3 available)

• No issues found!

[richard457]

Also, it is very important to know that, after a user input the phone sometimes there is a google chrome opening for verification sometimes Recaptcha when the verification is complete then it comes back to the otp screen, and once click to verify the error is thrown instead and does not fire the authentication state changes AuthStateChangeAction

[richard457]

Again on the browser this seems to work as expected, the problem is on mobile I guess same with #7694 (comment)