> For the complete documentation index, see [llms.txt](https://nghiaxchis.gitbook.io/ciseco-hydrogen-shopifys-headless-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nghiaxchis.gitbook.io/ciseco-hydrogen-shopifys-headless-theme/ciseco-with-development-store/step-3.-setup-for-using-customer-account-api-account-route.md).

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

### Requirements  <a href="#requirements" id="requirements"></a>

* You have **Apps and channels** permissions on the Shopify store that you're working with.
* You have installed the [Headless](https://apps.shopify.com/headless) or [Hydrogen](https://apps.shopify.com/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)](/ciseco-hydrogen-shopifys-headless-theme/getting-started-1/step-4.-setup-for-using-customer-account-api-account-route.md)

### Set up a public domain for local development

{% hint style="info" %}
**Note**

Shopify doesn't support the use of `localhost` or any `http` based URL due to security [concerns](https://datatracker.ietf.org/doc/html/rfc8252#section-8.3). For development purposes, we recommend using a tunnelling service, such as [ngrok](https://ngrok.com/).
{% endhint %}

Customer Account API authentication doesn't support the use of `localhost` due to [security concerns](https://datatracker.ietf.org/doc/html/rfc8252#section-8.3). For development purposes, use a tunnelling service, such as [ngrok](https://ngrok.com/).

In this step, you'll learn how to use [ngrok](https://ngrok.com/) to set up a public HTTPS domain that connects to your local Hydrogen application.

#### 1 - Set up ngrok <a href="#set-up-ngrok" id="set-up-ngrok"></a>

Install and run ngrok in your development environment.

1. Set up an [ngrok](https://ngrok.com/) account.
2. In your ngrok settings, [add a static domain](https://ngrok.com/blog-post/free-static-domains-ngrok-users).
3. Install the [ngrok CLI](https://ngrok.com/download).
4. In a terminal, start ngrok using the following command:

{% tabs %}
{% tab title="Terminal" %}

```javascript
ngrok http --domain= 3000
```

{% endtab %}
{% endtabs %}

#### 2 - Add your ngrok domain to the content security policy  <a href="#add-your-ngrok-domain-to-the-content-security-policy" id="add-your-ngrok-domain-to-the-content-security-policy"></a>

Modify your Hydrogen app’s [content security policy](https://shopify.dev/docs/custom-storefronts/hydrogen/content-security-policy) to allow the development domain as a `connect-src`. Your content security policy is typically located in `/app/entry.server.tsx`.

{% tabs %}
{% tab title="/app/entry.server.tsx" %}

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

{% endtab %}
{% endtabs %}

#### 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