Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a guide for Astro and React #1255

Merged
merged 4 commits into from
Jul 12, 2024
Merged

Create a guide for Astro and React #1255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1d8d3c5
Create a guide for Astro and React
panteliselef Jul 12, 2024
5664532
update
panteliselef Jul 12, 2024
07619d0
update
panteliselef Jul 12, 2024
a8c3b90
update quickstart
panteliselef Jul 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions docs/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1801,6 +1801,17 @@
"items": [
[
{ "title": "Overview", "href": "/docs/references/astro/overview" },
{
"title": "UI Frameworks",
"items": [
[
{
"title": "React",
"href": "/docs/references/astro/ui-react"
}
]
]
},
{
"title": "Guides",
"items": [
Expand Down
57 changes: 14 additions & 43 deletions docs/quickstarts/astro.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ description: Add authentication and user management to your Astro app with Clerk
beforeYouStart={[
{
title: "Set up a Clerk application",
link: "https://clerk.com/docs/quickstarts/setup-clerk",
link: "/docs/quickstarts/setup-clerk",
icon: "clerk",
},
{
Expand Down Expand Up @@ -135,13 +135,11 @@ export const onRequest = clerkMiddleware();

Clerk offers components that allow you to protect your pages. These components are used to control the visibility of your pages based on the user's authentication state.

<CodeBlockTabs options={["Astro", "Astro + React"]}>
```astro filename="src/layouts/SiteLayout.astro"
---
import { SignedIn, SignedOut } from "@clerk/astro/components/control";
import { UserButton } from "@clerk/astro/components/interactive";
import { SignInButton } from "@clerk/astro/components/unstyled";
---

```astro filename="src/layouts/SiteLayout.astro"
---
import { SignedIn, SignedOut, UserButton, SignInButton } from "@clerk/astro/components";
---

<html lang="en">
<head>
Expand Down Expand Up @@ -173,42 +171,15 @@ Clerk offers components that allow you to protect your pages. These components a
</style>
</html>
```
</CodeBlockTabs>


<CodeBlockTabs options={["Astro", "Astro + React"]}>
```astro filename="src/pages/index.astro"
---
import SiteLayout from "../layouts/SiteLayout.astro"
---
<SiteLayout title="Clerk + Astro">
<p>Sign in to try Clerk out!</p>
</SiteLayout>
```

```tsx filename="src/pages/index.tsx"
import {
SignInButton,
SignedIn,
SignedOut,
UserButton
} from '@clerk/astro/client/react'

export default function Page() {
return (
<>
<SignedOut>
<SignInButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</>
)
}
```
</CodeBlockTabs>

```astro filename="src/pages/index.astro"
---
import SiteLayout from "../layouts/SiteLayout.astro"
---
<SiteLayout title="Clerk + Astro">
<p>Sign in to try Clerk out!</p>
</SiteLayout>
```
</Steps>

## Next steps
Expand Down
127 changes: 127 additions & 0 deletions docs/references/astro/ui-react.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
---
title: Use Clerk with Astro and React
description: Learn how to user Clerk inside an Astro app with React
---

# Use Clerk with Astro and React

Astro supports intregrations with many UI Frameworks. This guide we teach you how to untilize [`@clerk/astro`](/docs/references/astro/overview) and use [Clerk's components](https://clerk.com/docs/pr/1255/components/overview#ui-components), hooks and the new stores. If you have not set up you Astro applicatoin to work with Clerk, visit the [Astro quickstart.](https://clerk.com/docs/pr/1255/quickstarts/astro)


<Steps>
### Install `@astrojs/react`

Alternatively can also read the [official Astro documentation](https://docs.astro.build/en/guides/integrations-guide/react/)

<CodeBlockTabs type="installer" options={["npm", "yarn", "pnpm"]}>
```bash filename="terminal"
npx astro add react
```

```bash filename="terminal"
yarn astro add react
```

```bash filename="terminal"
pnpm astro add react
```
</CodeBlockTabs>

### Update `astro.config.mjs`

Add the react integration inside your Astro configuration file.

```ts filename="astro.config.mjs" {3,9}
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" }),
});
```

### Use Clerk React components in Astro pages

```astro filename="src/layouts/SiteLayout.astro"
---
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>
```

### Use Clerk React components in your React components

```tsx filename="src/components/Header.tsx"
import {
SignInButton,
SignedIn,
SignedOut,
UserButton
} from '@clerk/astro/react'

export default function Header() {
return (
<>
<p>My App</p>
<SignedOut>
<SignInButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</>
)
}
```

### Use stores in your React components

```tsx filename="src/components/Header.tsx"
import { $userStore } from '@clerk/astro/react'

export default function Username() {
const user = useSyncExternalStore($userStore.listen, $userStore.get, $userStore.get)
return (
<>
{user?.firstName}
</>
)
}
```

</Steps>