āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/reference/astro/react ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
Astro provides an integration that enables server-side rendering and client-side hydration for your React components. This guide demonstrates how to use Clerk with Astro and React.
If you have not set up your Astro application to work with Clerk, see the quickstart guide.
<Steps> ## Install `@astrojs/react`Add the Astro React integration to your project:
<CodeBlockTabs options={["npm", "yarn", "pnpm", "bun"]}>
bash {{ filename: 'terminal' }} npx astro add react
```bash {{ filename: 'terminal' }}
yarn astro add react
```
```bash {{ filename: 'terminal' }}
pnpm astro add react
```
```bash {{ filename: 'terminal' }}
bun astro add react
```
astro.config.mjsAdd Clerk and React integrations to your Astro configuration:
import { defineConfig } from 'astro/config'
import node from '@astrojs/node'
import react from '@astrojs/react'
import clerk from '@clerk/astro'
export default defineConfig({
integrations: [clerk(), react()],
output: 'server',
adapter: node({ mode: 'standalone' }),
})
You can use the prebuilt components in your Astro pages or regular React components.
The following example demonstrates how to use Clerk components in Astro pages.
---
import { SignedIn, SignedOut, UserButton, SignInButton } from '@clerk/astro/react'
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
</head>
<body>
<header>
<nav>
<SignedOut client:load>
<SignInButton client:load mode="modal" />
</SignedOut>
<SignedIn client:load>
<UserButton client:load />
</SignedIn>
</nav>
</header>
<article>
<slot />
</article>
</body>
</html>
The following example demonstrates how to use Clerk components in React components.
import { SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/astro/react'
export default function Header() {
return (
<>
<p>My App</p>
<SignedOut>
<SignInButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</>
)
}
Clerk Astro provides a set of useful stores that give you access to the Clerk{{ target: '_blank' }} object, and helper methods for signing in and signing up.
The following example demonstrates how to use a Clerk Astro store.
import { $userStore } from '@clerk/astro/client'
export default function Username() {
const user = useSyncExternalStore($userStore.listen, $userStore.get, $userStore.get)
return <>{user?.firstName}</>
}
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā