Next.js 13(应用程序路由器)和 Auth0 最佳实践

问题描述 投票:0回答:1

据我了解,Nextjs 13 的 Auth0 稳定版本已于去年 8 月发布。也许这就是为什么没有那么多例子,但我的问题是关于实际身份验证页面的最佳实践是什么(我将解释“实际身份验证”的含义)。

https://auth0.com/blog/auth0-stable-support-for-nextjs-app-router/

所有示例都使用 UserProvider 包装整个应用程序,并为每个子组件/页面提供钩子,通过 withPageAuthRequired 用于 SSR 页面,并通过 useUser 用于 CSR 页面。我想知道如何不仅包装整个应用程序以便这些钩子可以在任何地方使用,而且还实际实现条件逻辑,例如: const { 用户,错误,正在加载 } = useUser();

if (isLoading) 返回正在加载...; 如果(错误)返回{error.message};

如果(用户){ 返回 ( 欢迎{用户名}! 退出 ); }

返回登录;

这位于根布局.tsx 或 page.tsx 中。这很令人困惑,因为 auth0 区分 CSR 和 SSR,但根 page.tsx 或 layout.tsx 都有可以是 CSR 或 SSR 的子组件。

有没有办法在全球范围内实现该逻辑,以保护所有路由?

有人问类似的问题:https://github.com/auth0/nextjs-auth0/issues/1235#issuecomment-1614552306

在该示例中,整个应用程序似乎正在导出 需要页面验证 ,但这似乎并没有带来我想要的行为,尽管我可能会错误地实现它。如果我错了,请纠正我 - 我认为如果第二个代码片段的每个子组件都是 SSR,那么 github 问题中的示例将会起作用,那么每个页面都会受到保护。

我想到的一些潜在解决方案是使用中间件或根本不使用 auth0,但我不知道。

谢谢您的帮助!

在根page.tsx和layout.tsx中尝试过这种条件逻辑,但我可以在不登录的情况下进入任何页面。

能够在各个页面成功实现那种条件逻辑(登录后,用户对象存在等)

所有 YouTube 教程要么不使用 Next.js 13,要么不使用 Auth0。

https://github.com/auth0-samples/auth0-nextjs-samples/blob/35b139916aa114c8a0db4c636b254be7d42923b5/Sample-01/app/page.jsx 这个带有示例的存储库具有保护 csr 页面和 ssr 页面的功能,但没有全局的内容 - 也没有看到中间件示例。

middleware auth0 next.js13 app-router
1个回答
0
投票

将 middleware.ts 或 middleware.js 放在根目录中,而不是放在 app 目录中。

https://auth0.github.io/nextjs-auth0/types/helpers_with_middleware_auth_required.WithMiddlewareAuthRequired.html

© www.soinside.com 2019 - 2024. All rights reserved.