Reactjs 如何使用AWS Amplify with Cognito创建独立的身份验证站点？

我有三个网络应用。两个是平台，一个是独立登录/注册。我希望能够登录到auth ui并在两个平台之间导航，而无需额外登录。现在我已经设置好使用AWS Amplify在auth UI中登录/注册。但我不知道在使用这两个平台的web应用程序时如何保持登录状态。我计划它们都在同一个域下，但也使用子域。例如，auth.domain.com、admin.domain.com和customer.domain.com

我对AWS Amplify非常陌生，我以前的所有应用程序都内置了身份验证，因此这是我第一次尝试将身份验证与主应用程序分离。我真的在寻找一个前进的方向或一个教程，如果有的话

---

感谢您的帮助。

首先，您不能为两个不同的域维护单个身份验证池，因为Cognito和Amplify一起维护每个域的身份验证的本地存储项和令牌。

---

如果您将两个应用集成到同一个域中，则可以实现这一点。

因此，您有处理登录的登录页面，还有一些其他页面，只有在用户登录时才让他们看到。这里有一种在功能组件中执行此操作的方法

在高层，您有一个管理身份验证状态的状态。默认情况下，它初始化为加载。然后使用

Auth.currentAuthenticatedUser（）

检查用户是否登录。如果是，则将其公开给页面内容。若并没有，你们可以引导他们进入登录页面

import React，{useState，useffect}来自“React”；
从“反应路由器”导入{Redirect}//例如，使用react路由器进行页面导航
从“aws放大”导入{Auth，Hub}；
const OtherPage=（）=>{
//默认为加载状态
const[authState，setAuthState]=useState（'loading'）；
//安装组件加载时运行“使用效果”
useEffect（（数据）=>{
//定义updateAuthState
让updateAuthState=async（）=>{
试一试{
//获取当前身份验证用户，如果未进行身份验证，将引发此错误
let user=wait Auth.currentAuthenticatedUser（）；
//无错误，请更改身份验证状态以显示页面内容
setAuthState（“认证”）；
}
捕获（错误）{
//错误，更改身份验证状态以将用户重定向到登录页
setAuthState（“未经验证”）；
}
}
//调用AuthState一次
updateAuthState（）；
//设置集线器以在用户注销时侦听身份验证事件
listen（'auth'，updateAuthStat）；
return（）=>Hub.remove（'auth'，updateAuthState）；//cleanup
}
//根据状态做不同的事情
开关（身份验证状态）{
“装载”案例：
返回装载。。。；
“已验证”案例：
返回经过身份验证的组件；
案例“未经验证”：
return；{/*我建议使用/login作为登录页*/}
违约：
返回null；
}
}
导出默认的其他页面；

《居住代码》是一个简化版，我将其整合在一起，我还没有对其进行测试，但其中有一个高层次的想法：）

---

要了解更多信息，我建议查看纳德·达比特（Nader Dabit）的《放大框架用户认证完整指南》（及其免费视频）[

我很感谢您的回答，但在我看来，这种解决方案将使身份验证与平台保持一致。我希望它们完全独立，完全独立的代码库，单独的SPA服务于单独的子域。我明白了，也许在github上提出一个使用问题会让am向您提供更正式的响应plify团队：（）