Flutter中SignInScreen的Firebase Auth UI错误自定义处理方案

针对firebase_ui_auth: ^1.12.1版本的SignInScreen，可以通过以下两种方式自定义错误提示：

方法1：使用errorBuilder替换默认错误UI #

SignInScreen提供了errorBuilder参数，允许你根据错误类型返回自定义的提示组件，直接替换默认的冗长错误展示。

示例代码：

SignInScreen(
  providers: providers,
  actions: [
    AuthStateChangeAction<SignedIn>((context, state) {
      Navigator.pushReplacementNamed(context, '/profile');
    }),
  ],
  // 自定义错误提示组件
  errorBuilder: (context, exception) {
    String errorMessage;
    // 根据Firebase Auth错误码匹配友好提示
    if (exception is FirebaseAuthException) {
      switch (exception.code) {
        case 'user-not-found':
          errorMessage = '未找到该用户，请检查账号是否正确';
          break;
        case 'wrong-password':
          errorMessage = '密码错误，请重新输入';
          break;
        case 'invalid-email':
          errorMessage = '邮箱格式不正确';
          break;
        default:
          errorMessage = '登录失败，请稍后重试';
      }
    } else {
      errorMessage = '未知错误';
    }

    // 返回自定义样式的错误文本
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Text(
        errorMessage,
        style: const TextStyle(color: Colors.redAccent, fontSize: 14),
        textAlign: TextAlign.center,
      ),
    );
  },
);

方法2：通过AuthStateChangeAction<AuthFailed>监听错误状态 #

如果需要更灵活的提示方式（比如显示SnackBar、弹窗），可以添加AuthStateChangeAction<AuthFailed>捕获登录失败状态，自行触发自定义提示。

示例代码：

SignInScreen(
  providers: providers,
  actions: [
    AuthStateChangeAction<SignedIn>((context, state) {
      Navigator.pushReplacementNamed(context, '/profile');
    }),
    // 监听登录失败事件
    AuthStateChangeAction<AuthFailed>((context, state) {
      String errorMessage;
      final exception = state.exception;
      if (exception is FirebaseAuthException) {
        switch (exception.code) {
          case 'user-not-found':
            errorMessage = '未找到该用户，请检查账号是否正确';
            break;
          case 'wrong-password':
            errorMessage = '密码错误，请重新输入';
            break;
          case 'invalid-email':
            errorMessage = '邮箱格式不正确';
            break;
          default:
            errorMessage = '登录失败，请稍后重试';
        }
      } else {
        errorMessage = '未知错误';
      }

      // 显示自定义SnackBar提示
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(errorMessage),
          backgroundColor: Colors.redAccent,
          duration: const Duration(seconds: 3),
        ),
      );
    }),
  ],
);

注意事项 #

• 需确保导入firebase_auth包，才能识别FirebaseAuthException类型
• 可参考Firebase官方文档的错误码列表，补充更多场景的自定义提示
• 两种方法可按需选择：errorBuilder适合替换页面内的默认错误区域，AuthStateChangeAction适合全局提示类的交互

内容的提问来源于stack exchange，提问作者tapizquent