For example, in page.tsx :-

const { isLoggedIn, isAuthorized } = await useAuthorization(params.username);

and passing it down to its children client components via props (for shallow nested components) or via context (for deeply nested components, for example, a comments section) safe?

For the shallow example,

export default async function UserPage({ params }: UserPageProps) {
  const { isLoggedIn, isAuthorized } = await useAuthorization(params.username);
  return (
    <div className="flex-1 w-full flex flex-col gap-12">
      <div className="flex flex-col gap-2 items-start">
        <Bio username={params.username} isAuthorized={isAuthorized}  />
      </div>
    </div>
  );
}

and inside Bio, I use react query to fetch the bio from my database, and conditionally render an Edit button next to it if

isAuthorized === true

I will of course, authenticate the actual Bio edit server action as well, but I was wondering if this method of rendering the edit button is good practice or not. What should I use? HOC's? Server sided "hooks"?

tl;dr :- I want to conditionally render components (not routes) based on auth status, and want to know the best practice for it.