Redirecting unauthenticated users in Nextjs 16 cache components

[pauksztello]

Hello,

We’re experimenting with Next.js 16 cacheComponents, and we’re struggling to figure out the right way to redirect users based on whether they’re authenticated.

Right now, we check for a user session in an RSC component on each page and redirect if the session is invalid:

export default async function ProtectedPage() {
  const session = await auth.api.getSession({
    headers: await headers(),
  });

  if (!session) redirect("/login");

  return "Protected route";
}

We’re not sure what the proper way to do this with cache components.

I guess we should do the same, but only in nested components and in multiple places where data is used? We don’t like having to repeat that in multiple places.

export default function ProtectedPage() {
  return (
    <Suspense>
      <ProtectedComponent />
    </Suspense>
  );
}

async function ProtectedComponent() {
  "use cache: private";

  const session = await auth.api.getSession({
    headers: await headers(),
  });

  if (!session) redirect("/login");

  return "Protected content";
}

It gets even weirder on the login page, where we don’t actually use any user data from the session. Do we create a separate component just for redirecting?

export default function LoginPage() {
  return (
    <Suspense>
      <LoginRedirect />
    </Suspense>
  );
}

async function LoginRedirect() {
  "use cache: private";

  const session = await auth.api.getSession({
    headers: await headers(),
  });

  if (session) redirect("/dashboard");

  return null;
}

We are using a proxy (middleware), but we only check for the cookie for optimistic redirects.

Thanks!

Additional information

No response

Example

No response

[rwbe]

Hey! I totally get the confusion here. Let me break it down simply.

Think of it like a security guard at a building entrance:

• The guard (auth check) stands at the door before you enter
• The rooms inside (cached content) are already set up and ready
• If the guard doesn't let you in, you never see the rooms

With cacheComponents, your auth check is the guard - it must stay outside the cached boundary. The page function itself is dynamic by default, so that's where auth lives.

Protected Page

export default async function ProtectedPage() {
  // Guard at the door (runs every request)
  const session = await auth.api.getSession({ headers: await headers() });
  if (!session) redirect("/login");
  
  // Rooms inside (can be cached)
  return (
    <Suspense fallback={<Loading />}>
      <CachedContent />
    </Suspense>
  );
}

async function CachedContent() {
  "use cache";
  return <div>Your protected content</div>;
}

Login Page (redirect if already logged in)

Same logic - guard first, then content:

export default async function LoginPage() {
  const session = await auth.api.getSession({ headers: await headers() });
  if (session) redirect("/dashboard");
  
  return <LoginForm />;
}

No extra wrapper components needed!

Quick Tip

If you call getSession in multiple places, wrap it with React's cache() so it only runs once per request.

Docs: Next.js Auth Guide

[pauksztello]

When using cache components, you can’t access headers() at the top level of a Page unless it’s wrapped in <Suspense>. The code above that you have provided will throw a Blocking Route error:

Uncached data was accessed outside of <Suspense>.