Public Invite Codes

import { betterAuth } from "better-auth";
import { invite } from "better-auth-invite-plugin";

export const auth = betterAuth({
  database: {
    // Your database config
  },
  plugins: [
    invite({
      // Public invites don't require sendUserInvitation
      // But you can still have it for private invites
      defaultSenderResponse: "url", // Return full URL by default
      defaultMaxUses: 10, // Limit uses for public invites
    }),
  ],
});

import { createAuthClient } from "better-auth/react";
import { inviteClient } from "better-auth-invite-plugin/client";

export const authClient = createAuthClient({
  baseURL: process.env.NEXT_PUBLIC_AUTH_URL,
  plugins: [inviteClient()],
});

"use client";

import { useState } from "react";
import { authClient } from "@/lib/auth-client";
import { Check, Copy } from "lucide-react";

export function PublicInviteGenerator() {
  const [role, setRole] = useState("user");
  const [maxUses, setMaxUses] = useState(10);
  const [senderResponse, setSenderResponse] = useState<"token" | "url">("url");
  const [inviteResult, setInviteResult] = useState<string | null>(null);
  const [copied, setCopied] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleGenerate = async () => {
    setLoading(true);
    setInviteResult(null);

    try {
      const { data, error } = await authClient.invite.create({
        // No email = public invite
        role,
        maxUses,
        senderResponse,
        senderResponseRedirect: "signUp",
      });

      if (error) {
        alert(`Error: ${error.message}`);
      } else if (data?.message) {
        setInviteResult(data.message);
      }
    } catch (err) {
      alert("Failed to generate invite");
    } finally {
      setLoading(false);
    }
  };

  const handleCopy = async () => {
    if (inviteResult) {
      await navigator.clipboard.writeText(inviteResult);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  };

  return (
    <div className="max-w-2xl mx-auto space-y-6">
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-2xl font-bold mb-4">Generate Public Invite Code</h2>
        
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-1">Role</label>
            <select
              value={role}
              onChange={(e) => setRole(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-md"
            >
              <option value="user">User</option>
              <option value="moderator">Moderator</option>
              <option value="admin">Admin</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium mb-1">
              Max Uses (0 = unlimited)
            </label>
            <input
              type="number"
              value={maxUses}
              onChange={(e) => setMaxUses(Number(e.target.value))}
              min="0"
              className="w-full px-3 py-2 border border-gray-300 rounded-md"
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">Response Type</label>
            <div className="flex gap-4">
              <label className="flex items-center">
                <input
                  type="radio"
                  value="url"
                  checked={senderResponse === "url"}
                  onChange={(e) => setSenderResponse("url")}
                  className="mr-2"
                />
                Full URL
              </label>
              <label className="flex items-center">
                <input
                  type="radio"
                  value="token"
                  checked={senderResponse === "token"}
                  onChange={(e) => setSenderResponse("token")}
                  className="mr-2"
                />
                Token Only
              </label>
            </div>
          </div>

          <button
            onClick={handleGenerate}
            disabled={loading}
            className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50"
          >
            {loading ? "Generating..." : "Generate Invite"}
          </button>
        </div>
      </div>

      {inviteResult && (
        <div className="bg-green-50 border border-green-200 rounded-lg p-6">
          <h3 className="text-lg font-semibold text-green-900 mb-3">
            Invite Generated!
          </h3>
          <div className="flex items-center gap-2">
            <code className="flex-1 bg-white px-4 py-3 rounded border border-green-300 break-all text-sm">
              {inviteResult}
            </code>
            <button
              onClick={handleCopy}
              className="p-3 bg-green-600 text-white rounded hover:bg-green-700 transition-colors"
              title="Copy to clipboard"
            >
              {copied ? <Check size={20} /> : <Copy size={20} />}
            </button>
          </div>
          <p className="text-sm text-green-700 mt-3">
            Share this {senderResponse === "url" ? "link" : "code"} with anyone you want to invite!
          </p>
        </div>
      )}
    </div>
  );
}