How to keep secret token secret and not expose those in the FE JS code

[bitforcesrl]

Hi all,

I'm working with nuxt + apollo + shopify graphQl

Shopify return SEO product details only using the Admin api which is not public and requires a secret token.
This should be fine since i need SEO details only on the server side.
To use both public and private shopify api's i've created two connectors one public and one private (no problem on doing this)

the admin connector looks like this one

ssr = true, ----> this means also for BE not exclusively for BE so the token is still public
httpLinkOptions: {
          // credentials: 'same-origin'
          headers: {
            "Content-Type": "application/json",
            "X-Shopify-Access-Token": process.env.SHOPIFY_ADMIN_API_TOKEN
          }
        },

as you can see i need a token and this will be set in the node ENV.
on localhost i use the module ["@nuxtjs/dotenv", { only: ["PUBLIC_DOT_ENV"] }], and with the flag only i can prevent that the secret token will be exposed to the app in the env prop

The problem is that apollo / nuxt, to being able to create the admin connector (fetchable also at runtime) are building the app hardcoding the secret token. this means that is not secure!
I'd like to find a way to being able to do query in the components like this (or via smart query)

let client = context.app.apolloProvider.adminClient;
client.doQuery...

but those query should run only on the server side and the code for that connector should not reach the front end code

I've found a solution now but is not good: I'm passing the data that comes from a secure endpoint in the generate phase. But i'm not able to run custom query on single components. I should pass everything in the generate payload prop which is impossible.

Any ideas?

Thanks a lot

routes: function() {
      const uri =
        "https://xxx.myshopify.com/admin/api/2020-04/graphql.json";
      const query = `query	{
        products(first:100)	{
            edges	{
                node	{
                    handle
                    seo {
                      title
                      description
                    }
                }
            }
        }
      }`;

      return fetch(uri, {
        method: "POST",
        headers: {
          "Content-Type": "application/graphql",
          "X-Shopify-Access-Token": "token"
        },
        body: query
      })
        .then(r => r.json())
        .then(response =>
          response.data.products.edges.map(product => {
            return {
              route: `/products/${product.node.handle}`,
              payload: { seo: product.node.seo }
            };
          })
        )
        .catch(e => console.log(e));