Web App Quickstart
Build a secure web-based Agent using the SecuriX Popup flow.
Web App Quickstart
This guide walks you through integrating SecuriX into a React or Next.js application using the Popup Flow.
Copy LLM Prompt
Copy this prompt to your favorite LLM (ChatGPT, Claude, etc.) to get help building with SecuriX using the full documentation context.
I want to build a secure web application using SecuriX. Please refer to the documentation at these URLs to help me implement it:
- Full documentation: https://securix.app/llms-full.txt
- Documentation index: https://securix.app/llms.txtQuick Example
1. Install dependencies
npm install @securix/core @securix/client2. Add the Connect Button
src/components/securix-connect-button.tsx
import { SecurixButton } from "@securix/client";
export default function SecurixConnectExample() {
return (
<SecurixButton
entityId="user_123" // Your existing User ID
providers={{
gmail: { scopes: ["https://www.googleapis.com/auth/gmail.readonly"] },
}}
onResult={(success) => {
if (success) console.log("Securely connected!");
}}
>
Connect Gmail
</SecurixButton>
);
}3. Add the API Handler
src/app/api/securix/[[...all]]/route.ts
import { toNextJsHandler } from "@securix/core";
export const { GET, POST } = toNextJsHandler;4. Use official SDK
CRITICAL SECURITY WARNING
The SECURIX_API_KEY must NEVER be exposed to the client-side (browser). All API calls using this key must be performed from your server-side environment. Exposing this key allows anyone to bypass your security policies and access your users' data.
src/lib/sync-gmail.ts
import { google } from "googleapis";
export async function syncGmail() {
const gmail = google.gmail({
version: "v1",
rootUrl: "https://gmail.api.securix.app", // SecuriX Secure Proxy
headers: {
// These headers must be injected server-side
"securix-api-key": process.env.SECURIX_API_KEY,
"securix-entity-id": "user_123",
"securix-agent-id": "gemini_vscode_1",
},
});
const { data } = await gmail.users.messages.list({ userId: "me" });
console.log(JSON.stringify(data));
}That's it! The SecuriX proxy handles token injection, security rules, and monitoring automatically.