---
title: "Welcome"
description: "Stack Auth documentation for setup, components, SDK usage, and REST APIs."
sidebarTitle: "Overview"
---


export const SectionLink = ({ href, children }) => (
  <a href={href} className="text-base font-semibold text-slate-900 no-underline hover:text-[#6b5df7] dark:text-white dark:hover:text-[#8b7cf9]">{children}</a>
);

export const ChipLink = ({ href, children }) => (
  <a href={href} className="inline-flex rounded-md bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600 no-underline transition hover:bg-[#6b5df7]/10 hover:text-[#6b5df7] dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-[#6b5df7]/20 dark:hover:text-[#8b7cf9]">{children}</a>
);

export const copyGeneratedSetupPrompt = async (event) => {
  const button = event.currentTarget;
  window.focus();
  button.focus();
  const promptCard = button.closest("[data-home-setup-prompt='true']");
  const errorMessage = promptCard == null ? null : promptCard.querySelector("[data-copy-prompt-error='true']");
  try {
    let clipboardError = null;
    let didCopy = false;
    if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
      try {
        await navigator.clipboard.writeText(generatedSetupPromptText);
        didCopy = true;
      } catch (error) {
        clipboardError = error;
      }
    }
    if (!didCopy) {
      const textArea = document.createElement("textarea");
      textArea.value = generatedSetupPromptText;
      textArea.readOnly = true;
      textArea.style.position = "fixed";
      textArea.style.top = "0";
      textArea.style.left = "0";
      textArea.style.opacity = "0";
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      didCopy = document.execCommand("copy");
      document.body.removeChild(textArea);
    }
    if (!didCopy) {
      const clipboardErrorMessage = clipboardError instanceof Error ? clipboardError.message : "";
      throw new Error(clipboardErrorMessage || "Browser clipboard permissions blocked copying.");
    }
    if (errorMessage != null) {
      errorMessage.textContent = "";
      errorMessage.hidden = true;
    }
    button.textContent = "Copied";
    button.title = "";
  } catch (error) {
    const errorText = error instanceof Error ? error.message : "Clipboard copy failed.";
    button.textContent = "Copy failed";
    button.title = errorText;
    if (errorMessage != null) {
      errorMessage.textContent = errorText;
      errorMessage.hidden = false;
    }
  }
  window.setTimeout(() => {
    button.textContent = "Copy prompt";
    button.title = "";
    if (errorMessage != null) {
      errorMessage.textContent = "";
      errorMessage.hidden = true;
    }
  }, 2500);
};

