How to show alert on firebase auth errors flutter - firebase

Question

I want to show an alert dialog when there is an error in the firebase auth.
Firebase already prints the error in the UI but i want to show a dialog to the user.
Heres my createUser and signInUser Funtion and my signup button function
Future registerWithEmailAndPassword({String email,password,username,image,phoneNumber}) async {
try {
UserCredential userCredential = await _firebaseAuth
.createUserWithEmailAndPassword(
email: email,
password: password,
);
} on FirebaseAuthException catch (e) {
if (e.code == 'weak-password') {
print('The password provided is too weak.');
} else if (e.code == 'email-already-in-use') {
print('The account already exists for that email.');
}
} catch (e) {
print(e);
}
}
Future signInWithEmailAndPassword({String email, String password}) async {
try {
UserCredential userCredential = await _firebaseAuth
.signInWithEmailAndPassword(
email: email,
password: password
);
User user = userCredential.user;
assert(user.uid != null);
email = user.email;
} on FirebaseAuthException catch (e) {
if (e.code == 'user-not-found') {
print('No user found for that email.');
} else if (e.code == 'wrong-password') {
print('Wrong password provided for that user.');
}
}
}
press: () {
if (formKey.currentState.validate()) {
formKey.currentState.save();
context
.read<Authentication>()
.signInWithEmailAndPassword(
email: emailController.text,
password: passwordController.text)
.whenComplete(() => Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) =>
HomeScreen())));
}
},

Answer 1

You can set up an AlertDialog widget similar to this. The Yes/No buttons are probably overkill in your situation and if so, just convert to an ok button and then you don't have to check the return result.
Future<String> showYesNoAlertDialog({
#required BuildContext context,
#required String titleText,
#required String messageText,
}) async {
// set up the buttons
final Widget yesButton = FlatButton(
onPressed: () => Navigator.pop(context, 'yes'),
child: const Text('Yes'),
);
final Widget noButton = FlatButton(
onPressed: () => Navigator.pop(context, 'no'),
child: const Text('No'),
);
// set up the AlertDialog
final alert = AlertDialog(
title: Text(titleText),
content: Text(messageText),
actions: [
yesButton,
noButton,
],
);
// show the dialog
return showDialog(
context: context,
builder: (context) => alert,
);
}
Then where you have your print statements outputting the errors, you'd call the above widget like this
final dr = await showYesNoAlertDialog(
context: context,
titleText: 'Authentication Error',
messageText:
'There has been an error during authentication. Would you like to retry?',
);
if (dr == 'yes') {
// Yes button clicked
}
else {
// No button clicked
}