Access denied for page field. Required access: `unauthenticated_read_content` access scope.

[jonasP80]

Hi everyone, 
I'm trying to write a checkout ui-extension that fetches for a page and renders the page's content on a modal.

Here's the code I'm using for testing.

useEffect( () => {
  const getPages = async () => {

      const response = await query(
        `#graphql
          query PageShow($id: ID!) {
            page(id: $id) {
              id
              title
              handle
            }
          }`,
          {
            variables: {
              "id": "gid://shopify/Page/602767277"
            },
          },
      );
      console.log(response);
  }
  getPages();
}, []);

Here's my scopes on the configuration file.

scopes = "read_content,read_online_store_pages,unauthenticated_read_content"

Here's a screen shot showing the app has access to page objects.

As you can see on my scopes, I already have unauthenticated_read_content, but I'm still getting this error when running the extension.

"Access denied for page field. Required access: `unauthenticated_read_content` access scope."

Here's the error screenshot.

The graphQL query seems to be working fine here.

Has anyone encountered the same thing before?