Show Exception Errors in UI Firebase Auth Flutter

Question

First of all i am new to Flutter, i read lots of threads but not getting anything.

WHAT IS MY PROBLEM?

i have two pages auth.dart and login.dart.In auth.dart page i have a class called AuthService which consists of the following code(to the point):

class AuthService {

  final FirebaseAuth _auth = FirebaseAuth.instance;

  Future<bool> signInWithPhone(String phone, BuildContext context) async {
  ....
      verificationFailed: (AuthException exception) {
        // i can see the exception in debug console using print
        return exception;
      },
  ....
  }

}

In login.dart, i have a statefull widget which which looks like this and in there i referenced the above class and i am calling the signInWithPhone method:

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {

  final AuthService _auth = AuthService();
  ....
  ....
  Container(
    width: double.infinity,
    child: FlatButton(
        child: Text("LOGIN"),
        textColor: Colors.white,
        padding: EdgeInsets.all(16),
        onPressed: () {
            // here i am calling the method signInWithPhone of above class

            final phone = _phoneController.text.trim();
            _auth.signInWithPhone(phone, context);

        }
    )
  )
 ....
 ....
}

WHAT I WANT?

I want to display the exception error message received in onPressed event of my Login button so that i can display a alert dialogue using the error message.

WHAT I HAVE TRIED ?

1) print(_auth.signInWithPhone(phone, context)); But it returns null;

2)

_auth.signInWithPhone(phone, context).then((value){
   // alert/text/print
   print(value);
   }

this also returns null

Can anybody please help me solve it as i need to show user the error message if the mobile number is not correct or the OTP is not corrrect.

Ahmed Khattab · Accepted Answer · 2020-04-06 13:14:01Z

1

well, first of all you need to listen to the exception and await it , you can return false in case of an expection and do something depending on that case like so.

you can return a map that contains the result and a message like so

{
  'message': message,
  'success' : true or false depending on the state of the request
}

so

in AuthService.dart

 verificationFailed: (AuthException exception) {
        // i can see the exception in debug console using print
        //return exception;
        return {
            'message': exception,
           'success': false
         }; // means verification failed;
 },

in LoginScreen.dart


void showAlert(message) {
    showDialog(context: context, builder: (context) {
       return AlertDialog(
         title: message,
       );
    });
}

 onPressed: async () {
            // here i am calling the method signInWithPhone of above class

            final phone = _phoneController.text.trim();
            final result = await _auth.signInWithPhone(phone, context);


            if(!result['suceess']) {
                 this.showAlert(result['message']);
             }
        }

edited Apr 6, 2020 at 13:14

answered Apr 5, 2020 at 23:29

Ahmed Khattab

2,7992 gold badges15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

MR_AMDEV Over a year ago

Thank you for the answer it works But there is another thing if i want to show the error message of the verificationFailed method instead of showing My Hardcoded Errors in LoginScreen? is there any possibility to do so?

Ahmed Khattab Over a year ago

@MR_AMDEV i updated my answer to reflect the changed that you want

MR_AMDEV Over a year ago

its giving me the following error The operator '[]' isn't defined for the class 'bool'. Try defining the operator '[]'.dart(undefined_operator)

Ahmed Khattab Over a year ago

oh, you need to update your method signature from Future<bool> signInWithPhone to Future<Map> signInWithPhone

MR_AMDEV Over a year ago

I have changed it but now at runtime it gives me the following error:

Exception has occurred. NoSuchMethodError (NoSuchMethodError: The method '[]' was called on null. Receiver: null Tried calling: []("success"))

|

Collectives™ on Stack Overflow

Show Exception Errors in UI Firebase Auth Flutter

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related