One-click DNS setup component

Install

bunx --bun shadcn@latest add https://domain-sdk.dev/r/one-click-dns-setup.json

Usage

Render this component only after your server has discovered that the hostname and Domain Connect template are supported. The callback should request a short-lived, signed authorization URL from your backend and then redirect the browser.

import { OneClickDnsSetup } from "@/components/domain/one-click-dns-setup";

<OneClickDnsSetup
  domain={domain}
  dnsProvider="Cloudflare"
  isConnecting={isConnecting}
  error={connectError}
  onConnect={async (domain) => {
    const response = await fetch(`/api/domains/${domain.id}/dns-authorization`, {
      method: "POST",
    });
    const { authorizationUrl } = await response.json();
    window.location.assign(authorizationUrl);
  }}
  onManualSetup={() => setSetupMode("manual")}
/>;

Credentials, DNS discovery, template support checks, request signing, authorization URL generation, callback validation, and post-return refresh belong on the server. Do not construct or sign Domain Connect requests in this component.

Confirmed provider paths

Cloudflare is the authoritative DNS provider in the confirmed one-click paths above. Eligibility is per hostname and template, so the UI intentionally does not infer support from domain.provider.

Provider references: Vercel Domain Connect, Railway one-click domains, Cloudflare Domain Connect, Render custom domains, and Netlify external DNS.