Introducing the Webhook Portal: Let Your Customers Manage Their Own Endpoints

The Problem: Webhook Management Shouldn't Be Your Problem

If you send webhooks to your customers, you have built some version of this: a settings page where users enter a URL, maybe pick which events they want, and hope for the best. Then the support tickets start. "My endpoint isn't receiving events." "Can you resend last Tuesday's payload?" "How do I rotate my signing secret?"

Every SaaS team that sends webhooks ends up building the same internal tooling -- endpoint CRUD, subscription toggles, delivery logs, retry buttons. It is undifferentiated work that takes weeks to build well and months to maintain.

Today we are launching the Hookbase Portal, a complete webhook management UI that you can embed directly in your application or link to as a hosted page. Your customers get self-service control. You get out of the support loop.

Two Ways to Embed

Option 1: React Components (npm)

Install the @hookbase/portal package and drop components into your existing React app:

npm install @hookbase/portal

import { HookbasePortal, EndpointList, EndpointForm, MessageLog } from '@hookbase/portal';
import '@hookbase/portal/styles.css';

function WebhookSettings({ portalToken }) {
  return (
    <HookbasePortal token={portalToken}>
      <EndpointForm />
      <EndpointList />
      <MessageLog refreshInterval={30000} />
    </HookbasePortal>
  );
}

The package includes six pre-built components -- EndpointList, EndpointForm, EndpointSecretRotation, EventTypeList, SubscriptionManager, and MessageLog -- plus data hooks for building completely custom UIs.

Option 2: Hosted Page

Generate a magic link from your backend and redirect your customer or embed it in an iframe:

<iframe
  src="https://www.hookbase.app/portal/whpt_abc123..."
  width="100%"
  height="600"
  style="border: none; border-radius: 8px;"
></iframe>

Magic links are short-lived session tokens (default: 60 minutes) that you generate server-side. No frontend SDK required.

What Your Customers Can Do

The portal is not just an endpoint form. It is a complete webhook management experience:

Manage endpoints -- Create, edit, disable, and delete webhook URLs. Each endpoint gets a unique signing secret on creation, displayed once in a modal with a copy button.

Subscribe to event types -- If you have defined event types in Hookbase, your customers can pick exactly which events each endpoint receives. The subscription manager groups event types by category with toggle switches.

View delivery history -- A paginated message log shows every delivery attempt with status badges, timestamps, attempt counts, and the destination hostname. Auto-refresh keeps the view current.

Send test events -- One click fires a test webhook and shows the result inline: HTTP status code, response time, and any error messages. No more "can you send me a test payload?" support tickets.

Replay failed messages -- Retry individual deliveries or bulk-replay all failures for an endpoint. Replayed messages are queued as new deliveries with full retry logic.

Verify endpoint ownership -- A challenge/response flow confirms the customer actually controls the URL. Hookbase sends a POST with a random challenge token, and the endpoint must echo it back.

Rotate signing secrets -- Generate a new secret with a 24-hour grace period where both old and new secrets are valid, giving customers time to update their verification code.

Authentication: Portal Tokens

Portal access is controlled by tokens with the whpt_ prefix. There are two types:

Long-lived tokens (1-365 days) -- Created via the token management API. Good for the npm package where your backend stores and serves the token.

Magic link tokens (1-1440 minutes) -- Short-lived session tokens that come with a ready-made URL. Good for iframe embeds and email links.

Both support scoped permissions. Set scopes: ['read'] for a read-only view, or ['read', 'write'] for full access.

// Generate a magic link from your backend
const response = await fetch(
  \`https://api.hookbase.app/api/organizations/\${ORG_ID}/portal/webhook-applications/\${appId}/magic-link\`,
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: \`Bearer \${API_KEY}\`,
    },
    body: JSON.stringify({
      expiresInMinutes: 60,
      scopes: ['read', 'write'],
    }),
  }
);

const { data } = await response.json();
// data.url  -> "https://www.hookbase.app/portal/whpt_abc123..."
// data.token -> "whpt_abc123..."

Theming and Customization

The portal ships with a clean default design and full customization support:

Theme prop -- Pass colors, border radius, and dark mode preference directly to the provider:

<HookbasePortal
  token={token}
  theme={{
    colors: {
      primary: '#6366f1',
      success: '#22c55e',
    },
    borderRadius: '0.75rem',
    darkMode: 'auto', // follows system preference
  }}
>

CSS variables -- All components use --hkb-* custom properties. Override them in your stylesheet for pixel-perfect control.

Headless mode -- Skip the default components entirely and use the data hooks (useEndpoints, useMessages, useTestEndpoint, etc.) to build a completely custom UI. All data fetching, caching, and mutations work without any of the built-in components.

Event Type Schemas and Documentation

If you define event types with JSON schemas and example payloads, the portal displays them to your customers. Each event type can include:

• A machine name (order.created) and human-readable display name ("Order Created")
• A description explaining when the event fires
• A JSON schema for payload validation
• An example payload that customers can expand inline
• A link to your external documentation

This means your customers can browse available events, see exactly what the payload looks like, and subscribe to the ones they need -- all without leaving the portal.

Security

Every portal API call is scoped to the application associated with the token. Customers cannot access other applications, other organizations, or any admin-level resources. Tokens are SHA-256 hashed before storage and checked on every request.

Endpoint URLs are validated for SSRF protection: private IP ranges, cloud metadata endpoints, and non-HTTPS URLs (except localhost for development) are rejected.

Secret rotation includes a 24-hour dual-secret grace period, so customers can update their verification code without missing any deliveries during the transition.

Getting Started

1. Create a webhook application in Hookbase for each of your customers
2. Generate a portal token (long-lived or magic link) from your backend
3. Embed the portal using the npm package or hosted page

The full documentation covers everything: component props, hook return types, CSS variables, and the complete portal REST API.

Check out the Portal documentation to get started, or install the package and have it running in five minutes:

npm install @hookbase/portal