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

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 (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 has the details.

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:

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