I have two pages. One page is to enter the phone number and then the second screen is to enter the verification code sent to the phone number, so that I can verify that .
Although I am sending the correct verification code I am getting this error:
Unhandled Exception: [firebase_auth/invalid-verification-id] The verification ID used to create the phone auth credential is invalid.
This is the page to enter the phone number :
class PhoneNumberEntry extends StatefulWidget {
const PhoneNumberEntry({Key? key}) : super(key: key);
@override
State<PhoneNumberEntry> createState() => _PhoneNumberEntryState();
}
class _PhoneNumberEntryState extends State<PhoneNumberEntry> {
TextEditingController _phonenumber = TextEditingController();
FirebaseAuth auth = FirebaseAuth.instance;
String verificationID = "";
void loginWithPhone() async {
await auth.verifyPhoneNumber(
phoneNumber: _phonenumber.text,
verificationCompleted: (PhoneAuthCredential credential) async {
await auth.signInWithCredential(credential).then((value) {
print("You are logged in successfully");
});
},
verificationFailed: (FirebaseAuthException e) {
print(e.message);
},
codeSent: (String verificationId, int? resendToken) async {
setState(() {
verificationID = verificationId;
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PhoneNumberVerification(
phonenumber: _phonenumber.text,
auth: auth,
verificationId: verificationID,
)));
});
},
codeAutoRetrievalTimeout: (String verificationId) {},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SizedBox.expand(
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0XFF0B1630),
Color(0XFF2C496A),
]),
image: DecorationImage(
image: AssetImage("asset/images/SpirationDark.jpg"),
fit: BoxFit.cover,
)),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(8.0, 0, 0, 0),
child: Container(
width: double.infinity,
child: const Text(
'Let us',
style: TextStyle(
fontSize: 40,
letterSpacing: 0.5,
fontFamily: 'PlayfairDisplay',
color: Colors.white),
textAlign: TextAlign.left,
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(8.0, 0, 0, 0),
child: Container(
width: double.infinity,
child: const Text(
'Know Your',
style: TextStyle(
fontSize: 40,
letterSpacing: 0.5,
fontFamily: 'PlayfairDisplay',
color: Colors.white,
),
textAlign: TextAlign.left,
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(8.0, 0, 0, 0),
child: Container(
width: double.infinity,
child: const Text(
'Mobile Number',
style: TextStyle(
fontSize: 40,
letterSpacing: 0.5,
fontFamily: 'PlayfairDisplay',
color: Colors.white),
textAlign: TextAlign.left,
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(8.0, 6.0, 8.0, 0),
child: Container(
width: double.infinity,
child: const Text(
'To track your expenses and to use other features we need to use your mobile number.',
style: TextStyle(
fontSize: 14,
letterSpacing: 0.5,
fontFamily: 'PlayfairDisplay',
color: Colors.grey),
textAlign: TextAlign.left,
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 20, 10, 10),
child: TextField(
controller: _phonenumber,
keyboardType: TextInputType.phone,
textAlign: TextAlign.left,
decoration: InputDecoration(
hintText: "Enter your Phone Number",
hintStyle: const TextStyle(
fontSize: 15,
color: Colors.white,
fontFamily: 'SfProDisplay',
),
fillColor: Colors.grey.withOpacity(0.15),
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10))),
style: const TextStyle(
color: Color(0xFFFFFFFF),
fontSize: 25,
fontFamily: 'SfProDisplay',
),
),
),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.grey,
),
onPressed: () {
loginWithPhone();
},
child: const Text(
'Continue',
style: TextStyle(
fontFamily: 'SfProRounded',
fontSize: 25,
color: Colors.black,
),
),
),
],
)),
),
),
backgroundColor: primarycolor,
);
}
}
This is the verification code entry page
class PhoneNumberVerification extends StatefulWidget {
final String phonenumber;
final FirebaseAuth auth;
final String verificationId;
const PhoneNumberVerification(
{Key? key,
required this.phonenumber,
required this.auth,
required this.verificationId})
: super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<PhoneNumberVerification> {
TextEditingController textEditingController = TextEditingController();
String currentText = "";
@override
void initState() {
super.initState();
}
void verifyOTP(
FirebaseAuth auth, String verificationId, String smsCode) async {
PhoneAuthCredential credential = PhoneAuthProvider.credential(
verificationId: verificationId, smsCode: smsCode);
await auth.signInWithCredential(credential).then((value) {
print(value);
});
}
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
return Scaffold(
body: SizedBox.expand(
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0XFF0B1630),
Color(0XFF2C496A),
]),
image: DecorationImage(
image: AssetImage("asset/images/SpirationDark.jpg"),
fit: BoxFit.cover,
)),
child: Center(
child: Align(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Padding(
padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"We've sent you",
style: TextStyle(
fontFamily: 'PlayfairDisplay',
color: Colors.white,
letterSpacing: 0.5,
fontSize: 30,
),
),
),
),
const Padding(
padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"an OTP",
style: TextStyle(
fontFamily: 'PlayfairDisplay',
color: Colors.white,
letterSpacing: 0.5,
fontSize: 30,
),
),
),
),
const Padding(
padding: EdgeInsets.all(10),
child: Text(
"enter the 4-digit code we're sent on 9692499906",
style: TextStyle(
fontFamily: 'SfProRounded',
color: Colors.grey,
letterSpacing: 0.5,
fontSize: 15,
),
),
),
PinCodeFields(text: currentText),
const Padding(
padding: EdgeInsets.fromLTRB(10, 2, 0, 0),
child: Align(
alignment: Alignment.centerLeft,
child: Text.rich(TextSpan(
text: "didnt recieve code ?",
style: TextStyle(
fontFamily: 'SfProRounded',
color: Colors.grey,
letterSpacing: 0.5,
fontSize: 15,
),
children: [])),
)),
Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Align(
alignment: Alignment.centerLeft,
child: SizedBox(
height: 60,
width: width * 0.45,
child: ElevatedButton(
onPressed: () {
// print(widget.verificationId);
verifyOTP(widget.auth, widget.verificationId,
currentText);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const Home()));
},
child: const Center(
child: Text("Verify"),
),
style: ElevatedButton.styleFrom(
primary: Colors.grey.withOpacity(0.7)),
),
),
),
)
],
),
),
),
),
),
backgroundColor: primarycolor,
);
}
}