[🐛 firebase_ui_auth] otp verification may not trigger on first launch when clicking the submit button on the keyboard #261
Comments
danagbemava-nc
changed the title
|
Reproducible using the plugin example app and the steps outlined above. It seems to happen when the app is first installed. Ideally, tapping the submit button on the keyboard triggers the verification but clicking the verify button is required in some cases and in other cases, just tapping the submit button on the keyboard triggers the verification cc @lesnitsky |
danagbemava-nc
changed the title
|
I have a guess that this problem is caused by something in the auto OTP read functionality |
|
I have been toying with this a little bit:
here is the reduced code sample.import 'package:firebase_auth/firebase_auth.dart' hide PhoneAuthProvider, EmailAuthProvider;
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:firebase_ui_localizations/firebase_ui_localizations.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'firebase_options.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
FirebaseUIAuth.configureProviders([
PhoneAuthProvider(),
]);
runApp(const FirebaseAuthUIExample());
}
class FirebaseAuthUIExample extends StatelessWidget {
const FirebaseAuthUIExample({super.key});
String get initialRoute {
final user = FirebaseAuth.instance.currentUser;
return switch (user) {
null => '/',
_ => '/profile',
};
}
@override
Widget build(BuildContext context) {
final mfaAction = AuthStateChangeAction<MFARequired>(
(context, state) async {
final nav = Navigator.of(context);
await startMFAVerification(
resolver: state.resolver,
context: context,
);
nav.pushReplacementNamed('/profile');
},
);
return MaterialApp(
initialRoute: initialRoute,
routes: {
'/': (context) {
return SignInScreen(
actions: [
VerifyPhoneAction((context, _) {
Navigator.pushNamed(context, '/phone');
}),
mfaAction,
],
);
},
'/phone': (context) {
return PhoneInputScreen(
actions: [
SMSCodeRequestedAction((context, action, flowKey, phone) {
Navigator.of(context).pushReplacementNamed(
'/sms',
arguments: {
'action': action,
'flowKey': flowKey,
'phone': phone,
},
);
}),
],
);
},
'/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'],
);
},
'/profile': (context) {
final platform = Theme.of(context).platform;
return ProfileScreen(
actions: [
SignedOutAction((context) {
Navigator.pushReplacementNamed(context, '/');
}),
mfaAction,
],
showMFATile: kIsWeb || platform == TargetPlatform.iOS || platform == TargetPlatform.android,
showUnlinkConfirmationDialog: true,
showDeleteConfirmationDialog: true,
);
},
},
title: 'Firebase UI demo',
debugShowCheckedModeBanner: false,
locale: const Locale('ar', 'SA'),
supportedLocales: [const Locale('ar', 'SA')],
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
FirebaseUILocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
);
}
} |
|
Hello 👋, to help manage issues we automatically close stale issues. This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require attention?
Thank you for your contributions. |
|
hi, I know it has been some time since this was opened but I'd like to share how we are handling it. hoping this may help or inspire future developers till the issue is eliminated. We moved away from using phone authentication through this package and build our own components on top of firebase auth package. However, for the other sign in providers: like google/apple/email, we are still using this package. This make us depend on additional libraries for phone and OTP entry and validation but that is a minor cost to pay for a smoother log in experience. Another subject that I am not certain now if it is related to this issue or not is the successful rate of SMS OTPs used for validation. By successful I mean the SMS is sent to the user and the user was able to consume it in the app successfully. BEFORE while using this package for phone login: AFTER (using our own components on top of firebase package): |
github-actions
bot
added
the
Needs Attention
Is there an existing issue for this?
What plugin is this bug for?
Firebase UI Auth
What platform(s) does this bug affect?
Android, iOS
List of dependencies used.
flutter pub deps -s list
dev dependencies:
transitive dependencies:
Steps to reproduce
code sample to reproduce bug
the OTP verification starts and the user gets signed in.
Actual Behavior
sometimes the verification does not start (blocked by something? I am not certain) and another click (sometimes multiple clicks) on verify button is required to verify OTP. in other instances, I have to go back to main login page and retry entering the phone number and request another OTP. I notice that this happens when the app is launched fresh and not when signed out and then trying to sign in again.
Additional Information
I used this with a test phone number that was added to firebase authentication. When I try the same with a real phone number I end up receiving multiple SMS messages from Firebase. This makes the auth costs almost double for my project.
Here is a screen recording for the issue. in the video you notice the first sign in does not pick the OTP confirm button click and I had to click verify. In the second attempt (in the same screen recording) the OTP confirm button works right away.
https://github.com/firebase/FirebaseUI-Flutter/assets/12709757/c6508b8c-9100-4f1e-9ad4-792811ffbb8d
The text was updated successfully, but these errors were encountered: