With Flutter, how can I display Firebase Auth error messages caught within an AuthService class within a separate log in page widget?

user_10217638 0
Viewed 2115

I have a Registration Page with my sign up form and then an AuthService class I call to sign up the user, returning a mapped custom User class. I can check if the result of the function call is not null and therefore navigate my user to the home page, but I can't work out how to setState or similar to actually show the user the Firebase Auth messages in my Registration page, as the try/catch block is within my auth service class.

This is my abbreviated Registration screen widget:

class RegistrationScreen extends StatefulWidget {
  @override
  _RegistrationScreenState createState() => _RegistrationScreenState();
}

class _RegistrationScreenState extends State<RegistrationScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //abbreviated...
                RoundedButton(
                  onPressed: () async {
                    if (_formKey.currentState.validate()) {
                      dynamic result = await _auth.registerWithEmailAndPassword(email, password, displayName);
                     if (result != null) {
                       Navigator.pushNamedAndRemoveUntil(context, Home.id, (_) => false);
                      } 
                     }
                  }
                }
  }

The registerWithEmailAndPassword is within an imported AuthService class auth.dart:

class AuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final _firestore = Firestore.instance;
  //create User object
  User _userFromFirebaseUser(FirebaseUser user) {
    return user != null ? User(uid: user.uid, displayName: user.displayName) : null;
  }

  //auth change user stream
  Stream<User> get user {
    return _auth.onAuthStateChanged
    .map(_userFromFirebaseUser);
  }

  // register
  Future registerWithEmailAndPassword(String email, String password, String displayName) async {
                      try { 
                      AuthResult result = await _auth.createUserWithEmailAndPassword(email: email, password: password);
                      FirebaseUser user = result.user;

                      return _userFromFirebaseUser(user);
                    } catch(e) {
                      print(e);
                    } 
                      } 
  }

If I then test this with a badly formatted email, I correctly print to the console: 

flutter: PlatformException(ERROR_INVALID_EMAIL, The email address is badly formatted., null)

However how can I use that PlatformException to setState or similar within my registration screen to show the e.message to the user?

Thanks.

google-cloud-firestore firebase-authentication firebase flutter
1 Answers

You can create a class like this;

class Errors {
   static String show(String errorCode) {
     switch (errorCode) {
       case 'ERROR_EMAIL_ALREADY_IN_USE':
         return "This e-mail address is already in use, please use a different e-mail address.";

       case 'ERROR_INVALID_EMAIL':
         return "The email address is badly formatted.";

       case 'ERROR_ACCOUNT_EXISTS_WITH_DIFFERENT_CREDENTIAL':
         return "The e-mail address in your Facebook account has been registered in the system before. Please login by trying other methods with this e-mail address.";

       case 'ERROR_WRONG_PASSWORD':
         return "E-mail address or password is incorrect.";

       default:
         return "An error has occurred";
     }
   }
}

And then, when you get PlatformException error, you can show an alert dialog to user like this;

try { 
   AuthResult result = await _auth.createUserWithEmailAndPassword(email: email, password: password);
   FirebaseUser user = result.user;

   return _userFromFirebaseUser(user);
} catch(e) {
   print(Errors.show(e.code));   // On this line, call your class and show the error message.
}
user_29119400
Related