Getting the Logged-in Customer ID in Shopify Remix Customer UI Extension App

Shopify Apps
1

I am working on a Shopify Remix app with a Customer UI extension and need to retrieve the currently logged-in customer ID. How to get the customer id?

1 Like
2

Hi @greeshma

In a Remix app, you can access the customer ID through Shopify’s authenticated context since the extension runs in a logged-in customer’s session. Use the @shopify/shopify-api or Remix’s loader function to fetch it—inside your loader,call shopify.authenticated.customer() to get the customer object, which includes the id. It might look like this: export async function loader({ context }) { const customer = await context.shopify.authenticated.customer(); return json({ customerId: customer.id }); }. Make sure your app’s scopes include read_customers in the shopify.app.toml file to access this data. Test it in your dev environment to ensure it pulls the right ID

1 Like
3

@Promer Hi,

I tried your suggestion, but found a CORS policy error. To resolve this, I added the following headers to the response:

headers: {
“Access-Control-Allow-Origin”: “*”
}

However, the issue persists. The error message states:

“Access to fetch at ‘https://inquiry-spyware-meetings-vote.trycloudflare.com/api/getwishlist’ from origin ‘https://extensions.shopifycdn.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP OK status.”

Below is my current code:

import { json } from “@remix-run/node”;

export async function loader({ context }) {
const customer = await context.shopify.authenticated.customer();

return json(
{ customerId: customer.id },
{
headers: {
“Access-Control-Allow-Origin”: “*”
},
}
);
}

Could you please help me resolve this issue? Your assistance would be greatly appreciated

4

@Promer

I found a solution for retrieving the customer ID in a Shopify Customer Account UI Extension app.

To get the authenticated customer’s ID, add the following code in the JavaScript file located in the src folder:

const customerId = api.authenticatedAccount?.customer?.current?.id;

  • api.authenticatedAccount provides authentication details of the currently logged-in account.
  • .customer accesses the customer-related information.
  • .current refers to the authenticated customer.
  • .id retrieves the unique identifier of the customer.
2 Likes
5

@greeshma

Wow, thanks for sharing me this solution, I’ll note it. Thanks for letting me know!

1 Like