Querying Collection Products Permission Issue

[nvhoang55]

Hi,

Lately, I've encountered an issue in my Storefront app where querying products for a collection is no longer working as expected (everything was functioning normally before 12/14). For instance, when I run the following query:

collection(slug: "test-collection", channel: "default-channel") {
	name
	description
	seoDescription
	seoTitle
	products(first: 100) {
		edges {
			node {
				...ProductListItem
			}
		}
	}
}

I receive the following error:

 ⨯ src/lib/graphql.ts (58:135) @ executeGraphQL
 ⨯ GraphQLError: To access this path, you need one of the following permissions: MANAGE_PRODUCTS
    at executeGraphQL (./src/lib/graphql.ts:59:68)
    at async BestSellingProductCardSection (_homepage-components/BestSellingProductCardSection.tsx:27:71)
digest: "1638662415"

Previously, I used an access token obtained from https://cloud.saleor.io/tokens, and all queries and mutations were functioning correctly until this error occurred suddenly.

Issue Reproduction Steps:

Recreating the issue is possible by utilizing Saleor GraphQL playground with the Authorization header (previously, querying collection products worked fine with a token from https://cloud.saleor.io/tokens).

{
  "Authorization": "Bearer access_token_obtained_from_https://cloud.saleor.io/tokens"
}

Steps I've Taken:

❌ I attempted to create a new token from https://cloud.saleor.io/tokens, but the issue persists.
🙅‍♂️ I obtained an access token for my admin account (which has all permissions granted through the Dashboard settings) and replaced the token from https://cloud.saleor.io/tokens at env.SALEOR_API_ACCESS_TOKEN. I added it to the executeGraphQL query header, and this resolved the issue.

export async function executeGraphQL<Result, Variables>(
...
const response = await fetch(process.env.NEXT_PUBLIC_SALEOR_API_URL, {
	method: "POST",
	headers: {
		"Content-Type": "application/json",
		Authorization: `Bearer ${process.env.SALEOR_API_ACCESS_TOKEN}`,
		...headers,
	},
	body: JSON.stringify({
		query: operation.toString(),
		...(variables && { variables }),
	}),
	cache: cache,
	next: { revalidate },
});
...

However, since this token has an expiration, I'm curious if there's a token type suitable for my Saleor Storefront app (NextJS) that ensures all queries have the necessary permissions without expiration.

[nvhoang55]

Issue Updated

Upon refreshing the page (without making any code changes), the problem appears to have been resolved. (I'm still using the token from https://cloud.saleor.io/tokens though.)

[timuric]

@nvhoang55 you are using user tokens instead of application token. You will find application tokens in your Saleor dashboard (not cloud console), go to Configuration > Webhook and events > Create app > Assign permission

[nvhoang55]

Thanks for the tip, @timuric! Got my application token from the Saleor dashboard following your guidance and it works now. 👍