🐛 [ui] Entering OTP on Android does not work AuthStateChangeAction SignedIn does not fire

[richard457]

Run the flutterfire/packages/flutterfire_ui/example app on the android simulator, try to log in using a phone number wait for the OTP and it does not come.

[pr-Mais]

Did you add the phone number to testing as mentioned here? If so, you won't receive the OTP, instead you use the code listed for the testing numbers.
Additionally, is the Firebase Auth emulator running?

[darshankawar]

@richard457
Check above and try by adding your phone number in Firebase console so that you can receive OTP on it.

[richard457]

@pr-Mais yes I did and as mentioned on the web AuthStateChangeAction is able to fire when state changes but on mobile (android) it does nothing. @darshankawar I added the testing number in firebase authentication. @pr-Mais emulator is running of cause! that's where I am testing my app.

[richard457]

Also would be nice to have errors shown on android.

[pr-Mais]

@richard457 so the number you're using for testing is added in the Firebase Console? in this case you will never receive any OTP, you use the OTP you setup with your test number on the console.

[richard457]

yes I know, I use the otp I set from firebase, this is the behavior as mentioned on the web AuthStateChangeAction SignedIn is able to fire when state changes but on android after entering otp it does nothing @pr-Mais I mentioned this in the above comments too.

[pr-Mais]

Could you please provide a reproducible sample code?

[richard457]

I am using the sample code you provided in flutterfire_ui and if you need a testing phone is +250 783 054 002 and OTP is 123456

[pr-Mais]

Using the example app, I can confirm that AuthStateChangeAction is being triggered on Android upon entering the SMS code. Uninstall the app on your emulator and try again.

[richard457]

[pr-Mais]

Have you uninstalled the app and cleared cache?

[richard457]

yes I did using adb uninstall

[pr-Mais]

I see some logs saying you didn't set the signing certificate SHA-1, it's a required step for Phone authentication, make sure to follow the steps here to add it.

[richard457]

you are right on your sample code did not add the sha1, but adding it does not solve the issue @pr-Mais

[richard457]

you are right on your sample code did not add the SHA-1, but adding it does not solve the issue @pr-Mais I triple checked and in console, no other error showed this is what happened, after putting the OTP the browser opened for captcha and after confirming I am not a robot it closed, the SignedIn did not fire, attempt to click again the error State has already been listened to got fired!. again it could not be the issue of sha1 keys not being added on the firebase side since I tried an existing project that is configured with google phone auth and gave the same result.

[darshankawar]

@richard457
Can't see entirely from the video you shared, but make sure that your app's packagename/SHA256 pair is registered in the firebase console.
I guess the safety_net_token was passed, but there may not be any matching SHA-256.

[richard457]

Using the example app, I can confirm that AuthStateChangeAction is being triggered on Android upon entering the SMS code. Uninstall the app on your emulator and try again.

May I ask if possible to share the working example? I want to see the difference because I could not tell.

[pr-Mais]

Are you using your own Firebase options or the ones that comes with the example app?

[richard457]

Tried both, using my own and replacing them with my own.

[richard457]

hello everyone, here is my finding, the widget is not easy to drop to an existing app somehow it assumes for example to use one sing page for auth, you can not have

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),
          )

on one screen and

SMSCodeInputScreen(
            actions: [
              AuthStateChangeAction<AuthFailed>((context, state) async {
                showSimpleNotification(
                  const Text('Auth failed'),
                  background: Colors.green,
                );
              }),
              AuthStateChangeAction<SignedIn>((context, state) async {
                await authAfter(state, arguments!);
              })
            ],
            flowKey: arguments?['flowKey'],
            action: arguments?['action'],
            headerBuilder: headerIcon(Icons.sms_outlined),
            sideBuilder: sideIcon(Icons.sms_outlined),
          )

on another screen this will throw errors, also if it is not put directly under MaterialApp it is going to throw an error too, even the top parent widget is a material... I think this is a limitation since you can not use it under for example a scaffold. then somehow I managed to get the OTP sent on the device could not tell what was different except a few things I tried that has nothing to do with the package, I believe there is something that is not well. overall the package is not in best state to be used as it is not predictable and would love to followup on this.

