https://github.com/formfcw/directus-extension-tokenized-preview

An endpoint that adds an active auth token to your preview URL
https://github.com/formfcw/directus-extension-tokenized-preview

directus directus-extension directus-extension-endpoint preview token

Last synced: about 2 months ago
JSON representation

An endpoint that adds an active auth token to your preview URL

• Host: GitHub
• URL: https://github.com/formfcw/directus-extension-tokenized-preview
• Owner: formfcw
• License: gpl-3.0
• Created: 2023-10-20T11:26:49.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-08T08:39:41.000Z (10 months ago)
• Last Synced: 2024-04-09T07:34:43.882Z (9 months ago)
• Topics: directus, directus-extension, directus-extension-endpoint, preview, token
• Language: TypeScript
• Homepage:
• Size: 172 KB
• Stars: 7
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-directus - Tokenized Preview - An endpoint that adds an active auth token to your preview URL. (Extensions / Community)

README

        
# Tokenized Preview Endpoint for Directus

An endpoint that adds an active auth token to your preview URL. The auth token, which has a limited TTL, allows you to to preview content that is not publicly available through the API.

## Installation

-   [Official Guide](https://docs.directus.io/extensions/installing-extensions.html)

-   [NPM Package](https://www.npmjs.com/package/directus-extension-tokenized-preview)

## Usage

Prefix the `Preview URL` of your data model collection with `/preview/`, like:

`/preview/http://localhost:3000/posts/{{slug}}?preview=true`

![](https://raw.githubusercontent.com/formfcw/directus-extension-tokenized-preview/main/docs/preview-url.png)

Or if you set `TOKENIZED_PREVIEW_BASE_URL` (see below), you can achieve the same result without adding the base URL, like:

`/preview/posts/{{slug}}?preview=true`

![](https://raw.githubusercontent.com/formfcw/directus-extension-tokenized-preview/main/docs/preview-relative-url.png)

### Result:

```

http://localhost:3000/posts/?preview=true&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjQ2ZjA1OGFjLTkyY2QtNDIzYi1hODgzLWU2OTQ5YTMxMjM2YiIsInJvbGUiOiJlMjgyOGMwYy05NzdkLTQzMzYtYjAyMy1hZTJhNGY5OTE1ZTIiLCJhcHBfYWNjZXNzIjoxLCJhZG1pbl9hY2Nlc3MiOjEsImlhdCI6MTY5Nzc5OTQ1MSwiZXhwIjoxNjk3ODAwMzUxLCJpc3MiOiJkaXJlY3R1cyJ9.qUme3vwuDTa9YNc9Ivewjvj2hThPT7t-6K7e_KO6QOU

```

## Config

You can configure the endpoint via ENV vars:

```sh

# The route of the endpoint. If it is `preview`, it will be `http://localhost:8055/preview`

# Default: preview

TOKENIZED_PREVIEW_ENDPOINT=preview

```

```sh

# The key of the appended auth token. If it is `token`, it will append something like `?token=10932874539847`

# Default: token

TOKENIZED_PREVIEW_TOKEN_KEY=token

```

```sh

# The base URL of your project (e.g. website).

TOKENIZED_PREVIEW_BASE_URL=

# If `TOKENIZED_PREVIEW_BASE_URL` is not set, it will use `PROJECT_URL`.

PROJECT_URL=

# If `PROJECT_URL` is not set, it will use `PUBLIC_URL`. If `PUBLIC_URL` is not set, it will use `http://localhost:8055`.

PUBLIC_URL=

```

> **Note:** You should add `PUBLIC_URL` to your ENV vars!

> **Note,** that for the preview feature to work, you should set the `CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_SRC` ENV var for the directus base URL (`PUBLIC_URL`) as well as for the preview base URL.