CODEWITHSUNDEEP
middlewareauth0next.js13app-router
Brian Yu
Brian Yu

Reputation: 1

Next.js 13 (App Router) and Auth0 best practices

From my understanding, the stable version of Auth0 for Nextjs 13 was released this past August. Maybe that's why there aren't that many example out there, but my question is what the best practices are regarding actually auth-guarding pages (I'll explain what I mean by "actually auth-guarding").

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

All example out there wrap the entire app with UserProvider, and provide hooks for every child component/page, through withPageAuthRequired for SSR pages, and useUser for CSR pages. I want to know how to not only wrap the entire app so that those hooks can be used anywhere, but to also actually implement conditional logic like: const { user, error, isLoading } = useUser();

if (isLoading) return Loading...; if (error) return {error.message};

if (user) { return ( Welcome {user.name}! Logout ); }

return Login;

this in a root layout.tsx or page.tsx. It's confusing because auth0 is differentiating between CSR and SSR, but a root page.tsx or layout.tsx both have child componenets that can be either CSR or SSR.

Is there a way to implement that logic globally, to protect all routes?

Here is someone asking a similar question: https://github.com/auth0/nextjs-auth0/issues/1235#issuecomment-1614552306

In that example, the entire app seems to be exporting with withPageAuthRequired , but that doesn't seem to bring the behavior that I want, although I could have implemented it wrong. Correct me if I'm wrong - I think the example in that github issue will work if every child component of that second snippen of code is SSR, then every page will be guarded.

Some potential solutions that come to mind are using middlewares or not using auth0 at all, but I have no idea.

Thank you for your help!

Tried that kind of conditional logic in root page.tsx's and layout.tsx's, but I could get into any page without login.

Can successfully implement that kind of conditional logic on individual pages (after logging in, the user object is there, etc.)

All youtube tutorials are either not with Next.js 13, or not with Auth0.

https://github.com/auth0-samples/auth0-nextjs-samples/blob/35b139916aa114c8a0db4c636b254be7d42923b5/Sample-01/app/page.jsx This repo with example have ones with guarding a csr page and a ssr page, but nothing globally- don't see a middleware example either.

Upvotes: 0

Views: 1309

Answers (1)

Brian Yu
Brian Yu

Reputation: 1

Put a middleware.ts or middleware.js at the root directory, not inside the app directory.

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

Upvotes: 0

Related Questions