Conditional rendering for permission check

[mluksch]

Hello,

what would be the recommended way to solve the problem, where a subset of users are not allowed to see specific parts of the page but still are allowed to access the page.

Have found this in the docs:

A common pattern in SPAs is to return null in a layout or a top-level component if a user is not authorized. This pattern is not not recommended since Next.js applications have multiple entry points, which will not prevent nested route segments and Server Actions from being accessed.

I have a Parent RSC "PermissionCheck" not in a layout component but in a page.tsx (i.e. one of its children) for checking, if the user has permission to see the children-component passed into "PermissionCheck" or otherwise null gets returned by the PermissionCheck-component.

export const PermissionCheck = (props) => {
   const hasPermission = ...
   if(!hasPermission) {
      return null
   }
   return props.children;
}

// In an RSC somewhere in a page.tsx or one of its children:
const Page = () => {
  return (
    <div>
      <div>Stuff that all users are allowed to see...</div>
      <PermissionCheck>
        <div>Stuff that only certain users are allowed to see...</div>
      </PermissionCheck>
    </div>
  );
};

export default Page;

Is this a secure way to prevent users to see sensitive components in the new App Router? Or what would be the recommended way?

In general, if there is such a PermissionCheck-Component somewhere in the React RSC component tree, would that prevent the user from seeing all components below the PermissionCheck-Component, if the user is missing permission?

Thank you.

[versecafe]

@mluksch layout or page level auth and auth tier checks are a good method

import { validateUser } from "@exakty/auth";
import { Card, CardDescription, CardTitle, MaxWidthWrapper } from "@exakty/ui";
import { redirect } from "next/navigation";
import {
  RevalidateArticlesButton,
  RevalidateCommunitiesButton,
  RevalidateLandersButton,
  RevalidateTestsButton,
} from "./revalidate-buttons";

export default async function AdminPage(): Promise<JSX.Element> {
  const { user } = await validateUser();

  if (user?.role !== "admin") redirect("/");

  return (
    <MaxWidthWrapper className="mt-16">
      <h1 className="text-3xl font-bold">Admin Page</h1>
      <Card className="mt-8 max-w-[560px] bg-white/50 p-4 backdrop-blur-xl">
        <CardTitle className="text-2xl">Revalidate Data</CardTitle>
        <CardDescription>
          Revalidate cached data by tag to ensure that the latest data is being
          served. do this if you have just updated content in the database.
        </CardDescription>
        <div className="mt-4 flex justify-center space-x-4">
          <RevalidateArticlesButton />
          <RevalidateCommunitiesButton />
          <RevalidateTestsButton />
          <RevalidateLandersButton />
        </div>
      </Card>
    </MaxWidthWrapper>
  );
}

[mluksch]

@versecafe Thank you. I think the usecase is a bit different here though. The user should be allowed to access the page but should not see some specific parts of the page. So a redirect wouldnt work because the user would be redirected to another page. Can null get safely returned here instead? If I understand the docs correctly, this pattern is not considered as safe?

[mluksch]

I think I just might have misunderstood the docs here. Conditional rendering in a layout RSC is not recommended, if the layout returns null. But in a page-RSC or one of its children-RSCs it is probably fine.

[versecafe]

@mluksch If you just want a component then conditional rendering on the RSC side should be safe just double check you don't send anything sensitive down to the client

[decovicdev]

@mluksch your solution is fine. users who don't have permission won't get the children. this happens on the server.