<div data-home-setup-prompt="true" className="not-prose my-6 rounded-3xl border border-[#d7dff6] bg-gradient-to-br from-[#f6f8ff] via-[#f2f5ff] to-[#edf7ff] p-5 text-zinc-900 shadow-[0_20px_60px_-40px_rgba(50,70,150,0.35)] sm:p-7 dark:border-[#2c3751] dark:bg-gradient-to-br dark:from-[#0c1423] dark:via-[#111b2f] dark:to-[#0b212e] dark:text-zinc-100 dark:shadow-[0_20px_60px_-40px_rgba(0,0,0,0.8)]">
  <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-[#4f5f95] dark:text-[#8ea4d2]">
    Agent-first setup
  </p>

  <h1 className="mt-3 text-4xl font-semibold tracking-tight text-zinc-900 sm:text-5xl dark:text-zinc-50">
    Start with a single prompt.
  </h1>
  <p className="mt-3 max-w-3xl text-base leading-7 text-zinc-600 dark:text-zinc-300">
    Set up Stack Auth by copying the prompt below into your favorite coding agent.
  </p>

  <div className="relative mt-6">
    <pre className="max-h-40 overflow-auto whitespace-pre-wrap rounded-2xl border border-[#cdd7f4] bg-white/75 px-4 py-3 pr-32 font-mono text-xs leading-6 text-zinc-700 backdrop-blur-sm sm:text-sm dark:border-[#33476d] dark:bg-black/20 dark:text-zinc-200"><code>{generatedSetupPromptText}</code></pre>
    <button
      type="button"
      onClick={copyGeneratedSetupPrompt}
      className="absolute right-2 top-2 inline-flex items-center justify-center rounded-lg border border-[#9fb5e4] bg-[#eaf1ff] px-3 py-1.5 text-xs font-semibold text-[#2a4272] transition-colors duration-150 hover:transition-none hover:bg-[#dde8ff] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 focus-visible:ring-offset-[#f3f6ff] dark:border-[#3d5a91] dark:bg-[#12213d] dark:text-[#d5e6ff] dark:hover:bg-[#1a2e51] dark:focus-visible:ring-offset-[#0f1a2e]"
    >
      Copy prompt
    </button>
    <div className="pointer-events-none absolute inset-x-2 bottom-2 h-8 rounded-b-xl bg-gradient-to-t from-[#f4f7ff] to-transparent dark:from-[#0f1a2e]" />
  </div>
  <p data-copy-prompt-error="true" hidden className="mt-2 text-xs font-medium text-red-700 dark:text-red-300" />

  <div className="mt-5 flex flex-col gap-3 sm:flex-row">
    <a
      href="/guides/getting-started/setup"
      className="inline-flex items-center justify-center rounded-xl bg-[#1e2f57] px-5 py-3 text-sm font-semibold !text-[#eef4ff] no-underline transition-colors duration-150 hover:transition-none hover:bg-[#253a6b] dark:bg-[#1e2f57] dark:hover:bg-[#253a6b] dark:!text-[#eef4ff]"
    >
      View setup docs
    </a>
    <a
      href="https://app.stack-auth.com"
      target="_blank"
      rel="noopener"
      className="inline-flex items-center justify-center rounded-xl border border-[#9fb5e4] bg-white/60 px-5 py-3 text-sm font-semibold text-[#1f3764] no-underline transition-colors duration-150 hover:transition-none hover:bg-white/85 dark:border-[#3d5a91] dark:bg-transparent dark:text-[#d7e7ff] dark:hover:bg-white/10"
    >
      Go to dashboard
    </a>
  </div>
</div>

<div className="mx-auto mt-20 max-w-7xl px-4 sm:px-6 lg:px-8">
  <div>
    <h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white">Navigate Through Our Docs</h2>
    <p className="mt-3 max-w-3xl text-base text-slate-600 dark:text-slate-300">
      Start at the top and work your way down, or jump straight to the section you need.
    </p>
  </div>

  <h3 className="mt-10 mb-6 text-lg font-semibold text-slate-500 dark:text-slate-400">Recommended Order</h3>

  <div className="relative mt-2 ml-4 border-l-2 border-slate-200 pl-8 dark:border-slate-700">
    {/* Getting Started */}
    <div className="relative mb-10">
      <div className="absolute -left-[2.55rem] top-0.5 h-4 w-4 rounded-full border-2 border-[#6b5df7] bg-[#6b5df7]" />
      <SectionLink href="/guides/getting-started/setup">Getting Started</SectionLink>
      <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">First-time setup, install the SDK, get auth running in minutes.</p>
      <div className="mt-3 flex flex-wrap gap-2">
        <ChipLink href="/guides/getting-started/setup">Setup</ChipLink>
        <ChipLink href="/guides/getting-started/user-fundamentals">Users</ChipLink>
        <ChipLink href="/guides/getting-started/ai-integration">AI Integration</ChipLink>
        <ChipLink href="/guides/apps/launch-checklist/overview">Production</ChipLink>
      </div>
    </div>

    {/* Explore Apps */}
    <div className="relative mb-10">
      <div className="absolute -left-[2.55rem] top-0.5 h-4 w-4 rounded-full border-2 border-[#6b5df7] bg-[#6b5df7]" />
      <SectionLink href="/guides/apps/authentication/overview">Explore Apps</SectionLink>
      <DocsAppsHomeGrid />
    </div>

    {/* Going Further */}
    <div className="relative mb-10">
      <div className="absolute -left-[2.55rem] top-0.5 h-4 w-4 rounded-full border-2 border-[#6b5df7] bg-[#6b5df7]" />
      <SectionLink href="/guides/going-further/stack-app">Going Further</SectionLink>
      <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
        Configure Stack App deeply, integrate your backend, and use lower-level interfaces where needed.
      </p>
      <div className="mt-3 flex flex-wrap gap-2">
        <ChipLink href="/guides/going-further/stack-app">Stack App</ChipLink>
        <ChipLink href="/guides/going-further/backend-integration">Backend Integration</ChipLink>
        <ChipLink href="/guides/going-further/local-development">Local Development</ChipLink>
      </div>
    </div>

    {/* SDK Reference */}
    <div className="relative mb-10">
      <div className="absolute -left-[2.55rem] top-0.5 h-4 w-4 rounded-full border-2 border-[#6b5df7] bg-[#6b5df7]" />
      <SectionLink href="/sdk/overview">SDK Reference</SectionLink>
      <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
        Use hooks, objects, and types to read and write auth data directly in your app code.
      </p>
      <div className="mt-3 flex flex-wrap gap-2">
        <ChipLink href="/sdk/hooks/use-user">useUser</ChipLink>
        <ChipLink href="/sdk/objects/stack-app">StackApp</ChipLink>
        <ChipLink href="/sdk/types/user">User Type</ChipLink>
      </div>
    </div>

    {/* REST API */}
    <div className="relative mb-4">
      <div className="absolute -left-[2.55rem] top-0.5 h-4 w-4 rounded-full border-2 border-[#6b5df7] bg-[#6b5df7]" />
      <SectionLink href="/api/overview">REST API</SectionLink>
      <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
        Integrate Stack Auth from any backend or language through HTTP endpoints and webhook flows.
      </p>
      <div className="mt-3 flex flex-wrap gap-2">
        <ChipLink href="/api/overview">Overview</ChipLink>
        <ChipLink href="/guides/apps/webhooks/overview">Webhooks</ChipLink>
        <ChipLink href="/guides/going-further/backend-integration">Backend Integration</ChipLink>
      </div>
    </div>
  </div>
</div>

<div className="mx-auto mt-20 max-w-7xl px-4 pb-16 sm:px-6 lg:px-8">
    <div>
      <h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white">Resources</h2>
      <p className="mt-3 max-w-3xl text-base text-slate-600 dark:text-slate-300">
        Reach for product access, source code, and support channels when you need more than reference docs.
      </p>
    </div>

    <CardGroup cols={3}>
      <Card title="Dashboard" icon="table-columns" href="https://app.stack-auth.com" cta="Open app" target="_blank" rel="noopener noreferrer">
        Manage projects, keys, providers, and authentication settings.
      </Card>
      <Card title="GitHub" icon="github" href="https://github.com/hexclave/stack" cta="View repository">
        Explore the open-source codebase, examples, and release history.
      </Card>
      <Card title="Discord" icon="comments" href="https://discord.stack-auth.com" cta="Join community">
        Ask questions, share feedback, and get help from the community.
      </Card>
    </CardGroup>

</div>