mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-04 21:04:37 +08:00
210 lines
11 KiB
Plaintext
210 lines
11 KiB
Plaintext
---
|
|
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 CardTitle = ({ href, children }) => (
|
|
<a href={href} className="mb-1 block text-sm font-semibold text-slate-900 no-underline hover:text-[#6b5df7] dark:text-white dark:hover:text-[#8b7cf9]">{children}</a>
|
|
);
|
|
|
|
export const CardChip = ({ href, children }) => (
|
|
<a href={href} className="rounded bg-slate-100 px-2 py-0.5 text-xs text-slate-500 no-underline transition hover:bg-[#6b5df7]/10 hover:text-[#6b5df7] dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-[#6b5df7]/20 dark:hover:text-[#8b7cf9]">{children}</a>
|
|
);
|
|
|
|
<div className="not-prose relative w-full overflow-hidden rounded-xl bg-[#121212]">
|
|
<img
|
|
src="/images/hero-illustration-full.svg"
|
|
alt=""
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute right-[-14rem] top-1/2 w-[980px] max-w-none -translate-y-1/2 opacity-80 sm:right-[-10rem] sm:w-[1080px] lg:right-[-6rem] lg:w-[1180px] dark:opacity-55"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-[#121212] via-[#121212]/78 to-[#121212]/28" />
|
|
<div className="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
|
|
<div className="flex flex-col justify-center">
|
|
<h1 className="mt-6 text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">
|
|
Ship auth without <br />
|
|
rebuilding the basics
|
|
</h1>
|
|
<p className="mt-5 max-w-2xl text-base leading-7 text-slate-300 sm:text-lg">
|
|
Learn how to set up Stack Auth, drop in prebuilt components, use the
|
|
SDK, and integrate any backend through the REST API.
|
|
</p>
|
|
<div className="mt-8 flex flex-wrap gap-3">
|
|
<a
|
|
href="/guides/getting-started/setup"
|
|
className="inline-flex items-center justify-center rounded-lg bg-[#6346ec] px-5 py-3 text-sm font-semibold text-white no-underline transition hover:bg-[#6346ec]/90"
|
|
>
|
|
Start setup
|
|
</a>
|
|
<a
|
|
href="/guides/getting-started/setup"
|
|
className="inline-flex items-center justify-center rounded-lg border border-slate-600 px-5 py-3 text-sm font-semibold text-slate-200 no-underline transition hover:border-[#6346ec] hover:text-white"
|
|
>
|
|
Browse docs
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-auto mt-16 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">Quick Start</h2>
|
|
<p className="mt-3 max-w-3xl text-base text-slate-600 dark:text-slate-300">
|
|
Go from a new project to authenticated users with the shortest path through the docs.
|
|
</p>
|
|
</div>
|
|
|
|
<Steps className="mt-8">
|
|
<Step title="Set up Stack Auth">
|
|
Follow the [setup guide](/guides/getting-started/setup) to initialize Stack Auth in your app.
|
|
|
|
```bash
|
|
npx @stackframe/stack-cli@latest init
|
|
```
|
|
</Step>
|
|
<Step title="Add auth UI">
|
|
Use the [setup guide](/guides/getting-started/setup) to configure prebuilt auth interfaces and handlers.
|
|
</Step>
|
|
<Step title="Read user data in code">
|
|
Reach for the [SDK overview](/sdk/overview) when you need hooks, objects, and typed access to users, teams, and sessions.
|
|
</Step>
|
|
<Step title="Go lower-level when needed">
|
|
Use the [REST API overview](/api/overview) for backend integrations, custom clients, and non-Next.js environments.
|
|
</Step>
|
|
|
|
</Steps>
|
|
</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>
|
|
|
|
{/* Components */}
|
|
<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">Components</SectionLink>
|
|
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">Drop-in UI for sign-in, sign-up, account settings, and team switching.</p>
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
<ChipLink href="/guides/apps/authentication/overview">SignIn / SignUp</ChipLink>
|
|
</div>
|
|
</div>
|
|
|
|
{/* SDK Reference */}
|
|
<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="/sdk/overview">SDK Reference</SectionLink>
|
|
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">Hooks, types, and objects for reading and writing user data in code.</p>
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
<ChipLink href="/sdk/hooks/use-user">useUser</ChipLink>
|
|
<ChipLink href="/sdk/types/user">Types</ChipLink>
|
|
<ChipLink href="/sdk/objects/stack-app">StackApp</ChipLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Branch divider */}
|
|
<div className="ml-4 flex items-center gap-3 py-4 pl-8">
|
|
<div className="h-px flex-1 bg-slate-200 dark:bg-slate-700" />
|
|
<span className="text-xs font-medium uppercase tracking-wider text-slate-400 dark:text-slate-500">Then pick your path</span>
|
|
<div className="h-px flex-1 bg-slate-200 dark:bg-slate-700" />
|
|
</div>
|
|
|
|
{/* Branching cards */}
|
|
<div className="ml-4 grid grid-cols-1 gap-3 pl-8 sm:grid-cols-3">
|
|
<div className="rounded-lg border border-slate-200 p-4 dark:border-slate-700">
|
|
<CardTitle href="/guides/going-further/stack-app">Going Further</CardTitle>
|
|
<p className="text-xs text-slate-500 dark:text-slate-400">Stack App configuration, backend integration, local development, metadata.</p>
|
|
<div className="mt-2 flex flex-wrap gap-1.5">
|
|
<CardChip href="/guides/going-further/stack-app">Stack App</CardChip>
|
|
<CardChip href="/guides/going-further/local-development">Local dev</CardChip>
|
|
<CardChip href="/guides/going-further/backend-integration">Backend</CardChip>
|
|
</div>
|
|
</div>
|
|
<div className="rounded-lg border border-slate-200 p-4 dark:border-slate-700">
|
|
<CardTitle href="/guides/apps/authentication/overview">Apps</CardTitle>
|
|
<p className="text-xs text-slate-500 dark:text-slate-400">Authentication, emails, payments, webhooks, API keys.</p>
|
|
<div className="mt-2 flex flex-wrap gap-1.5">
|
|
<CardChip href="/guides/apps/authentication/overview">Auth</CardChip>
|
|
<CardChip href="/guides/apps/emails/overview">Emails</CardChip>
|
|
<CardChip href="/guides/apps/payments/overview">Payments</CardChip>
|
|
</div>
|
|
</div>
|
|
<div className="rounded-lg border border-slate-200 p-4 dark:border-slate-700">
|
|
<CardTitle href="/api/overview">REST API</CardTitle>
|
|
<p className="text-xs text-slate-500 dark:text-slate-400">HTTP endpoints for any backend or language.</p>
|
|
<div className="mt-2 flex flex-wrap gap-1.5">
|
|
<CardChip href="/api/overview">REST API</CardChip>
|
|
<CardChip href="/guides/apps/webhooks/overview">Webhooks</CardChip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="mt-10 mb-6 text-lg font-semibold text-slate-500 dark:text-slate-400">Explore Apps</h3>
|
|
|
|
<CardGroup cols={3}>
|
|
<Card title="Authentication" icon="right-to-bracket" href="/guides/apps/authentication/overview" />
|
|
<Card title="Auth Providers" icon="users" href="/guides/apps/authentication/auth-providers" />
|
|
<Card title="Emails" icon="envelope" href="/guides/apps/emails/overview" />
|
|
<Card title="Payments" icon="credit-card" href="/guides/apps/payments/overview" />
|
|
<Card title="Webhooks" icon="webhook" href="/guides/apps/webhooks/overview" />
|
|
<Card title="API Keys" icon="key" href="/guides/apps/api-keys/overview" />
|
|
<Card title="Permissions" icon="shield" href="/guides/apps/rbac/overview" />
|
|
<Card title="Teams" icon="people-group" href="/guides/apps/teams/overview" />
|
|
<Card title="Analytics" icon="chart-line" href="/guides/apps/analytics/overview" />
|
|
<Card title="Data Vault" icon="database" href="/guides/apps/data-vault/overview" />
|
|
<Card title="Launch Checklist" icon="clipboard-check" href="/guides/apps/launch-checklist/overview" />
|
|
</CardGroup>
|
|
</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">
|
|
Manage projects, keys, providers, and authentication settings.
|
|
</Card>
|
|
<Card title="GitHub" icon="github" href="https://github.com/stack-auth/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>
|