Firebase phone login verify using Flutter - firebase

Question

I've managed to send an OTP using Firebase. The number also shows up under Authentication -> Users in Firebase Console. What I need to do is that if the number was verified, I want to navigate to next page. How do I do that?
One more thing is that when I enter the number and tap the button 'Verify', it just sends me an OTP message. The app doesn't prompt for the second TextFormField - "Enter OTP". Why is it doing that?
main.dart
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Authenticate().handleAuth(),
);
}
}
authenticate.dart
class Authenticate {
//to handle auth
handleAuth() {
return StreamBuilder(
stream: FirebaseAuth.instance.onAuthStateChanged,
builder: (BuildContext context, snapshot) {
if (snapshot.hasData) {
return DashBoard();
} else {
return SignIn();
}
},
);
}
//for signin
signIn(AuthCredential authCreds) {
FirebaseAuth.instance.signInWithCredential(authCreds);
}
//for manual otp entry
signInViaOTP(smsCode, verId) {
AuthCredential authCredential = PhoneAuthProvider.getCredential(
verificationId: verId, smsCode: smsCode);
signIn(authCredential);
}
signInViaOTPT(smsCode, verId) {
AuthCredential authCredential = PhoneAuthProvider.getCredential(
verificationId: verId, smsCode: smsCode);
signIn(authCredential);
}
//for signout
signout() {
FirebaseAuth.instance.signOut();
}
}
sign_in.dart
class SignIn extends StatefulWidget {
#override
_SignInState createState() => _SignInState();
}
class _SignInState extends State<SignIn> {
final formKey = new GlobalKey<FormState>();
String phoneNo, verId, smsCode;
bool codeSent = false;
Future<void> verifyNum(num) async{
final PhoneVerificationCompleted verified = (AuthCredential authRes){
Authenticate().signIn(authRes);
};
final PhoneVerificationFailed failed = (AuthException authExcep){
};
final PhoneCodeSent smsSent = (String verId, [int forceResend]){
this.verId = verId;
setState(() {
this.codeSent = true;
});
};
final PhoneCodeAutoRetrievalTimeout autoTimeOut = (String verId){
this.verId = verId;
};
await FirebaseAuth.instance.verifyPhoneNumber(
phoneNumber: num,
timeout: const Duration(seconds: 5),
verificationCompleted: verified,
verificationFailed: failed,
codeSent: smsSent,
codeAutoRetrievalTimeout: autoTimeOut
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Form(
key: formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 25.0, right: 25.0),
child: TextFormField(
keyboardType: TextInputType.phone,
decoration: InputDecoration(hintText: "Enter Phone Number"),
onChanged: (val) {
setState(() {
this.phoneNo = val;
});
},
),
),
codeSent ? Padding(
padding: EdgeInsets.only(left: 25.0, right: 25.0),
child: TextFormField(
keyboardType: TextInputType.phone,
decoration: InputDecoration(hintText: "Enter OTP"),
onChanged: (val) {
setState(() {
this.smsCode = val;
});
},
),
) : Container(),
Padding(
padding: EdgeInsets.only(left: 25.0, right: 25.0),
child: RaisedButton(
child: Center(
child: codeSent ? Text("Login") : Text("Verify"),
),
onPressed: (){
codeSent? Authenticate().signInViaOTP(smsCode, verId) : verifyNum(phoneNo);
},
),
)
],
),
),
);
}
}

Answer 1

What I need to do is that if the number was verified, I want to navigate to next page. How do I do that?
You'd need to listen for a successful user authentication, then let the user proceed to the next page.
handlePhoneAuth(phoneNumber).then((User user) {
if(user != null) {
NavigateToNextPage();
} else {
// Display errors
}
});
when I enter the number and tap the button 'Verify', it just sends me an OTP message. The app doesn't prompt for the second TextFormField - "Enter OTP". Why is it doing that?
You need to build your own UI for handling the OTP sent to the user's phone number. Related to the above code snippet, here's an example on how you can handle phone authentication using firebase_auth.
Future<User> handlePhoneAuth(String userPhoneNumber) async {
var auth = FirebaseAuth.instance;
auth.verifyPhoneNumber(
phoneNumber: userPhoneNumber,
codeSent: (String verificationId, int resendToken) async {
// Update the UI - wait for the user to enter the SMS code
String smsCode = 'xxxx';
// Create a PhoneAuthCredential with the code
PhoneAuthCredential credential = PhoneAuthProvider.credential(
verificationId: verificationId, smsCode: smsCode);
// Sign the user in (or link) with the credential
var userCredential = await auth.signInWithCredential(credential);
return userCredential.user;
},
verificationFailed: (FirebaseAuthException error) {
debugPrint('Phone Auth failed $error');
return null;
},
verificationCompleted: (PhoneAuthCredential phoneAuthCredential) {
// only available for Android
},
codeAutoRetrievalTimeout: (String verificationId) {
return null;
},
);
}