Unable to get CMS integration auth tokens to work

Issues
1

hi @yang We have been wrestling with the issue of the authorization token being shown in the build code for over a week now. We are now demoing the GraphCMS component, and on a production build the token is shown and available in the front end code. We also saw this behavior with the Contentful integration. Are we missing something? Why are these being exposed on a statically built page?

2022-06-09_08-02-45.jpg
2022-06-09_08-02-45.jpg2164×526 578 KB

Screen Shot 2022-06-09 at 8.06.42 AM.png
Screen Shot 2022-06-09 at 8.06.42 AM.png710×636 47.3 KB

2

Hi @scientific_porpoise, thanks for reporting - bat signal to @samuel!

3

Thanks @yang and @samuel Is this not expected behavior?

4

Hi @scientific_porpoise, apologies - I misread that a little bit too quickly! This is actually the intended behavior. The auth tokens should only be for read only data.

5

(They are ultimately exposed as part of the statically built client side code because the data fetching is designed to be isomorphic, meaning that you have the option to dynamically trigger refetches of different data from the client.)

6

Ok so is this just something we have to accept with Plasmic? Is this normal to expose auth tokens like this? Even read only ones? Sorry, we have never worked with React before :slightly_smiling_face:

7

Yes, especially if you ever need any client side dynamism. If you want to limit the type of read operations that can be done prevent sharing the public auth token, you can do so by proxying to your own API endpoints that in turn perform the upstream reads, or you can perform data fetching yourself in getstaticprops (which side steps the component-based data fetching altogether).

8

Yes, we are starting to use getstaticprops in order to overcome this, but we can’t find any examples of how to use getstaticprops for the build site and also see the data in Studio.

9

Basically we want to see the dynamic data in the Studio, and the statically generated data on the production site

10

CC @multiple_vole !

11

Hi @scientific_porpoise, thank you for reaching out!

Here are some examples of how to load dynamic data using the getStaticProps() function and display it in plasmic:
https://docs.plasmic.app/learn/data-code-components/#static-or-server-rendered-data-fetching

Here are also other examples for implementing data driven pages (e.g. a dynamic blog post page):
https://docs.plasmic.app/learn/dynamic-pages/

12

@multiple_vole Thank you. We will try this!

13

Also, for anyone else wondering about exposing API keys in the frontend, we found this:

14

https://www.shopify.com/partners/blog/storefront-api-learning-kit#:~:text=Given%20that%20the%20Storefront%20API,where%20it%20will%20be%20exposed.

15

It is important to differentiate between the GraphQL Admin API and the GraphQL Storefront API. Given that the Storefront API is intended for customer-facing experiences, it is a public API which is designed to be used client-side. This means the access token used for authentication is not secret and can be used in places where it will be exposed.
The Admin API key and password, however, should never be used client side.