// .. other routes
GoRoute(
path: "/phone",
builder: (context, state) {
final localizations = AppLocalizations.of(context);
return Title(
color: AppColors.black,
title: localizations.login_title,
child: const PhoneInputScreen());
},
),
// other routes
Expected Behavior
Phone number is validated and the app proceeds to the code screen.
Actual Behavior
Phone number validation fails.
App makes a POST to https://identitytoolkit.googleapis.com/v1/accounts:sendVerificationCode with no phone number resulting in a 400
I'm able to work around this issue by building my own screen using PhoneInput and SMSCodeInput and calling FirebaseAuth.instance.signInWithPhoneNumber(phoneNumber);
class _WebPhoneLoginScreen extends StatelessWidget {
final phoneInputKey = GlobalKey<PhoneInputState>();
final smsCodeInputKey = GlobalKey<SMSCodeInputState>();
final PhoneAuthProvider provider = PhoneAuthProvider();
void _onPhoneSubmit(String phoneNumber) async {
final result =
await fba.FirebaseAuth.instance.signInWithPhoneNumber(phoneNumber);
provider.authListener.onCodeSent(result.verificationId);
}
@override
Widget build(BuildContext context) {
final l = FirebaseUILocalizations.labelsOf(context);
final locale = Localizations.localeOf(context);
return Scaffold(
body: _ResponsivePage(
sideBuilder: mySideBuilder,
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(mainAxisSize: MainAxisSize.min, children: [
Text(
l.phoneVerificationViewTitleText,
style: Theme.of(context).textTheme.headlineSmall,
),
const SizedBox(height: 32),
AuthFlowBuilder<PhoneAuthController>(
provider: provider,
listener: (oldState, newState, controller) {
if (newState is PhoneVerified) {
// Navigate to Home
}
},
builder: (context, state, ctrl, child) {
if (state is AwaitingPhoneNumber || state is SMSCodeRequested) {
return Column(mainAxisSize: MainAxisSize.min, children: [
PhoneInput(
key: phoneInputKey,
initialCountryCode: locale.countryCode,
onSubmit: (phoneNumber) {
_onPhoneSubmit(phoneNumber);
}),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
final number =
PhoneInput.getPhoneNumber(phoneInputKey);
if (number != null) {
_onPhoneSubmit(number);
}
},
child: Text(l.verifyPhoneNumberButtonText)),
]);
} else if (state is SMSCodeSent) {
return Column(mainAxisSize: MainAxisSize.min, children: [
SMSCodeInput(
key: smsCodeInputKey,
onSubmit: (smsCode) {
ctrl.verifySMSCode(
smsCode,
verificationId: state.verificationId,
confirmationResult: state.confirmationResult,
);
}),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
final code = smsCodeInputKey.currentState!.code;
if (code.length < 6) return;
ctrl.verifySMSCode(
code,
verificationId: state.verificationId,
confirmationResult: state.confirmationResult,
);
},
child: Text(l.verifyCodeButtonText)),
]);
} else if (state is SigningIn) {
return const CircularProgressIndicator();
} else if (state is AuthFailed) {
return ErrorText(exception: state.exception);
} else {
return const SizedBox();
}
},
),
const SizedBox(height: 8),
TextButton(
onPressed: () {
GoRouter.of(context).pop();
},
child: Text(l.goBackButtonLabel))
]),
),
),
);
}
}
Is there an existing issue for this?
What plugin is this bug for?
Firebase UI Auth
What platform(s) does this bug affect?
Web
List of dependencies used.
flutter pub deps -s list
Steps to reproduce
Using the provided
PhoneInputScreenfails to validate phone numbers on web platform.My Login Screen:
Phone Route:
Expected Behavior
Phone number is validated and the app proceeds to the code screen.
Actual Behavior
Phone number validation fails. App makes a POST to
https://identitytoolkit.googleapis.com/v1/accounts:sendVerificationCodewith no phone number resulting in a 400Additional Information
I'm able to work around this issue by building my own screen using
PhoneInputandSMSCodeInputand callingFirebaseAuth.instance.signInWithPhoneNumber(phoneNumber);