# Lesson 8.2 - Connect the storefront

Configure Content API permissions, create a PAT for draft content, and add the environment variables that connect the Next.js starter to your Hygraph project.

In this lesson, you will configure Content API access in Hygraph and add two environment variables to the starter. By the end, the storefront is running locally and displaying published content.

## Two access modes

Before configuring anything, it helps to understand why there are two separate configurations.

Hygraph exposes a single Content API endpoint. The starter uses two different ways to access content through that endpoint:

- **The Content API** serves the storefront for public visitors. It only returns content in the `PUBLISHED` stage. No authentication is required.
- **A Permanent Auth Token (PAT)** grants the frontend access to `DRAFT` content. It is used only for the preview URL configured in lesson 8.3. 

## Configure Content API permissions

The Public Content API needs read permissions initialized before unauthenticated requests can return content.

1. Navigate to **Project settings > Access > Content API**.
2. In the **Content Permissions** box, click **Initialize defaults**.

    The content permissions box now looks like this:

    ![Content permissions initialized](https://hygraph.com/images/docs/getting-started/public-content-api-permissions.png)

3. Navigate to **Project settings > Access > Endpoints**. Copy the **High Performance Content API** endpoint URL from this screen. You will need it while [adding environment variables](#add-environment-variables).

**Content API permissions:**
For a full reference on public API permissions, see [Public API permissions](https://hygraph.com/docs/api-reference/basics/authorization#public-api-permissions).

## Create a PAT for draft content

1. Navigate to **Project settings > Access > Permanent Auth Tokens**.
2. Click **+ Add token**.
3. Enter a name and optional description, select **DRAFT** as the default stage for content delivery, and click **Add & configure permissions**.
4. On the token details screen, copy the token value. You will need it while [adding environment variables](#add-environment-variables).

**PAT documentation:**
For a full reference on Permanent Auth Tokens, see [Authorization](https://hygraph.com/docs/api-reference/basics/authorization).

## Add environment variables

Copy the `.env.sample` file and rename it to `.env.local`:

```bash
cp .env.sample .env.local
```

Open `.env.local` and add the two values collected above:

```bash
HYGRAPH_ENDPOINT=YOUR_CONTENT_API_ENDPOINT_HERE
HYGRAPH_DEV_AUTH_TOKEN=YOUR_DRAFT_TOKEN_HERE
HYGRAPH_PREVIEW_SECRET=
```

Leave `HYGRAPH_PREVIEW_SECRET` empty for now. You will configure it in the next lesson.

## Run the storefront

Start the local development server:

```bash
npm run dev
```

Open `http://localhost:3000` in your browser. The storefront should display your published content.

![Starter homepage](https://hygraph.com/images/docs/getting-started/starter-homepage.png)

![Product page](https://hygraph.com/images/docs/getting-started/product-page.png)

**Storefront appears blank?:**
The Content API only returns content in the `PUBLISHED` stage. If the storefront is blank, open the content editor and verify that all content entries created in lesson 6.1 are published.

**About the starter:**
The storefront renders your landing pages, product pages, navigation, and review data using the same GraphQL queries practiced in lesson 7.1. The `utils/` directory in the starter contains the query functions. Spend some time exploring the code in your editor to understand how the Hygraph content maps to the frontend components.

## What's next

[Lesson 8.3 - Configure a preview URL](https://hygraph.com/docs/getting-started/tutorial/tutorial-preview-url)

Or, go to the [Tutorial overview](https://hygraph.com/docs/getting-started/tutorial/tutorial-overview) for the full lesson list.