Setup Customer Account API

Requirements:

• You have Apps and channels permissions on the Shopify store that you're working with.

• You have installed the Headless or Hydrogen sales channel from the Shopify App Store.

Step 1: Enable Customer Account API access

1. To use the Customer Account API, you first need to enable it and get your access credentials.

2. From your Shopify admin, under Sales channels, click Headless or Hydrogen.

3. Select your storefront.

4. Complete one of the following steps:

If you selected Headless, then navigate to Customer Account API settings.

If you selected Hydrogen, then navigate to Storefront settings.

From the Credentials section, copy the client ID (and client secret, if applicable) to use in your requests.

Step 2: Manage permissions

Managing permissions controls what your custom storefront can display from your Shopify store.

1. From the Permissions section, click Edit.

2. Select the permissions for the storefront.

3. Click Save.

Step 3: Enable the new customer account experience

You can specify the following client application settings:

• Callback URL(s): The allowable list of URLs to redirect to after logging in.

• Javascript origin(s): Specifies the origins that are allowed to use a client's OAuth credentials in a JavaScript application. Applies to public client types.

• Logout URL (Optional): The URL to redirect to after logging out.

Step 4: Set up the environment

Configure the necessary Customer Account API settings in the Shopify admin so you can send the initial authentication request to Shopify.

1. In the Shopify admin, open the Hydrogen or Headless sales channel.

2. Click the storefront you're adding the customer account API functionality for.

3. Click Storefront settings.

4. Click Customer Account API to open the API settings.

From here, you can get PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID and PUBLIC_CUSTOMER_ACCOUNT_API_URL then add to your environment.

Step 5: Update the application setup

For the Customer Account API to recognize your domain as a valid authentication host, edit your Customer Account API settings.

Under Application setup, click Edit to edit the endpoints.

Under Callback URI(s), click Add Callback URI, and add your domain, with /account/authorize appended:

https://<your-domain>.app/account/authorize

This is the URI your application will redirect to to continue the OAuth process after a successful customer login.

Under JavaScript origin(s), click Add origin, and then add your ngrok domain.

Under Logout URI, click Add Logout URI, and then add your ngrok domain.

Check out the video guide below: