whats the correct way to add the privateStorefrontToken to Hydrogen.config ?

[theMoeLafi]

Hello All,

I am trying to avoid rate limiting by adding the private PRIVATE_STOREFRONT_API_TOKEN to my Hydrogen Config.

I have added the storefrontToken which I obtained from the shopify Storefront Api on my shopify Admin. I obtained both the shopify api key and api secret key from there and trying to add both of them as "storefrontToken" and "privateStorefrontToken" in the Hydrogen.coinfig

I added them as follows:

storefrontToken: Oxygen?.env?.PUBLIC_STOREFRONT_API_TOKEN,
 privateStorefrontToken: Oxygen?.env?.PRIVATE_STOREFRONT_API_TOKEN,
 storefrontApiVersion: '2022-07',

in my .env var those variables are stored with the values from my shopify admin. If I have both of these properties in the config I get an Error: Failed to connect to the Storefront API: 403 Forbidden, on page load. if I have only the storefrontToken it works but rate is limited on deployment.

Am i doing something wrong here ? do i need to obtain the privateStorefrontToken from somewhere else other than the Storefront Api configuration page on my Shopify Admin ?

NOTE: I am deploying the app on Vercel, but i get the error even locally.

please help !

[frehner]

The private token is named the "Delegate Access Token". Here are some docs on how to generate that Delete Access Token

https://shopify.dev/apps/auth/oauth/delegate-access-tokens

[theMoeLafi]

apologies if am asking basic questions but am just getting started with Hydrogen. Is the only option to request the Token and update it programmatically ?
am confused about how I can follow the steps in the link and then add it to my hydrogen config in a similar way its done in the demo store, using the "privateStorefrontToken" property in the config file ?

[theMoeLafi]

additionally if This token was obtained, reading the source code of useShopQuery, it automatically looks for the seceret token:

const secretToken = Oxygen?.env?.SHOPIFY_STOREFRONT_API_SECRET_TOKEN;
and then uses this in the request headers internally:

'X-Shopify-Storefront-Access-Token': secretToken ?? storefrontToken,
I could not find a way to bypass this in the docs and add my Delegate Access Token at runtime, so adding it through the env vars seems to be the only way ?

@kcarra

[kcarra]

One thing to note is that privateStorefrontToken: Oxygen.env.PRIVATE_STOREFRONT_API_TOKEN, is generated as an environment variable for you when you create a storefront in hydrogen. So if you are deploying to Oxygen this will just work (Obviously this isn't your case), but was something we were a bit confused on initially

[theMoeLafi]

thank you for the help, it is frustrating that Hydrogen presents itself as something possible to deploy on many platforms but then you are met with all these challenges unless you are using Oxygen.

[JimLynchCodes]

I am also getting 403 error... this shit sucks and doesn't work at all. smh

[ryanleichty]

Yeah, definitely a bit confusing trying to configure everything in Hydrogen to deploy elsewhere