[richard457]

hello everyone, here is my finding, the widget is not easy to drop to an existing app somehow it assumes for example to use one sing page for auth, you can not have

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),
          )

on one screen and

SMSCodeInputScreen(
            actions: [
              AuthStateChangeAction<AuthFailed>((context, state) async {
                showSimpleNotification(
                  const Text('Auth failed'),
                  background: Colors.green,
                );
              }),
              AuthStateChangeAction<SignedIn>((context, state) async {
                await authAfter(state, arguments!);
              })
            ],
            flowKey: arguments?['flowKey'],
            action: arguments?['action'],
            headerBuilder: headerIcon(Icons.sms_outlined),
            sideBuilder: sideIcon(Icons.sms_outlined),
          )

on another screen this will throw errors, also if it is not put directly under MaterialApp it is going to throw an error too, even the top parent widget is a material... I think this is a limitation since you can not use it under for example a scaffold. then somehow I managed to get the OTP sent on the device could not tell what was different except a few things I tried that has nothing to do with the package, I believe there is something that is not well. overall the package is not in the best state to be used as it is not predictable and would love to follow up on this.

The quick assumption is that it is okay to separate these screens and only go to the OTP verification screen once you got it, but NAH, it does not work, the only way you can somehow get the code to work is to use your sample code as it is, no other way around

[richard457]

These sample can be useful, a sample that separates these screen MaterialApp->PhoneInPutScreen->SMSCodeInputScreen (NOTE that these screens are not in one widget) and also very important to wrap PhoneInPutScreen or SMSCodeInputScreen with whatever widget of choice, and if the root MaterialApp has some settings should be applied too for example theme from root widget should be applied. @pr-Mais @darshankawar

[richard457]

for example this code will not work

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:flutterfire_ui_example/phone.dart';

import 'init.dart'
    if (dart.library.html) 'web_init.dart'
    if (dart.library.io) 'io_init.dart';

import 'config.dart';
import 'decorations.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initializeFirebase();
  runApp(FirebaseAuthUIExample());
}

// 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 FirebaseAuthUIExample 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: '/',
      routes: {
        '/': (context) {
          return auth.currentUser == null
              ? const Phone()
              : ProfileScreen(providerConfigs: providerConfigs);
        },
        'sms': (context) {
          final arguments = ModalRoute.of(context)?.settings.arguments
              as Map<String, dynamic>?;
          return SMSCodeInputScreen(
            actions: [
              AuthStateChangeAction<SignedIn>((context, state) {
                Navigator.of(context).pushReplacementNamed('/profile');
              })
            ],
            flowKey: arguments?['flowKey'],
            action: arguments?['action'],
            headerBuilder: headerIcon(Icons.sms_outlined),
            sideBuilder: sideIcon(Icons.sms_outlined),
          );
        },
      },
    );
    
  }
}

[pr-Mais]

cc @lesnitsky

[richard457]

@lesnitsky any update about this issue?

[richard457]

StreamBuilder(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.hasData) {
          return const StartUpView();
        } else {
          return SignInScreen(
            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 app Please sign in to continue.'
                      : 'Welcome to app 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: [const PhoneProviderConfiguration()],
          );
        }
      },
    )

The above code throws this error when clicking on phone login.

 _CastError (Null check operator used on a null value)
[sentry.flutterError] #0      _PhoneInputViewState.build.<anonymous closure> i/…/views/phone_input_view.dart:95 

@lesnitsky

[richard457]

{
screen: RecaptchaActivity, 
state: destroyed
}

FlutterError: Looking up a deactivated widget's ancestor is unsafe.
At this point the state of the widget's element tree is no longer stable.
To safely refer to a widget's ancestor in its dispose() method, save a reference to the ancestor by calling dependOnInheritedWidgetOfExactType() in the widget's didChangeDependencies() method.

[richard457]

@lesnitsky

[lesnitsky]

fixed in #9343