New:Socket for Asana Is Now Available.Learn more
Get Started

wp-astrojs-integration

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

wp-astrojs-integration

Fast and better WordPress integration for Astro.js with live loaders, client API, and Gutenberg block support

latest
Source
npmnpm
Version
0.5.1
Version published
Weekly downloads
25
-24.24%
Maintainers
1
Weekly downloads
 
Created
Source

WordPress Astro.js Integration

Astro-first integration for WordPress with content loaders, server actions, auth bridge helpers, and rendering components.

This package is built against fluent-wp-client ^2.1.0. It supports Astro ^6.0.0.

Install

npm install wp-astrojs-integration

Feature overview

FeatureWhat you get in AstroMain API
Live content collectionsRequest-time WordPress data for SSR routesdefineLiveCollection + wordPress*Loader
Static content collectionsBuild-time WordPress snapshots for SSGdefineCollection + wordPress*StaticLoader
Server actionsTyped create/update/delete actions for posts, pages, users, and abilitiescreate*Action factories
Auth bridgeLogin/session helpers for Astro server actions and middlewarecreateWordPressAuthBridge
Rendering componentsGutenberg-friendly HTML and media rendering in AstroWPContent, WPImage

Available entities

EntitySchemaLive loaderStatic loaderNotes
PostspostSchemawordPressPostLoaderwordPressPostStaticLoader
PagespageSchemawordPressPageLoaderwordPressPageStaticLoader
MediamediaSchemawordPressMediaLoaderwordPressMediaStaticLoader
CategoriescategorySchemawordPressCategoryLoaderwordPressCategoryStaticLoader
TagscategorySchemawordPressTagLoaderwordPressTagStaticLoader
Custom taxonomiescategorySchemawordPressTermLoaderwordPressTermStaticLoaderPass custom REST resource
Custom Post TypescontentWordPressSchema (extend)wordPressContentLoaderwordPressContentStaticLoaderPass custom REST resource
UsersWordPressAuthorwordPressUserLoaderwordPressUserStaticLoader

Quick start

1) Live collection (SSR)

// src/live.config.ts
import { defineLiveCollection } from 'astro:content';
import { WordPressClient, postSchema, wordPressPostLoader } from 'wp-astrojs-integration';

const wp = new WordPressClient({
  baseUrl: import.meta.env.PUBLIC_WORDPRESS_BASE_URL,
});

const posts = defineLiveCollection({
  loader: wordPressPostLoader(wp),
  schema: postSchema,
});

export const collections = { posts };

2) Static collection (SSG)

// src/content.config.ts
import { defineCollection } from 'astro:content';
import { WordPressClient, postSchema, wordPressPostStaticLoader } from 'wp-astrojs-integration';

const wp = new WordPressClient({
  baseUrl: import.meta.env.PUBLIC_WORDPRESS_BASE_URL,
});

const posts = defineCollection({
  loader: wordPressPostStaticLoader(wp),
  schema: postSchema,
});

export const collections = { posts };

3) Render WordPress content in Astro pages

---
import { getLiveEntry } from 'astro:content';
import WPContent from 'wp-astrojs-integration/components/WPContent.astro';
import WPImage from 'wp-astrojs-integration/components/WPImage.astro';

const { slug } = Astro.params;
const { entry: post } = await getLiveEntry('posts', { slug });
const featuredMedia = post.data._embedded?.['wp:featuredmedia']?.[0];
---

<article>
  {featuredMedia && <WPImage media={featuredMedia} loading="eager" />}
  <h1 set:html={post.data.title.rendered} />
  <WPContent content={post.data.content.rendered} baseUrl={import.meta.env.PUBLIC_WORDPRESS_BASE_URL} />
</article>

Astro actions

import {
  WordPressClient,
  createCreatePostAction,
  createDeletePostAction,
  createUpdatePostAction,
  createCreateUserAction,
  createDeleteUserAction,
  createUpdateUserAction,
} from 'wp-astrojs-integration';

const wp = new WordPressClient({
  baseUrl: import.meta.env.WP_URL,
  auth: {
    username: import.meta.env.WP_USERNAME,
    password: import.meta.env.WP_APP_PASSWORD,
  },
});

export const server = {
  createPost: createCreatePostAction(wp),
  updatePost: createUpdatePostAction(wp),
  deletePost: createDeletePostAction(wp),
  createUser: createCreateUserAction(wp),
  updateUser: createUpdateUserAction(wp),
  deleteUser: createDeleteUserAction(wp),
};

Action factories accept an optional responseSchema that follows the Standard Schema spec (for example Zod schemas).

Auth bridge

The auth bridge is the central client-first request-auth layer for Astro middleware and actions. Helpers like resolveUser() and isAuthenticated() only reflect end-user request auth. getClient() and getClientConfig() can opt into bridge-level static credentials with { allowStaticAuthFallback: true } when you explicitly want a service-client fallback.

import { defineMiddleware } from 'astro:middleware';
import {
  createCreatePostAction,
  createUpdatePostAction,
  createDeletePostAction,
  createWordPressAuthBridge,
} from 'wp-astrojs-integration';

