Get customer access token in theme app extension

Extensions
1

Background

I created an app in Partner dashboard, let’s say the app name is “ExampleApp101”.
I have setup the remix app backend, theme app extension and other extensions in the app.

I am going to build a download button in theme app extension(to enhance the default online store, not going to build a fully custom storefront). The b2b logined customers will click to download a generated excel file with some products information( title, price, etc.).

I find the storefront API fits my need as it can query products based on the buyer identifier context.

My question

In a theme app extension, how can I get the buyer identifier’s customerAccessToken so that I can send a request to my app backend to call contextual storefront api ?

These are what I have known and tried

  1. The document says that the customerAccessToken can be retrieved from the Customer Accounts API.

  2. I tried to follow the Authentication process in the customer account api document.

  • In the first step, I built the authorization url and open it, but an offical error page shows with “The client credentials provided are invalid or missing.”
    The client id I used is the client id of my app in partner dashboard. Is the client_id required in this scenario different from the app client id in the partner dashboard ?

    An example url:

    https://shopify.com/authentication/60664053859/oauth/authorize?scope=openid+email+customer-account-api%3Afull&client_id=278bc8e13baebe6ce77f59b7e63bcb1a&response_type=code&redirect_uri=https%3A%2F%2Fantigua-domestic-lindsay-prison.trycloudflare.com%2Fauth%2Fcallback&state=test_state_1

  • I check the default login function provided in the shopify store(new customer account login form page), I found it is using the same authorization url specification, but I found the client_id param value it uses is a little bit different from mine. It contains hyphen characters. for example:

    • the client id I used is : 278bc8e13baebe6ce77f59b7e63bcb1a
    • the client id used by the official built-in login function is : a48e655-6b0a-401c-8990-871c9384a790

  1. Meanwhile, I found the document mentions Headless about using customer account api, it seems there is another “Client ID” in Headless.

    But I am confused about the concepts / steps in the document:

    • It asked me to go to the merchant’s shopify admin to do some setup, why not the partner dashboard of my app?
    • Is the credential(client id and client secret) of the app in partner dashboard not same as the one in Headless? If they are different, is it possible to use the customerAccessToken that retrieved from Headless to contextualize storefront API calls in my “ExampleApp101” app backend?

I am in a mess, and feel that the potential solution seems complicated.
Thanks in advance to anyone who tries to help me.