---
title: "Authorization"
description: "Configure the credentials that authorize the Landing Page Editor, and the headers it sends to your own API endpoints."
url: https://docs.topol.io/landing-page-editor/guide/authorization.html
---

# Authorization

**Two options cover authentication: `authorize` identifies your application and user to Topol, and `apiAuthorizationHeader` authenticates the editor's requests against your own API endpoints.** The `userId` inside `authorize` attributes usage and powers collaboration features; restricting what a user can do inside the editor is a separate concern, handled by the [`role`](https://docs.topol.io/landing-page-editor/guide/user-management.html) option.

## `authorize`

The `authorize` object is **required** to initialize the editor. It carries two properties:

-   `apiKey` (`string`, required): your Public API key, restricted to the domains registered with the token.
-   `userId` (`string` | `number`, required): unique identifier for the current active user.

```javascript
const TOPOL_OPTIONS = {
  authorize: {
    apiKey: "your-api-key-here",
    userId: "user-123",
  },
};

const LPE = LandingPageEditor({ config: TOPOL_OPTIONS });
LPE.render("#landing-page-editor");
```

> **WARNING**
>
> Keep the API key secure. Don't commit it to client-side repositories, and consider loading it dynamically from your server or environment variables.

## `apiAuthorizationHeader`

The `apiAuthorizationHeader` option (`string` | `Record<string, string>`, optional) sets the authorization header(s) the editor attaches to requests it makes to your [custom API endpoints](./api.html) (for example `AUTOSAVES`, `CONVERSATIONS`, or `IMAGE_UPLOAD`):

-   A `string` is sent as the `Authorization` header value.
-   An object sends each key/value pair as its own header, which fits an API expecting a custom header name or several headers at once.

The header is added to every editor request except those to Topol's core rendering and authorization API (`api.topol.io`), Giphy, and Vimeo. [Working with API](./api.html#securing-api-endpoints) has the details.

```javascript
const TOPOL_OPTIONS = {
  authorize: {
    apiKey: "your-api-key-here",
    userId: "user-123",
  },
  apiAuthorizationHeader: "Bearer your-jwt-token",
  // or several custom headers:
  // apiAuthorizationHeader: {
  //   "X-Api-Token": "your-token",
  //   "X-Tenant": "acme",
  // },
};
```

**An expired token can be rotated at runtime** without re-initializing the editor:

```javascript
LPE.updateApiAuthorizationHeader("Bearer new-token");
```