How do you troubleshoot Next.js - Supabase Auth issues?

认证很难。SSR 更难。在 Supabase，我们尝试通过提供 @supabase/ssr 包来一起解决这些问题，从而方便地在 Supabase 上实现认证。虽然我的目标是解决与 Next.js 相关的问题，但你可能也可以将这些概念应用到其他 SSR 框架中，例如 Nuxt、SvelteKit 和 Remix。这是一个持续更新的文档，我们计划随着 Next.js 及其 API + @supabase/ssr 的发展定期更新它。

🌐 Authentication is hard. SSR is harder. At Supabase, we try to address these together by providing@supabase/ssr package to help implement authentication with Supabase conveniently. While I’m targeting to address Next.js-related issues, you can probably apply these concepts to other SSR frameworks such as Nuxt, SvelteKit, and Remix. This is a living document, and we plan to update it regularly as Next.js and its APIs + @supabase/ssr evolve.

如果你在使用 Supabase Auth 和 SSR 时遇到问题，下面的清单可以帮助你排查问题。

🌐 If you are experiencing issues with Supabase Auth and SSR, the following checklist will help you troubleshoot the issues.

✅ 你已经使用了最新版本的 @supabase/ssr 包。请注意，@supabase/auth-helpers 包正在被弃用，所有的 bug 修复和功能更新都会集中在 @supabase/ssr 包上。 ✅ 你所有的客户端工具函数都实现了吗？这样你就可以把它们导入到需要访问 Supabase 认证功能的组件中。务必仔细按照 这里的指南 操作，以避免遇到意外错误。 ✅ 你有没有正确实现 proxy.ts 文件？这样可以在加载需要用户会话授权的服务器组件之前刷新过期的会话。

这份文档会帮你确认自己走在正确的路上。

🌐 This documentation will help you validate that you’re on the correct path.

• 为 Next.js 设置服务器端认证 - https://supabase.com/docs/guides/auth/server-side/nextjs?queryGroups=router&router=app
• SSR 高级指南 - https://supabase.com/docs/guides/auth/server-side/advanced-guide
• 为 SSR 创建 Supabase 客户端 - https://supabase.com/docs/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=nextjs&queryGroups=environment&environment=proxy

识别代码潜在问题的另一种方法是将其与 Supabase Next.js 快速入门进行比较。使用命令 npx create-next-app -e with-supabase 将快速入门应用下载到你的本地机器上。

🌐 Another way to identify any potential issues with your code is to compare it with the Supabase Next.js quickstart. Use the command npx create-next-app -e with-supabase to download a copy to your local machine of the quickstart application.

我们的 YouTube 通道有很棒的视频，帮助你在 Next.js 中实现 Supabase 身份验证。

🌐 Our YouTube channel has great videos to help you implement Supabase Auth with Next.js.

• 在 Next.js App Router 中做认证的正确方法 - https://youtu.be/v6UvgfSIjQ0?si=TBUN9dD4pmjRg78a

另外，花点时间熟悉一下 Next.js 的一些身份验证概念，比如 https://next.nodejs.cn/docs/app/building-your-application/authentication。

🌐 Also, take some time to get familiar with some concepts on authentication with Next.js, such as https://next.nodejs.cn/docs/app/building-your-application/authentication.

我们知道你的需求各不相同，你可能会遇到一些特殊情况。在这种情况下，加入我们超棒的 Discord 社区 获取问题排查帮助吧。你也可以把问题发布到 @supabase/ssr GitHub 仓库。我们总是欢迎你的贡献！

🌐 We know your requirements vary, and you might run into an edge case. In that scenario, join our amazing Discord community to get help troubleshooting the issue. You can post your issues to the @supabase/ssr GitHub repo. We always welcome your contributions!

如果以上方法都不行，别犹豫，联系 Supabase 支持；可以考虑提供更多信息，比如你的使用场景、代码片段、一份 package.json、proxy.ts 和 HAR 文件，以帮助支持团队排查你的问题。

🌐 If none of the above works, don’t hesitate to reach out to Supabase support; consider adding more information, such as your use case, code snippets, a copy of your package.json, proxy.ts and a HAR file, to help the support team triage your issue.