Step 3. Setup for using Customer Account API (/account route)

Setup for using Customer Account API (/account section)

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.

• NOTE: Setup for using Customer Account API - Step 4. Setup for using Customer Account API (/account route)

Set up a public domain for local development

Note

Shopify doesn't support the use of localhost or any http based URL due to security concerns. For development purposes, we recommend using a tunnelling service, such as ngrok.

Customer Account API authentication doesn't support the use of localhost due to security concerns. For development purposes, use a tunnelling service, such as ngrok.

In this step, you'll learn how to use ngrok to set up a public HTTPS domain that connects to your local Hydrogen application.

1 - Set up ngrok

Install and run ngrok in your development environment.

1. Set up an ngrok account.

2. In your ngrok settings, add a static domain.

3. Install the ngrok CLI.

4. In a terminal, start ngrok using the following command:

Terminal

ngrok http --domain= 3000

2 - Add your ngrok domain to the content security policy

Modify your Hydrogen app’s content security policy to allow the development domain as a connect-src. Your content security policy is typically located in /app/entry.server.tsx.

/app/entry.server.tsx

import {createContentSecurityPolicy} from '@shopify/hydrogen';
createContentSecurityPolicy({
  connectSrc: [
    // (ie. 'wss://<your-ngrok-domain>.app:*')
    'wss://<your-tunneled-host>:*',
  ],
});

3 - Include public domain in Customer Account API settings

1. Go to your Shopify admin => Hydrogen or Headless app/channel => Customer Account API => Application setup

2. Edit Callback URI(s) to include https://<your-ngrok-domain>.app/account/authorize

3. Edit Javascript origin(s) to include your public domain https://<your-ngrok-domain>.app or keep it blank

4. Edit Logout URI to include your public domain https://<your-ngrok-domain>.app or keep it blank