AWS Amplify、Next.js 和经过身份验证的 SSR 的问题答案

【问题标题】：Problems with AWS Amplify, Next.js and authenticated SSRAWS Amplify、Next.js 和经过身份验证的 SSR 的问题
【发布时间】：2021-09-17 11:00:26
【问题描述】：

我有一个 Next.js 应用程序，它使用 AWS Cognito 用户池进行身份验证。我有一个自定义 UI，并且在我的代码中使用 aws-amplify 包直接调用 signIn/signOut/etc...。（我之前使用过 AWS 托管 UI，并且遇到了下面列出的相同问题 - 我希望切换并深入研究揭示我的问题的实际 API，但事实并非如此）

开发中的一切（在 localhost 上运行）都正常工作 - 我可以使用页面的渲染功能登录并访问我当前的会话

import { Auth } from 'aws-amplify';
...
export default const MyPage = (props) => {
    useEffect(async () => {
        const session = await Auth.currentSession();
        ...
    }
    ...
}

在 SSR 期间

import { withSSRContext } from 'aws-amplify';
...
export async function getServerSideProps(context) {
    ...
    const SSR = withSSRContext(context);
    const session = await SSR.Auth.currentSession();
    ...
}

但是，当我部署到运行暂存环境的 AWS Amplify 时，在 SSR 期间获取当前会话的调用失败。这会导致页面呈现好像用户未登录，然后在客户端能够确定用户实际上已登录时切换。

当前假设 - 缺少 cookie(??)：

我在登录过程中检查了浏览器中的 AWS cookie 设置是否正确。我也检查过，devtools 告诉我 cookie 正确地与请求一起发送到服务器。

但是，如果我在我的暂存环境中在getServerSideProps 中注销context.req.headers，则缺少 cookie 标头（而在我的开发环境中它显示正确）。如果这是真的，这将解释我所看到的 getServerSideProps 没有看到我的身份验证令牌等......但我看不出为什么 cookie 标头会被剥离？

以前有人见过这样的事情吗？这甚至可能吗？如果是这样，为什么会发生这种情况？我想我错过了一些东西，例如配置相关，但我觉得我已经非常密切地关注文档 - 我当前的 conf 看起来像这样

Amplify.configure({
    Auth: {...}
    ssr: true
});

Next.js 版本为11.1.2（最新）

非常感谢任何帮助！

【问题讨论】：

您好，您能解决上述问题吗？如果是，您能否阐明其背后的原因和原因？
恐怕还没有。目前，我已经解决了，因为我不需要搜索引擎对页面的认证版本进行索引，因此可以通过 SSR 提供未经认证的版本。然后我有客户端代码延迟页面的显示，直到验证状态被检查，以确保我们显示正确的版本，而不是显示未经身份验证的版本，然后快速轻弹到经过身份验证的版本。不理想，但目前可以使用，等待更多时间调查
嗯.. 感谢您的信息。
你在使用云端吗？
不，它只是一个基于存储在 CodeCommit 中的 git 存储库的 Amplify 应用程序。构建设置都是自动检测的，但添加了自定义域。所以可能尽可能接近香草设置。

标签： amazon-web-services authentication next.js aws-amplify

【解决方案1】：

您必须使用 Next@11.0.0 才能在生产中使用 getServerSideProps、withSSRContext 和 Auth 模块。

【讨论】：

Op提到“Next.js版本为11.1.2（最新）”

【解决方案2】：

我有同样的问题。我的解决方案是断开一个分支有一次身份验证问题，然后重新连接该分支。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
终于找到了原因。您是否使用 Amplify 的访问控制功能来应用基本身份验证？我不知道确切的原因，但我已经确认部署后没有问题，但几个小时后，出现同样的问题。解决方案是使用 CloudFront Functions 将您自己的身份验证机制插入到查看器请求中。

【解决方案3】：

您的构建设置是什么？我猜你正在使用next build && next export，在这种情况下，getServerSideProps 将不起作用。见https://nextjs.org/docs/advanced-features/static-html-export#unsupported-features

要将 SSR 与 AWS amplify 结合使用，请参阅 https://docs.aws.amazon.com/amplify/latest/userguide/server-side-rendering-amplify.html#redeploy-ssg-to-ssr 或考虑部署在实际上是服务器的节点服务器上，您可以从 next start 开始，如 AWS EC2 或部署在 Vercel 上。

否则，如果您使用next export，则只能通过客户端更新来处理客户端数据获取，并且不能使用 nextjs 的动态服务器端功能。

【讨论】：

AWS Amplify 支持 SSR - docs.aws.amazon.com/amplify/latest/userguide/… - getServerSideProps 运行良好，可以执行服务器端 API 调用并正常生成页面 - 只是它这样做就好像用户没有经过身份验证，甚至虽然他们是
@James Loxam 是的，但是 package.json 脚本应该是 "scripts": { "dev": "next dev", "build": "next build", "start": "next start" },。见docs.aws.amazon.com/amplify/latest/userguide/…
@James Loxam 作为调试步骤，将 console.log 行添加到 getServerSide 道具。如果您在构建步骤中看到打印的行，则需要更正您的 package.json

【解决方案4】：

context.req.headers 中没有任何cookie 的一个原因是 CloudFront 分配不转发任何 cookie。

这个“CloudFront Behaviour”可以通过两种方式改变：

转发所有 cookie，或者
转发指定的 cookie（即 cookie 名称数组）

要更改行为，请导航到 AWS 控制台上的 CloudFront > Distributions > your_distribution > Behaviors 选项卡。

然后编辑现有或创建新行为 > 更改 cookie 设置（例如将其设置为“全部”）

【讨论】：