如果电子邮件和密码在 Firebase Flutter 中无效，如何显示错误消息？

Question

i have developed an login page,if the email and password matches from the database it successfully login's and moves to the new page,but if its wrong i want to display an error message email or password doesn't match.

Here's my code:

class _AdminLoginState extends State<AdminLogin> {
  String _username, _password;
  TextEditingController _email = TextEditingController();


  final GlobalKey<FormState> _formkey = GlobalKey<FormState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LOGIN'),
        backgroundColor: Colors.indigo[900],


      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Container(
              padding: const EdgeInsets.only(top: 50),
              child: SizedBox(
                height: 150.0,
                width: 300,
                child: Image.asset("assets/admin.png",
                  fit: BoxFit.contain,),


              ),
            ),
            Container(

              child: Text("ADMIN",style: TextStyle(fontSize: 15,fontWeight: FontWeight.bold,color: Colors.indigo),),

            ),
            Container(
              padding: const EdgeInsets.only(bottom: 50),
              child: Column(
                children: <Widget>[
                  SingleChildScrollView(

                    child: Form(
                      key: _formkey,
                      child: Column(
                        children: <Widget>[
                          SizedBox(
                            height: 60,
                          ),

                          SizedBox(
                            width: 380,
                            height: 70,
                            child: Container(
                              padding: EdgeInsets.all(4),
                              width: 500,
                              height: 60,
                              child: TextFormField(
                                autofocus: false,
                                obscureText: false,
                                keyboardType: TextInputType.emailAddress,
                                validator:(input){
                                  if(input.isEmpty){
                                    return 'please type username';
                                  }
                                  return null;
                                },
                                onSaved: (input) => _username =input ,
                                decoration: InputDecoration(
                                    labelText: 'Email',
                                    hintText: "Email",
                                    labelStyle: TextStyle(
                                      color: Colors.black,
                                      fontSize: 16,
                                    ),
                                  border: new OutlineInputBorder(
                                    borderRadius: const BorderRadius.all(

                                      const Radius.circular(20.0),
                                    ),
                                  ),
                                ),


                              ),
                            ),
                          ),

                          SizedBox(
                            width: 380,
                            height: 70,
                            child: Container(
                              padding: EdgeInsets.all(4),
                              width: 400,
                              height: 60,
                              child: TextFormField(
                                autofocus: false,
                                obscureText: true,
                                validator:(input){
                                  if(input.isEmpty){
                                    return 'please type Password';
                                  }
                                  return null;
                                },
                                onSaved: (input) => _password =input ,
                                decoration: InputDecoration(
                                    labelText: 'Password',
                                    hintText: "Password",
                                    labelStyle: TextStyle(
                                      color: Colors.black,
                                      fontSize: 16,
                                    ),
                                  border: new OutlineInputBorder(
                                    borderRadius: const BorderRadius.all(
                                      const Radius.circular(20.0),
                                    ),
                                  ),
                                ),


                              ),
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.all(4),
                            width: 500,
                            height: 60,
                            child: RaisedButton(
                              onPressed: login,
                              textColor: Colors.white,
                              color: Colors.indigo[900],
                              child: Text('Login'),
                            ),
                          )


                        ],
                      ),
                    ),
                  ),


                ],


              ),
            ),

          ],

        ),
      ),
      );

  }
  Future<void> login() async{
    final  formState = _formkey.currentState;
    if(formState.validate()){
      formState.save();
      try{

        final FirebaseUser user = (await FirebaseAuth.instance.signInWithEmailAndPassword(email: _username, password: _password)).user;
        Navigator.push(context, MaterialPageRoute(builder: (context) => Admin()));
      }catch(e){
        print(e.message);
      }


    }
  }
}

it will be really helpful if someone also helps me in validating the right email format and give give the proper validation for password

Answer 1

signInWithEmailAndPassword() returns an exception with a special code if the attempt is unsuccessful.

In order to print a message you need to add a catch block to your signInWithEmailAndPassword() method. Then you can use the error message.

Example:

firebase.auth().signInWithEmailAndPassword(email, password)
    .catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  if (errorCode === 'auth/wrong-password') {
    alert('Wrong password.');
  } else {
    alert(errorMessage);
  }
  console.log(error);
});

For security purposes I would suggest combining some of the messages together instead of giving a possible attacker a hint about if the email is already in the system or not.

I do not know how to use flutter so I can only give an idea;

In here you are directly trying to get the user from the method.

