How to register data-fetching components that fetch user-authenticated data?

Developer Support
1

hi all! I’m working on registering some data-fetching components to Plasmic, but some data is specific to a given user.

Right now I’m able to authenticate my user and fetch user-specific data from the plasmic components in my Next.js app by attaching cookies to a react context in the page-level getServerSideProps function and using them in my queries. Do I have access to these same cookies somehow in the Plasmic studio?

2

Hi Bailey,
How do you want to utilize the cookies in the Plasmic studio?
Do you mean to use the cookies in the registered Code Components?

3

I think you can simply register the existing react context, which holds the cookie state, using Plasmic Global Context API.
https://docs.plasmic.app/learn/global-contexts/

You can then access that cookie inside your data-fetching components

4

Also, if the cookie is already set dynamically by the auth module and you simply want to access it in the data-fetching components, then I think the more simple approach would be to simply use the built-in browser API to get the client side cookie.

5

Hi @reasonable_sheep, just expanding on what @zonal_mammal mentioned, especially that third point (thank you @zonal_mammal!)

If you are using cookie or session based authentication, there is usually no explicit token passing you have to do on the client side. Cookies are automatically included by the browser on subsequent requests to the origin that they belong to.

So for instance, you can have a data fetching component that just fetches from /api/friends. The server will check that the cookies are there and return the friends of the currently logged in user. To ensure that the cookies are available on the client, you can just log in normally to your app (this usually happens outside of plasmic). The next time you open your plasmic app-hosted project, that component should be displaying the friends of the user you logged in as. This should work whether your app is running on localhost or in production.

Of course, if your authentication system requires explicit tokens to be passed, you can make those available using react context etc.

Let me know if all that makes sense, happy to dive in deeper on anything!

6

I’ve been manually attaching the cookie to the request because I’m making these requests in usePlasmicQueryData, so (I think?) they aren’t actually coming from the client. My understanding of this function is definitely very fuzzy though.

7

What you are doing is exactly right for server side rendering. Provide the cookie data in a react context, and have your data fetching components forward that (when it’s available, ie when running on the server).

But on the client side, which is how Plasmic Studio renders your components, the browser should already be including the cookies.

I believe in that case, you just need to ensure your data fetching component queries via SWR will only include cookies if they are provided and available in a react context, ie things are running server-side, and not fail if the context isn’t available. Then your data fetching components are isomorphic.

Let me know if that jives with your understanding / situation

8

This was exactly the pointer I needed, thank you!