Next.js Integration

The @securix/core SDK provides a built-in handler for Next.js App Router, making it incredibly simple to set up the backend logic required for the SecurixButton from @securix/client.

1. Setup the API Handler

Create a "catch-all" route in your app/api directory. This single file will handle all the necessary authentication endpoints (create-auth-session and confirm-auth-session).

// app/api/securix/[[...path]]/route.ts
import { toNextJsHandler } from "@securix/core";

export const { GET, POST } = toNextJsHandler;

2. Environment Variables

Ensure your SECURIX_API_KEY is set in your .env.local file. This key is used by the backend handler to communicate securely with Securix.

SECURIX_API_KEY=your_api_key_here
NEXT_PUBLIC_SECURIX_AUTH_URL=https://auth.securix.app

3. The Connect Button

Now you can use the SecurixButton in any of your client components.

"use client";
import { SecurixButton } from "@securix/client";

export default function Home() {
  return (
    <SecurixButton
      entityId="my-unique-user-id"
      providers={{
        gmail: {
          scopes: ["https://www.googleapis.com/auth/gmail.readonly"],
        },
      }}
      onResult={(success) => {
        if (success) {
          alert("Successfully connected to Gmail!");
        }
      }}
    >
      Connect Gmail
    </SecurixButton>
  );
}

4. Why Use the Next.js Handler?

• Zero-Trust: Your server handles the session creation without ever seeing or storing OAuth tokens.
• Security Handshake: It automatically handles the cryptographic sxc (Secret X-Client) handshake required for secure popup flows.
• Easy Maintenance: As Securix adds new features to the SDK, your integration stays up to date with a single package update.