final FirebaseUser user = (await FirebaseAuth.instance.signInWithEmailAndPassword(email: _username, password: _password)).user;

Instead I would suggest using something like this (this is angular but I think you can easily apply to flutter with some modification)

final FirebaseUser user;

 await firebase.auth().signInWithEmailAndPassword(email, password)
      .then((data) => {
          this.user = data.user;
      })
      .catch((error) => {
        switch (error.code) {
          case "auth/invalid-email":
          case "auth/wrong-password":
          case "auth/user-not-found":
            {
              this.accountErrorMessage = "Wrong email address or password.";
              break;
            }
          case "auth/user-disabled":
          case "user-disabled":
            {
              this.accountErrorMessage = "This account is disabled";
              break;
            }
        }

You can find which kind of errors it may return from here: https://firebase.google.com/docs/reference/js/firebase.auth.Auth.html#signinwithemailandpassword

Answer 2

Use errortext in InputDecoration

here is demo

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[

            TextField(
              controller: _text,
              decoration: InputDecoration(
                labelText: 'email',
                errorText: loginfail ? 'email not match' : null,
              ),
            ),
            TextField(
              controller: _text,
              decoration: InputDecoration(
                labelText: 'password',
                errorText: loginfail ? 'password not match' : null,
              ),
            ),
            RaisedButton(
              onPressed: () {
                login();
              },
              child: Text('Submit'),
              textColor: Colors.white,
              color: Colors.blueAccent,
            )
          ],
        ),
      ),
    );
  }

Future<void> login() async{
    final  formState = _formkey.currentState;
    if(formState.validate()){
      formState.save();
      try{

        final FirebaseUser user = (await FirebaseAuth.instance.signInWithEmailAndPassword(email: _username, password: _password)).user;
        if(!user.uid.isEmpty()){
         Navigator.push(context, MaterialPageRoute(builder: (context) => Admin()));
        }else{
         setState((){
           loginfail = true; //loginfail is bool
          });
        }

      }catch(e){
        print(e.message);
      }
    }

hope it helps..

Answer 3

Following @Jaydeepchatrola answer's

I used a try catch block and checked if password was invalid or email, for better results!

               try {
                    setState(() {
                      wrongEmail = false;
                      wrongPassword = false;
                    });
                    final newUser = await _auth.signInWithEmailAndPassword(
                        email: email, password: password);
                    if (newUser != null) {
                      Navigator.pushNamed(context, Done.id);
                    }
                  } catch (e) {
                    print(e.code);
                    if (e.code == 'ERROR_WRONG_PASSWORD') {
                      setState(() {
                        wrongPassword = true;
                      });
                    } else {
                      setState(() {
                        emailText = 'User doesn\'t exist';
                        passwordText = 'Please check your email';

                        wrongPassword = true;
                        wrongEmail = true;
                      });
                    }
                  }

Answer 4

You need to catch the specific error. I had the problem by myself, with this code I solved the problem.

try {
        final user = await _auth.signInWithEmailAndPassword(
            email: email, password: password);
        if (user != null) {
          Navigator.pushNamed(context, HomeScreen.id);
        }
      } on auth.FirebaseAuthException catch (e) {
     //Here you catch the specific error 
        if (e.code == 'wrong-password') {
    //The thing that should happen if the password is incorrect
   //In my case it will the change the hinttext  
          setState(() {
            hintTextPassword = 'Password incorrect. Please try again';
            passwordHintColor = Colors.red;
          });
        } else if (e.code == 'user-not-found') {
          setState(() {
            hintTextEmail = 'No user found for that email.';
            emailHintColor = Colors.red;
          });
        }
      } catch (e) {
        print(e);
      }

Answer 5

1. add rflutter_alert: ^2.0.4 in your project file pubspec.yaml under dependencies: and save it

2. add import 'package:rflutter_alert/rflutter_alert.dart'; in your file of your auth screen

3. add

   Alert( context: context, title: "Failed Login", desc: "Incorrect Email Or Password.") .show();

in catch(e){}

like that:

Future<void> login() async{
    final  formState = _formkey.currentState;
    if(formState.validate()){
      formState.save();
      try{

        final FirebaseUser user = (await FirebaseAuth.instance.signInWithEmailAndPassword(email: _username, password: _password)).user;
        Navigator.push(context, MaterialPageRoute(builder: (context) => Admin()));
      }catch(e){
        Alert(
                                context: context,
                                title: "Failed Login",
                                desc: "Incorrect Email Or Password.")
                            .show();
      }


    }