# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nghiaxchis.gitbook.io/ciseco-hydrogen-shopifys-headless-theme/ciseco-with-development-store/step-3.-setup-for-using-customer-account-api-account-route.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.