#Is passing authorization state via props or context from server to client components(not route)safe?

4 messages · Page 1 of 1 (latest)

unreal widget
#

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,

  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.
hoary acornBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

unreal widget
#

Is passing authorization state via props or context from server to client components(not route)safe?

kind oracle