DocsSDKNext.js Quickstart

Add Vaultix to your Next.js app

This guide walks you through adding authentication, social login, and platform connections to a Next.js application in under 5 minutes.

Prerequisites

  • A Next.js 13+ project (App Router recommended)
  • Node.js 18 or later
  • A Vaultix account
1

Create an application

Go to the dashboard and create a new application. Each app gets its own isolated key pair and user pool — keep staging and production fully separate from day one.

Create an application
2

Set your publishable key

After creating your application, copy the Publishable Key from the app card and add it to your environment file. This key encodes your API URL and is safe to include in client-side code.

.env.local
NEXT_PUBLIC_VAULTIX_PUBLISHABLE_KEY=vaultix_pk_live_...
⚠
Never expose your Secret Key. It must stay in server-only environment variables and must never be bundled into client code.
3

Allow your domain

In your app settings, add every origin your app runs at. Without this step, browsers block cross-origin auth requests and sign-in silently fails.

⚠
Required before testing. Add http://localhost:3000 for local dev and your production domain (e.g. https://yourdomain.com).
Open app settings
4

Install the SDK

Install the React SDK, then wrap your root layout with VaultixProvider. This makes the authenticated session available to every component in your app.

Terminal
npm install @vaultix.ai/react
app/layout.tsx
import { VaultixProvider } from "@vaultix.ai/react";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <VaultixProvider
          publishableKey={process.env.NEXT_PUBLIC_VAULTIX_PUBLISHABLE_KEY}
        >
          {children}
        </VaultixProvider>
      </body>
    </html>
  );
}
5

Add sign-in and connect platforms

Drop <SignIn /> anywhere to add a full sign-in form — email, password, and all OAuth providers. Once authenticated, use connectPlatform to connect social accounts for posting.

app/sign-in/page.tsx
import { SignIn } from "@vaultix.ai/react";

export default function LoginPage() {
  return <SignIn afterSignInUrl="/dashboard" />;
}
components/ConnectButton.tsx
import { useVaultix } from "@vaultix.ai/react";

export function ConnectButton() {
  const { connectPlatform } = useVaultix();

  return (
    <button
      onClick={() =>
        connectPlatform("meta", {
          scopes: ["pages_manage_posts", "instagram_content_publish"],
          redirectUrl: window.location.href,
        })
      }
    >
      Connect Instagram
    </button>
  );
}

What's included

Email sign-up & sign-inGoogle · Meta · LinkedIn · X · GitHubPlatform OAuth connectionsSession JWTs — RS256Scope drift detectionServer-to-server user API

Next steps

Protect routes with middleware
Use authMiddleware to restrict pages to signed-in users.
Read the user server-side
Call auth() and currentUser() inside Server Components and API routes.
Full API reference
Browse all endpoints, request/response shapes, and auth schemes.
© 2026 Smritix AI LLPAPI ReferenceDashboard