chore(astro): Update README.md (#3782)

Author: panteliselef

.changeset/pretty-ways-doubt.md

@@ -0,0 +1,2 @@
+---
+---

packages/astro/README.md

@@ -96,244 +96,67 @@ PUBLIC_CLERK_SIGN_UP_URL=/sign-up # update this if sign up page exists on anothe
 
 ### Add integrations
 
-- Add the `clerk` integration in your `astro.config.mjs` file.
-- (Optional) Install the `@astrojs/react` and add the `react` in your `astro.config.mjs` file. You only need to perform this action if you are planing to use react with your project or the React features that provided by `astro-clerk-auth`. [Instructions](https://docs.astro.build/en/guides/integrations-guide/react/)
-- Install the `@astrojs/node` package and the `node` adapter in your `astro.config.mjs` file. [Instructions](https://docs.astro.build/en/guides/server-side-rendering/)
-- Set `output` to `server`.
+Follow [the instructions](https://clerk.com/docs/quickstarts/astro) in our documentation.
 
 Example configuration file
 
 ```js
 import { defineConfig } from 'astro/config';
-import react from '@astrojs/react';
 import node from '@astrojs/node';
 import clerk from '@clerk/astro';
 
 export default defineConfig({
-  integrations: [
-    react(),
-    clerk({
-      afterSignInUrl: '/',
-      afterSignUpUrl: '/',
-    }),
-  ],
+  integrations: [clerk()],
+  adapter: node({ mode: 'standalone' }),
   output: 'server',
-  adapter: node({
-    mode: 'standalone',
-  }),
 });
 ```
 
 ### Add a middleware file
 
 This step is required in order to use SSR or any control component. Create a `middleware.ts` file inside the `src/` directory.
 
-**Simple use**
-
 ```ts
 import { clerkMiddleware } from '@clerk/astro/server';
 
 export const onRequest = clerkMiddleware();
 ```
 
-**Supports chaining with `sequence`**
-
-```ts
-const greeting = defineMiddleware(async (context, next) => {
-  console.log('greeting request');
-  console.log(context.locals.auth());
-  const response = await next();
-  console.log('greeting response');
-  return response;
-});
-
-export const onRequest = sequence(clerkMiddleware(), greeting);
-```
-
-**Advanced use with handler**
-
-```ts
-const isProtectedPage = createRouteMatcher(['/user(.*)', '/discover(.*)', /^\/organization/]);
-
-export const onRequest = clerkMiddleware((auth, context, next) => {
-  const requestURL = new URL(context.request.url);
-  if (['/sign-in', '/', '/sign-up'].includes(requestURL.pathname)) {
-    return next();
-  }
-
-  if (isProtectedPage(context.request) && !auth().userId) {
-    return auth().redirectToSignIn();
-  }
-
-  if (!auth().orgId && requestURL.pathname !== '/discover' && requestURL.pathname === '/organization') {
-    const searchParams = new URLSearchParams({
-      redirectUrl: requestURL.href,
-    });
-
-    const orgSelection = new URL(`/discover?${searchParams.toString()}`, context.request.url);
-
-    return context.redirect(orgSelection.href);
-  }
-
-  return next();
-});
-```
-
-### Use Clerk UI Components
-
-Supported components
-
-- [SignIn](https://clerk.com/docs/components/authentication/sign-in)
-- [SignUp](https://clerk.com/docs/components/authentication/sign-up)
-- [UseProfile](https://clerk.com/docs/components/user/user-profile)
-- [UserButton](https://clerk.com/docs/components/user/user-button)
-- [CreateOrganization](https://clerk.com/docs/components/organization/create-organization)
-- [OrganizationSwitcher](https://clerk.com/docs/components/organization/organization-switcher)
-- [OrganizationList](https://clerk.com/docs/components/organization/organization-list)
-- [OrganizationProfile](https://clerk.com/docs/components/organization/organization-profile)
-
-All of the above can be used with React or Vanilla JS. The only difference is the import path.
-
-```ts
-// Import UserProfile build with React (requires `@astro/react`)
-import { UserProfile } from '@clerk/astro/client/react';
-
-// Import UserButton build with vanilla JS
-import { UserProfile } from '@clerk/astro/components/interactive';
-```
-
-Pages that include a Clerk UI component need to be wrapped with `ClerkLayout`, as shown above.
-
-### Use Clerk Control Components
-
-Supported components
-
-- [SignedIn](https://clerk.com/docs/components/control/signed-in)
-- [SignedOut](https://clerk.com/docs/components/control/signed-out)
-- [Protect](https://clerk.com/docs/components/protect)
-
-All of the above can be used with React or only on server. The only difference is the import path.
-
-```ts
-// Import Protect build with React (requires `@astro/react`)
-import { Protect } from '@clerk/astro/client/react';
-
-// Import SignedIn build server side code
-import { SignedIn } from '@clerk/astro/components/control';
-```
-
-### Protect your API Routes
-
-In this example we are fetching the logged in user.
-
-```ts
-import type { APIRoute } from 'astro';
-
-const unautorized = () =>
-  new Response(JSON.stringify({ error: 'unathorized access' }), {
-    status: 401,
-  });
-
-export const GET: APIRoute = async ({ locals }) => {
-  if (!locals.auth().userId) {
-    return unautorized();
-  }
-
-  return new Response(JSON.stringify(await locals.currentUser()), {
-    status: 200,
-  });
-};
-```
-
-### Use Astro.locals
-
-- Use `Astro.locals.auth()` to retrieve the [Authentication Object](https://clerk.com/docs/references/nextjs/authentication-object#authentication-object)
-
-### Use Clerk react hooks
-
-Example SignedIn React component that **supports SSR**
-
-```tsx
-import type { PropsWithChildren } from 'react';
-import { useAuth } from '@clerk/astro/client/react';
-
-export function SignedIn(props: PropsWithChildren) {
-  const { userId } = useAuth();
-
-  if (!userId) {
-    return null;
-  }
-  return props.children;
-}
-```
-
-### Use a client store to build your custom logic
+### Use components inside .astro files
 
-Warning: **SSR not supported**
-
-```tsx
-import type { PropsWithChildren } from 'react';
-import { useStore } from '@nanostores/react';
-import { $authStore } from '@clerk/astro/client/stores';
-
-export function SignedOut(props: PropsWithChildren) {
-  const { userId } = useStore($authStore);
-
-  if (userId) {
-    return null;
-  }
-  return props.children;
-}
-```
-
-### Use Clerk react components inside your components
-
-Example Header react component that uses Clerk components
-
-```tsx
-import { SignedIn, SignedOut, UserButton } from '@clerk/astro/client/react';
+```astro
+---
+import { SignedIn, SignedOut, UserButton, SignInButton } from "@clerk/astro/components";
+---
 
-export function Header() {
-  return (
+<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>
-      <h1>My App</h1>
-      <SignedIn>
-        <UserButton />
-      </SignedIn>
-      <SignedOut>
-        <a href='/sign-in'>Go to Sign in</a>
-      </SignedOut>
+      <h1>{title}</h1>
+      <nav>
+        <SignedOut>
+         <SignInButton mode="modal" />
+        </SignedOut>
+        <SignedIn>
+          <UserButton />
+        </SignedIn>
+      </nav>
     </header>
-  );
-}
+    <article>
+      <slot />
+    </article>
+  </body>
+</html>
 ```
 
-### Use Clerk in Headless Mode
-
-[Clerk Headless mode](https://clerk.com/docs/components/clerk-provider) (see `ClerkJSVariant` prop their docs) is a Clerk variant that is focused towards getting smaller bundle sizes. This variant does _not_ include React or any client side components for Clerk (e.g. their signin component). Because of that the bundle size is drastically smaller. On top of that it also lazy loads the JavaScript client side.
-
-In order to use headless mode with this package, change your Astro configuration file to:
-
-```diff
-import { defineConfig } from "astro/config";
-import react from "@astrojs/react";
-import node from "@astrojs/node";
-- import clerk from "@clerk/astro";
-+ import clerk from "@clerk/astro/hotload";
-
-export default defineConfig({
-  integrations: [
-    react(),
-    clerk({
-+      clerkJSVariant: "headless"
-    }),
-  ],
-  output: "server",
-  adapter: node({
-    mode: "standalone",
-  }),
-});
-```
+_For further details and examples, please refer to
+our [Documentation](https://clerk.com/docs?utm_source=github&utm_medium=clerk_nextjs)._
 
 ## Support