export const wordPressAuthBridge = createWordPressAuthBridge({
  baseUrl: import.meta.env.WP_URL,
  cookieName: 'wp_user_session',
});

// Middleware: get the authenticated client for this request.
export const onRequest = defineMiddleware(async (context, next) => {
  const wp = await wordPressAuthBridge.getClient(context);

  if (!wp) {
    return Response.redirect(new URL('/login', context.url), 302);
  }

  const user = await wp.getCurrentUser();
  context.locals.user = user;

  return next();
});

// Actions: reuse the same request-scoped client resolver.
export const server = {
  login: wordPressAuthBridge.loginAction,
  createPost: createCreatePostAction(wordPressAuthBridge.getClient),
  updatePost: createUpdatePostAction(wordPressAuthBridge.getClient),
  deletePost: createDeletePostAction(wordPressAuthBridge.getClient),
};

You can also create one static client directly when you do not need request-scoped auth:

import { WordPressClient } from 'wp-astrojs-integration';

const wp = new WordPressClient({
  baseUrl: import.meta.env.WP_URL,
  auth: {
    username: import.meta.env.WP_USERNAME,
    password: import.meta.env.WP_APP_PASSWORD,
  },
});

export const server = {
  createPost: createCreatePostAction(wp),
};

Auth utility exports

The package re-exports auth helpers from fluent-wp-client, including:

  • createAuthResolver
  • jwtAuthTokenResponseSchema
  • jwtAuthErrorResponseSchema
  • jwtAuthValidationResponseSchema

Use these when building custom login/session flows so you can share the same runtime validation and context-auth patterns as the built-in bridge.

Term actions (categories, tags, custom taxonomies)

import {
  WordPressClient,
  createCreateTermAction,
  createUpdateTermAction,
  createDeleteTermAction,
} from 'wp-astrojs-integration';

const wp = new WordPressClient({
  baseUrl: import.meta.env.WP_URL,
  auth: {
    username: import.meta.env.WP_USERNAME,
    password: import.meta.env.WP_APP_PASSWORD,
  },
});

export const server = {
  createCategory: createCreateTermAction(wp, { resource: 'categories' }),
  updateTag: createUpdateTermAction(wp, { resource: 'tags' }),
  deleteGenre: createDeleteTermAction(wp, { resource: 'genres' }),
};

Extending schemas

import { WordPressClient, postSchema, wordPressPostLoader } from 'wp-astrojs-integration';
import { z } from 'astro/zod';

const wp = new WordPressClient({
  baseUrl: import.meta.env.PUBLIC_WORDPRESS_BASE_URL,
});

const customPostSchema = postSchema.extend({
  acf: z.object({
    video_url: z.string().optional(),
    featured_color: z.string().optional(),
  }).optional(),
});

const posts = defineLiveCollection({
  loader: wordPressPostLoader(wp),
  schema: customPostSchema,
});

Live vs static loaders

FeatureLive loadersStatic loaders
FreshnessRequest-timeBuild-time
Best forSSR and frequently changing contentSSG and stable content
Astro APIdefineLiveCollectiondefineCollection
Content APIsgetLiveEntry, getLiveCollectiongetEntry, getCollection
Post/page payload shapePlain serializable objectsPlain serializable objects

Development and testing

npm run wp:start
npm test                    # Run all test projects
npm run test:integration    # Integration project (actions/loaders/auth)
npm run test:build          # Static build project
npm run wp:stop

Other useful commands:

npm run test:watch
npm run wp:clean
npm run wp:status
npm run build

Local integration test environment:

  • .wp-env.json defines the local WordPress setup.
  • tests/wp-env/ contains mu-plugins and seeded content.
  • tests/setup/global-setup.ts provisions app password, JWT, cookie+nonce fixtures, and boots a real Astro dev server for the integration Vitest project.
  • tests/setup/env-loader.ts loads .test-env.json values for both integration and static-build projects.
  • tests/fixtures/astro-site/ is the shared Astro fixture used by integration action tests (astro dev + /_actions/*), live collection runtime tests (src/live.config.ts + getLiveCollection() / getLiveEntry()), and the build integration test (astro build with ASTRO_TEST_MODE=build).
  • Action integration suites call fixture /_actions/* endpoints via HTTP; tests do not execute package action helpers directly in Vitest workers.
  • tests/integration/ contains Astro-facing integration tests for loaders (including live runtime and static build coverage), actions, auth bridge behavior, meta, ACF, and abilities.

Docs

  • Reading content: docs/reading-content.mdx
  • Testing guide: docs/testing.mdx
  • Auth bridge: docs/auth-action-bridge.mdx
  • Action overview: docs/actions/index.mdx
  • Post actions: docs/actions/posts.mdx
  • Term actions: docs/actions/terms.mdx
  • User actions: docs/actions/users.mdx
  • Ability actions: docs/actions/abilities.mdx

License

MIT

Keywords

astro

FAQs

Package last updated on 23 Mar 2026

Related posts