Handle Firebase Auth UI errors in Flutter SignInScreen

117 views Asked by At

I am using the firebase_ui_auth: ^1.12.1 package to show SignInScreen but I can't find a way to display a custom message when an error occurs. If, for example, the user enters wrong credentials, I get an exception and a long, not very user-friendly message shows.

SignInScreen(
    providers: providers,
    actions: [
        AuthStateChangeAction<SignedIn>((context, state) {
            Navigator.pushReplacementNamed(context, '/profile');
        }),
    ],
);

How can I show a different message or modify how the error message show?

SignInScreen error message

3

There are 3 answers

1
Saad Akram On
 try {
        await FirebaseAuth.instance.signInWithEmailAndPassword(
            email: emailController.text, password: passwordController.text);

       
      }  catch (error) {
        var e = error as FirebaseAuthException;
        Print(e.message!);
      }

Try this.

0
Daham Akl On

There is a class you can use for that. It's also explained in the official document also.

 ErrorText
 A widget that displays error text for a given Firebase error code. 

Check this out example:

ErrorText.localizeError = (BuildContext context, FirebaseAuthException e) {
  final defaultLabels = FirebaseUILocalizations.labelsOf(context);

  return switch (e.code) {
    'user-not-found' => 'Please create an account first.',
    'credential-already-in-use' => 'This email is already in use.',
    _ => localizedErrorText(e.code, defaultLabels) ?? 'Oh no! Something went wrong.',
  }
}

Or the network errors:

ErrorText.localizePlatformError = (BuildContext context, PlatformException e) {
  if (e.code == "network_error") return "Please check your internet connection.";
  return "Oh no! Something went wrong.";
}
0
CodePlay On

As per the firebase_ui_auth version 1.12.1, the EmailForm within the SignInScreen is unable to disable the on-screen error messages, catch it and display in our own dialog. Below is the screenshot of the code.

Code screenshot of EmailForm showing the ErrorText

I have opened an issue to request for more custom handling on the error message when authentication failed.