@vouch-in/next

Official Vouch SDK for Next.js - Full-stack email validation for Next.js applications.

Installation

npm install @vouch-in/next
# or
yarn add @vouch-in/next
# or
pnpm add @vouch-in/next

Quick Start

Server Component (API Route)

// app/api/validate/route.ts
import { Vouch } from "@vouch-in/next";

const vouch = new Vouch(
  process.env.VOUCH_PROJECT_ID!,
  process.env.VOUCH_SERVER_KEY!,
);

export async function POST(request: Request) {
  const { email } = await request.json();

  const result = await vouch.validate(email, {
    ip: request.headers.get("x-forwarded-for") || undefined,
    userAgent: request.headers.get("user-agent") || undefined,
  });

  if (result.recommendation !== "allow") {
    return Response.json({ error: "Validation failed" }, { status: 400 });
  }

  return Response.json({ success: true });
}

Client Component

// app/signup/page.tsx
"use client";

import { VouchProvider, useValidateEmail } from "@vouch-in/next/client";
import { useState } from "react";

export default function SignupPage() {
  return (
    <VouchProvider
      projectId={process.env.NEXT_PUBLIC_VOUCH_PROJECT_ID!}
      apiKey={process.env.NEXT_PUBLIC_VOUCH_CLIENT_KEY!}
    >
      <SignupForm />
    </VouchProvider>
  );
}

function SignupForm() {
  const { validate, loading } = useValidateEmail();
  const [email, setEmail] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    const result = await validate(email);

    if (result.recommendation === "allow") {
      console.log("Email is valid!");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button disabled={loading}>
        {loading ? "Validating..." : "Sign Up"}
      </button>
    </form>
  );
}

Features

• App Router and Pages Router support
• Server Components and Client Components
• Server Actions (Next.js 14+)
• Middleware support
• TypeScript support
• Automatic device fingerprinting (client-side)

Environment Variables

# .env.local
VOUCH_PROJECT_ID=your_project_id
VOUCH_SERVER_KEY=your_server_key

NEXT_PUBLIC_VOUCH_PROJECT_ID=your_project_id
NEXT_PUBLIC_VOUCH_CLIENT_KEY=your_client_key

Documentation

For complete documentation, examples, and API reference, visit:

docs.vouch.expert/sdks/nextjs

Related Packages

• @vouch-in/react - React hooks
• @vouch-in/node - Server-side SDK

License

Proprietary. Copyright (c) Vouch. All rights reserved.

See the SDK License Agreement for terms.