@vouch-in/remix

Official Vouch SDK for Remix - Email validation for Remix applications with action/loader support.

Installation

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

Quick Start

Server-Side (Action)

// app/routes/signup.tsx
import { json, type ActionFunctionArgs } from "@remix-run/node";
import { Vouch } from "@vouch-in/remix";

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

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const email = formData.get("email") as string;

  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 json({ error: "Email validation failed" }, { status: 400 });
  }

  // Create user...
  return json({ success: true });
}

Client-Side

import { Form, useActionData, useNavigation } from "@remix-run/react";

export default function SignupRoute() {
  const actionData = useActionData<typeof action>();
  const navigation = useNavigation();
  const isSubmitting = navigation.state === "submitting";

  return (
    <Form method="post">
      <input type="email" name="email" required />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Validating..." : "Sign Up"}
      </button>
      {actionData?.error && <p>{actionData.error}</p>}
    </Form>
  );
}

Client-Side Validation with Fingerprinting

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

export default function SignupPage() {
  return (
    <VouchProvider
      projectId={window.ENV.VOUCH_PROJECT_ID}
      apiKey={window.ENV.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") {
      (e.target as HTMLFormElement).submit();
    }
  };

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

Features

• Action/Loader pattern support
• Client-side validation with fingerprinting
• Hybrid validation (client + server)
• TypeScript support
• Works with Remix v1 and v2

Environment Variables

# .env
VOUCH_PROJECT_ID=your_project_id
VOUCH_SERVER_KEY=your_server_key
VOUCH_CLIENT_KEY=your_client_key

Documentation

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

docs.vouch.expert/sdks/remix

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.