Customer Audit UI

Give your customers visibility into their own audit logs without building a dashboard from scratch.

Why Offer Audit Logs to Customers?

Enterprise customers increasingly expect transparency. A customer-facing audit log helps you:

Win enterprise deals that require audit trail visibility
Reduce support tickets about "who did what"
Build trust through transparency
Meet compliance requirements (SOC 2, GDPR)

Option 1: Embedded Viewer (Recommended)

The fastest way to add audit logs to your app is our embeddable React component. It handles all the UI, filtering, and pagination.

Bash

1npm install @logvault/react

1import { AuditLogViewer } from '@logvault/react';
2
3function CustomerAuditPage({ customerId }) {
4  return (
5    <div className="p-8">
6      <h1>Activity Log</h1>
7      <AuditLogViewer
8        apiKey={process.env.LOGVAULT_PUBLIC_KEY}
9        actorId={customerId}
10        theme="light"
11        pageSize={25}
12      />
13    </div>
14  );
15}

Viewer Props

Prop	Type	Description
`apiKey`	string	Your LogVault public API key
`actorId`	string	Filter events by this actor ID
`theme`	"light" \| "dark"	Color theme (default: "light")
`pageSize`	number	Events per page (default: 25)
`showFilters`	boolean	Show action/date filters (default: true)
`className`	string	Additional CSS classes

Option 2: Build Your Own

If you need full control over the UI, use our API directly. Here's a minimal example:

1import { useState, useEffect } from 'react';
2
3function AuditLog({ customerId }) {
4  const [events, setEvents] = useState([]);
5  const [loading, setLoading] = useState(true);
6
7  useEffect(() => {
8    async function fetchEvents() {
9      const res = await fetch(
10        `/api/audit-events?actor_id=${customerId}`
11      );
12      const data = await res.json();
13      setEvents(data.events);
14      setLoading(false);
15    }
16    fetchEvents();
17  }, [customerId]);
18
19  if (loading) return <div>Loading...</div>;
20
21  return (
22    <table>
23      <thead>
24        <tr>
25          <th>Time</th>
26          <th>Action</th>
27          <th>Details</th>
28        </tr>
29      </thead>
30      <tbody>
31        {events.map(event => (
32          <tr key={event.id}>
33            <td>{new Date(event.timestamp).toLocaleString()}</td>
34            <td>{event.action}</td>
35            <td>{JSON.stringify(event.metadata)}</td>
36          </tr>
37        ))}
38      </tbody>
39    </table>
40  );
41}

Backend Proxy

Never expose your API key to the client. Create a backend endpoint that proxies requests:

JavaScript

1// pages/api/audit-events.js (Next.js)
2import { LogVault } from '@logvault/client';
3
4const client = new LogVault(process.env.LOGVAULT_API_KEY);
5
6export default async function handler(req, res) {
7  // Verify the user is authenticated
8  const session = await getSession(req);
9  if (!session) {
10    return res.status(401).json({ error: 'Unauthorized' });
11  }
12
13  // Only return events for the authenticated user's organization
14  const { actor_id } = req.query;
15
16  // Security: Ensure the actor_id belongs to this user's org
17  if (!canAccessActor(session.user, actor_id)) {
18    return res.status(403).json({ error: 'Forbidden' });
19  }
20
21  const events = await client.listEvents({
22    actorId: actor_id,
23    limit: 50
24  });
25
26  res.json({ events: events.data });
27}

Security Considerations

⚠️ Important

Always filter events server-side. Never trust client-provided filters for access control. A customer should only see their own events.

Use a backend proxy - Never expose your API key to the browser
Verify ownership - Ensure the requested actor_id belongs to the authenticated user
Limit data exposure - Only return fields the customer should see
Rate limit - Protect your proxy endpoint from abuse

Customizing the Display

Map technical action names to human-readable labels: