From 1d8d3c57177e6a13e9725d0e5c610622f15763a2 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Sat, 13 Jul 2024 00:15:40 +0300 Subject: [PATCH 1/4] Create a guide for Astro and React --- docs/manifest.json | 11 +++ docs/references/astro/ui-react.mdx | 149 +++++++++++++++++++++++++++++ 2 files changed, 160 insertions(+) create mode 100644 docs/references/astro/ui-react.mdx diff --git a/docs/manifest.json b/docs/manifest.json index 391d305de8..1def48a955 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -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": [ diff --git a/docs/references/astro/ui-react.mdx b/docs/references/astro/ui-react.mdx new file mode 100644 index 0000000000..5260c33027 --- /dev/null +++ b/docs/references/astro/ui-react.mdx @@ -0,0 +1,149 @@ +--- +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 + + + + + +### Install `@astrojs/react` + +Clerk's [Astro SDK](/docs/references/astro/overview) has prebuilt components and helpers to make user authentication easier. + +To get started using Clerk with Astro, add the SDK to your project: + + + ```bash filename="terminal" + npx astro add react + ``` + + ```bash filename="terminal" + yarn astro add react + ``` + + ```bash filename="terminal" + pnpm astro add react + ``` + + +### Update `astro.config.mjs` + +Add the react integration inside your Astro configuration file. + +```ts filename="astro.config.mjs" {2,3,6-8} +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 + +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. + + +```astro filename="src/layouts/SiteLayout.astro" +--- +import { SignedIn, SignedOut, UserButton, SignInButton } from "@clerk/astro/react"; +--- + + + + + + + + + +
+

{title}

+ +
+
+ +
+ + + +``` + +### 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 ( + <> +

My App

+ + + + + + + + ) +} +``` + +### 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} + + ) +} +``` + + + +## Next steps + +
+
+ + + +
+
From 56645325731ea514fe005718bdbcdfa0695bfde7 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Sat, 13 Jul 2024 00:35:24 +0300 Subject: [PATCH 2/4] update --- docs/references/astro/ui-react.mdx | 92 ++++++++++++------------------ 1 file changed, 35 insertions(+), 57 deletions(-) diff --git a/docs/references/astro/ui-react.mdx b/docs/references/astro/ui-react.mdx index 5260c33027..fac5c0b2ab 100644 --- a/docs/references/astro/ui-react.mdx +++ b/docs/references/astro/ui-react.mdx @@ -5,24 +5,13 @@ 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) ### Install `@astrojs/react` -Clerk's [Astro SDK](/docs/references/astro/overview) has prebuilt components and helpers to make user authentication easier. - -To get started using Clerk with Astro, add the SDK to your project: +Alternatively can also read the [official Astro documentation](https://docs.astro.build/en/guides/integrations-guide/react/) ```bash filename="terminal" @@ -42,14 +31,17 @@ To get started using Clerk with Astro, add the SDK to your project: Add the react integration inside your Astro configuration file. -```ts filename="astro.config.mjs" {2,3,6-8} +```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()], + integrations: [ + clerk(), + react() + ], output: "server", adapter: node({ mode: "standalone" }), }); @@ -57,12 +49,14 @@ export default defineConfig({ ### Use Clerk React components in Astro pages -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. - - ```astro filename="src/layouts/SiteLayout.astro" --- -import { SignedIn, SignedOut, UserButton, SignInButton } from "@clerk/astro/react"; +import { + SignedIn, + SignedOut, + UserButton, + SignInButton +} from "@clerk/astro/react"; --- @@ -74,7 +68,6 @@ import { SignedIn, SignedOut, UserButton, SignInButton } from "@clerk/astro/reac
-

{title}