不修改AWS Amplify库，在React应用中获取Cognito登录错误响应

Hey Matthew，针对你提出的三个思路，我整理了具体的可行方案，帮你在Amplify官方功能支持前实现自定义错误展示：

思路1：直接获取Authenticator的错误状态（最优方案） #

其实Amplify已经提供了更直接的方式，不用去“hack”父组件的state——使用useAuthenticator钩子（React 16.8+支持）。这个钩子能直接获取到Authenticator管理的所有状态，包括登录过程中产生的错误信息。

具体实现步骤：

• 在你的自定义登录组件中导入钩子：

  import { useAuthenticator } from '@aws-amplify/ui-react';
  

• 在组件内部获取错误状态：

  const { error } = useAuthenticator();
  

• 然后就可以在自定义UI中直接渲染这个错误：

  {error && <div className="error-message">{error.message}</div>}
  

这个方法完全符合Amplify的设计规范，没有任何hack行为，是最推荐的方案。你之前可能没注意到这个内置钩子，它其实就是用来让自定义UI获取认证状态的。

思路2：拦截HTTP响应获取错误信息（备选hack方案） #

如果因为某些原因无法使用钩子，你可以通过拦截Amplify的API请求来获取Cognito的错误响应。Amplify允许你自定义请求拦截器，或者直接重写全局的fetch方法来捕获请求：

方法：使用Amplify的请求拦截器 #

Amplify的Auth模块支持配置自定义请求拦截器，你可以在初始化Amplify时添加：

import { Auth } from 'aws-amplify';

Auth.configure({
  // 你的其他配置
  API: {
    interceptors: {
      request: async (request) => {
        // 可以在这里修改请求配置
        return request;
      },
      response: async (response) => {
        // 检查是否是Cognito的错误响应
        if (response.status === 400 && response.url.includes('cognito-idp')) {
          const errorData = await response.json();
          // 这里拿到的errorData就是控制台里看到的错误体，比如errorData.message
          // 可以把它存入你的全局状态（比如Redux、Context）供自定义UI使用
        }
        return response;
      }
    }
  }
});

这个方法需要你自己管理错误状态的存储和传递，虽然可行，但不如钩子方案简洁。

思路3：监听Toast组件的DOM变化（兜底hack方案） #

如果你已经隐藏了默认Toast，还可以通过MutationObserver监听DOM变化，捕获Toast的内容：

具体实现：

• 在你的应用入口组件中添加一个观察者：

useEffect(() => {
  // 观察body节点的子元素变化
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      // 检查新增的节点是否是Amplify的Toast
      const toastElement = Array.from(mutation.addedNodes).find(node => 
        node.nodeType === 1 && node.classList.contains('amplify-toast') // 根据实际的Toast类名调整
      );
      if (toastElement) {
        // 获取错误文本（假设错误在span标签里）
        const errorText = toastElement.querySelector('span').textContent;
        // 把错误文本存入你的状态
        setLoginError(errorText);
        // 因为你已经隐藏了Toast，这里可以直接移除它
        toastElement.remove();
      }
    });
  });

  observer.observe(document.body, { childList: true, subtree: true });

  return () => observer.disconnect();
}, []);

这个方法完全依赖DOM结构，一旦Amplify更新了Toast的类名或结构，代码就会失效，所以只建议作为最后的兜底方案。

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