From 65ab498a66d26921ccd4a8ce7484a3a7f499e0e1 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Mon, 1 Jul 2024 14:47:34 +0300
Subject: [PATCH 01/23] feat(astro): Introduce Astro SDK

---
 .../control/ClerkLayout.astro                 |  7 +++
 packages/astro/src/client/hotload.ts          | 58 +++++++++++++++++++
 packages/astro/src/hotload.ts                 |  1 +
 packages/astro/src/integration/hotload.ts     |  5 ++
 packages/astro/src/internal/hotload.ts        | 13 +++++
 packages/astro/src/stores/index.ts            |  2 +
 packages/astro/src/v0/clerkClient.ts          | 20 +++++++
 packages/astro/src/v0/constants.ts            | 55 ++++++++++++++++++
 packages/astro/src/v0/index.ts                |  2 +
 packages/astro/v0/package.json                |  3 +
 10 files changed, 166 insertions(+)
 create mode 100644 packages/astro/src/astro-components/control/ClerkLayout.astro
 create mode 100644 packages/astro/src/client/hotload.ts
 create mode 100644 packages/astro/src/hotload.ts
 create mode 100644 packages/astro/src/integration/hotload.ts
 create mode 100644 packages/astro/src/internal/hotload.ts
 create mode 100644 packages/astro/src/stores/index.ts
 create mode 100644 packages/astro/src/v0/clerkClient.ts
 create mode 100644 packages/astro/src/v0/constants.ts
 create mode 100644 packages/astro/src/v0/index.ts
 create mode 100644 packages/astro/v0/package.json

diff --git a/packages/astro/src/astro-components/control/ClerkLayout.astro b/packages/astro/src/astro-components/control/ClerkLayout.astro
new file mode 100644
index 00000000000..c4f4795eced
--- /dev/null
+++ b/packages/astro/src/astro-components/control/ClerkLayout.astro
@@ -0,0 +1,7 @@
+---
+interface Props {
+  protectedPage?: boolean;
+}
+
+---
+<slot />
diff --git a/packages/astro/src/client/hotload.ts b/packages/astro/src/client/hotload.ts
new file mode 100644
index 00000000000..57b8b853a63
--- /dev/null
+++ b/packages/astro/src/client/hotload.ts
@@ -0,0 +1,58 @@
+import { waitForClerkScript } from '../internal/utils/loadClerkJSScript';
+import { $clerk, $csrState } from '../stores/internal';
+import type { AstroClerkIntegrationParams, AstroClerkUpdateOptions } from '../types';
+import { mountAllClerkAstroJSComponents } from './mount-clerk-astro-js-components';
+import { runOnce } from './run-once';
+
+let initOptions: AstroClerkIntegrationParams | undefined;
+
+/**
+ * Prevents firing clerk.load multiple times
+ */
+export const createClerkInstance = runOnce(createClerkInstanceInternal);
+
+export async function createClerkInstanceInternal(options?: AstroClerkIntegrationParams) {
+  let clerkJSInstance = window.Clerk;
+  if (!clerkJSInstance) {
+    await waitForClerkScript();
+
+    if (!window.Clerk) {
+      throw new Error('Failed to download latest ClerkJS. Contact support@clerk.com.');
+    }
+    clerkJSInstance = window.Clerk;
+  }
+
+  if (!$clerk.get()) {
+    $clerk.set(clerkJSInstance);
+  }
+
+  initOptions = options;
+  // TODO: Update Clerk type from @clerk/types to include this method
+  return (clerkJSInstance as any)
+    .load(options)
+    .then(() => {
+      $csrState.setKey('isLoaded', true);
+
+      mountAllClerkAstroJSComponents();
+
+      clerkJSInstance.addListener(payload => {
+        $csrState.setKey('client', payload.client);
+        $csrState.setKey('user', payload.user);
+        $csrState.setKey('session', payload.session);
+        $csrState.setKey('organization', payload.organization);
+      });
+    })
+    .catch(() => {});
+}
+
+export function updateClerkOptions(options: AstroClerkUpdateOptions) {
+  const clerk = $clerk.get();
+  if (!clerk) {
+    throw new Error('Missing clerk instance');
+  }
+  // TODO: Update Clerk type from @clerk/types to include this method
+  void (clerk as any).__unstable__updateProps({
+    options: { ...initOptions, ...options },
+    appearance: { ...initOptions?.appearance, ...options.appearance },
+  });
+}
diff --git a/packages/astro/src/hotload.ts b/packages/astro/src/hotload.ts
new file mode 100644
index 00000000000..91fef73a055
--- /dev/null
+++ b/packages/astro/src/hotload.ts
@@ -0,0 +1 @@
+export { default } from './integration/hotload';
diff --git a/packages/astro/src/integration/hotload.ts b/packages/astro/src/integration/hotload.ts
new file mode 100644
index 00000000000..77f3eaaa6b7
--- /dev/null
+++ b/packages/astro/src/integration/hotload.ts
@@ -0,0 +1,5 @@
+import { createIntegration } from './create-integration';
+
+export default createIntegration({
+  mode: 'hotload',
+});
diff --git a/packages/astro/src/internal/hotload.ts b/packages/astro/src/internal/hotload.ts
new file mode 100644
index 00000000000..ca17cfb879f
--- /dev/null
+++ b/packages/astro/src/internal/hotload.ts
@@ -0,0 +1,13 @@
+/**
+ * The following code will be used in order to be injected as script via the astro integration.
+ * F.e.
+ *
+ * injectScript('before-hydration', `...`)
+ */
+
+import { createClerkInstance } from '../client/hotload';
+import { createInjectionScriptRunner } from './create-injection-script-runner';
+
+const runInjectionScript = createInjectionScriptRunner(createClerkInstance);
+
+export { runInjectionScript };
diff --git a/packages/astro/src/stores/index.ts b/packages/astro/src/stores/index.ts
new file mode 100644
index 00000000000..7e13c9380c8
--- /dev/null
+++ b/packages/astro/src/stores/index.ts
@@ -0,0 +1,2 @@
+// TODO: Don't expose internal
+export * from './internal';
diff --git a/packages/astro/src/v0/clerkClient.ts b/packages/astro/src/v0/clerkClient.ts
new file mode 100644
index 00000000000..b5b7320b560
--- /dev/null
+++ b/packages/astro/src/v0/clerkClient.ts
@@ -0,0 +1,20 @@
+import { createClerkClient } from '@clerk/backend';
+import { deprecated } from '@clerk/shared/deprecated';
+
+import { API_URL, API_VERSION, SECRET_KEY } from './constants';
+
+const clerkClientSingleton = createClerkClient({ secretKey: SECRET_KEY, apiVersion: API_VERSION, apiUrl: API_URL });
+
+/**
+ * @deprecated
+ * Accessing `clerkClient` as a variable is deprecated and will be removed in a future release. Please use `clerkClient()` as a function instead.
+ */
+const clerkClient = new Proxy(clerkClientSingleton, {
+  get(target, prop, receiver) {
+    deprecated('clerkClient object', 'Use `clerkClient()` as a function instead.');
+
+    return Reflect.get(target, prop, receiver);
+  },
+});
+
+export { clerkClient };
diff --git a/packages/astro/src/v0/constants.ts b/packages/astro/src/v0/constants.ts
new file mode 100644
index 00000000000..d46797255a1
--- /dev/null
+++ b/packages/astro/src/v0/constants.ts
@@ -0,0 +1,55 @@
+const apiKey = import.meta.env.CLERK_API_KEY || '';
+
+const secretKey = import.meta.env.CLERK_SECRET_KEY || '';
+
+const apiVersion = import.meta.env.CLERK_API_VERSION || 'v1';
+
+const apiUrl = import.meta.env.CLERK_API_URL || 'https://api.clerk.dev';
+
+const frontendApi = import.meta.env.PUBLIC_ASTRO_APP_CLERK_FRONTEND_API || '';
+
+const publishableKey = import.meta.env.PUBLIC_ASTRO_APP_CLERK_PUBLISHABLE_KEY || '';
+
+const signInUrl = import.meta.env.PUBLIC_ASTRO_APP_CLERK_SIGN_IN_URL || ('' as string);
+
+const signUpUrl = import.meta.env.PUBLIC_ASTRO_APP_CLERK_SIGN_UP_URL || ('' as string);
+
+const jwtKey = import.meta.env.CLERK_JWT_KEY || '';
+
+const PUBLISHABLE_KEY = publishableKey;
+const SECRET_KEY = secretKey;
+const SIGN_IN_URL = signInUrl;
+const SIGN_UP_URL = signUpUrl;
+const DOMAIN = import.meta.env.PUBLIC_ASTRO_APP_CLERK_DOMAIN || ('' as string);
+const PROXY_URL = import.meta.env.PUBLIC_ASTRO_APP_CLERK_PROXY_URL || ('' as string);
+const IS_SATELLITE = import.meta.env.PUBLIC_ASTRO_APP_CLERK_IS_SATELLITE === 'true';
+const API_VERSION = import.meta.env.CLERK_API_VERSION || 'v1';
+const API_URL = import.meta.env.CLERK_API_URL || 'https://api.clerk.dev';
+
+const CLERK_JS_URL = import.meta.env.PUBLIC_ASTRO_APP_CLERK_JS_URL;
+const CLERK_JS_VARIANT = import.meta.env.PUBLIC_ASTRO_APP_CLERK_JS_VARIANT;
+const CLERK_JS_VERSION = import.meta.env.PUBLIC_ASTRO_APP_CLERK_JS_VERSION;
+
+export {
+  secretKey,
+  apiKey,
+  apiUrl,
+  apiVersion,
+  frontendApi,
+  publishableKey,
+  jwtKey,
+  signInUrl,
+  signUpUrl,
+  PUBLISHABLE_KEY,
+  SECRET_KEY,
+  SIGN_IN_URL,
+  SIGN_UP_URL,
+  DOMAIN,
+  PROXY_URL,
+  IS_SATELLITE,
+  API_URL,
+  API_VERSION,
+  CLERK_JS_URL,
+  CLERK_JS_VARIANT,
+  CLERK_JS_VERSION,
+};
diff --git a/packages/astro/src/v0/index.ts b/packages/astro/src/v0/index.ts
new file mode 100644
index 00000000000..454b8ea7992
--- /dev/null
+++ b/packages/astro/src/v0/index.ts
@@ -0,0 +1,2 @@
+export * from './clerkClient';
+export * from './constants';
diff --git a/packages/astro/v0/package.json b/packages/astro/v0/package.json
new file mode 100644
index 00000000000..d2fdc59191a
--- /dev/null
+++ b/packages/astro/v0/package.json
@@ -0,0 +1,3 @@
+{
+  "main": "../dist/v0/index.js"
+}

From 52bb715a08e5f524a5510f7493a756fd3d1b7137 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Mon, 1 Jul 2024 14:52:44 +0300
Subject: [PATCH 02/23] chore(astro): Cleanup

---
 .../astro/src/astro-components/control/ClerkLayout.astro   | 7 -------
 packages/astro/src/client/hotload.ts                       | 1 +
 2 files changed, 1 insertion(+), 7 deletions(-)
 delete mode 100644 packages/astro/src/astro-components/control/ClerkLayout.astro

diff --git a/packages/astro/src/astro-components/control/ClerkLayout.astro b/packages/astro/src/astro-components/control/ClerkLayout.astro
deleted file mode 100644
index c4f4795eced..00000000000
--- a/packages/astro/src/astro-components/control/ClerkLayout.astro
+++ /dev/null
@@ -1,7 +0,0 @@
----
-interface Props {
-  protectedPage?: boolean;
-}
-
----
-<slot />
diff --git a/packages/astro/src/client/hotload.ts b/packages/astro/src/client/hotload.ts
index 57b8b853a63..ffe5b8c612b 100644
--- a/packages/astro/src/client/hotload.ts
+++ b/packages/astro/src/client/hotload.ts
@@ -23,6 +23,7 @@ export async function createClerkInstanceInternal(options?: AstroClerkIntegratio
   }
 
   if (!$clerk.get()) {
+    // @ts-ignore
     $clerk.set(clerkJSInstance);
   }
 

From f6ae5ae59b4cc9556b429c8f88676507db2627c0 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Mon, 1 Jul 2024 15:30:31 +0300
Subject: [PATCH 03/23] chore(astro): Drop deprecations

---
 packages/astro/src/stores/index.ts   |  2 -
 packages/astro/src/v0/clerkClient.ts | 20 ----------
 packages/astro/src/v0/constants.ts   | 55 ----------------------------
 packages/astro/src/v0/index.ts       |  2 -
 packages/astro/v0/package.json       |  3 --
 5 files changed, 82 deletions(-)
 delete mode 100644 packages/astro/src/stores/index.ts
 delete mode 100644 packages/astro/src/v0/clerkClient.ts
 delete mode 100644 packages/astro/src/v0/constants.ts
 delete mode 100644 packages/astro/src/v0/index.ts
 delete mode 100644 packages/astro/v0/package.json

diff --git a/packages/astro/src/stores/index.ts b/packages/astro/src/stores/index.ts
deleted file mode 100644
index 7e13c9380c8..00000000000
--- a/packages/astro/src/stores/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// TODO: Don't expose internal
-export * from './internal';
diff --git a/packages/astro/src/v0/clerkClient.ts b/packages/astro/src/v0/clerkClient.ts
deleted file mode 100644
index b5b7320b560..00000000000
--- a/packages/astro/src/v0/clerkClient.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { createClerkClient } from '@clerk/backend';
-import { deprecated } from '@clerk/shared/deprecated';
-
-import { API_URL, API_VERSION, SECRET_KEY } from './constants';
-
-const clerkClientSingleton = createClerkClient({ secretKey: SECRET_KEY, apiVersion: API_VERSION, apiUrl: API_URL });
-
-/**
- * @deprecated
- * Accessing `clerkClient` as a variable is deprecated and will be removed in a future release. Please use `clerkClient()` as a function instead.
- */
-const clerkClient = new Proxy(clerkClientSingleton, {
-  get(target, prop, receiver) {
-    deprecated('clerkClient object', 'Use `clerkClient()` as a function instead.');
-
-    return Reflect.get(target, prop, receiver);
-  },
-});
-
-export { clerkClient };
diff --git a/packages/astro/src/v0/constants.ts b/packages/astro/src/v0/constants.ts
deleted file mode 100644
index d46797255a1..00000000000
--- a/packages/astro/src/v0/constants.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-const apiKey = import.meta.env.CLERK_API_KEY || '';
-
-const secretKey = import.meta.env.CLERK_SECRET_KEY || '';
-
-const apiVersion = import.meta.env.CLERK_API_VERSION || 'v1';
-
-const apiUrl = import.meta.env.CLERK_API_URL || 'https://api.clerk.dev';
-
-const frontendApi = import.meta.env.PUBLIC_ASTRO_APP_CLERK_FRONTEND_API || '';
-
-const publishableKey = import.meta.env.PUBLIC_ASTRO_APP_CLERK_PUBLISHABLE_KEY || '';
-
-const signInUrl = import.meta.env.PUBLIC_ASTRO_APP_CLERK_SIGN_IN_URL || ('' as string);
-
-const signUpUrl = import.meta.env.PUBLIC_ASTRO_APP_CLERK_SIGN_UP_URL || ('' as string);
-
-const jwtKey = import.meta.env.CLERK_JWT_KEY || '';
-
-const PUBLISHABLE_KEY = publishableKey;
-const SECRET_KEY = secretKey;
-const SIGN_IN_URL = signInUrl;
-const SIGN_UP_URL = signUpUrl;
-const DOMAIN = import.meta.env.PUBLIC_ASTRO_APP_CLERK_DOMAIN || ('' as string);
-const PROXY_URL = import.meta.env.PUBLIC_ASTRO_APP_CLERK_PROXY_URL || ('' as string);
-const IS_SATELLITE = import.meta.env.PUBLIC_ASTRO_APP_CLERK_IS_SATELLITE === 'true';
-const API_VERSION = import.meta.env.CLERK_API_VERSION || 'v1';
-const API_URL = import.meta.env.CLERK_API_URL || 'https://api.clerk.dev';
-
-const CLERK_JS_URL = import.meta.env.PUBLIC_ASTRO_APP_CLERK_JS_URL;
-const CLERK_JS_VARIANT = import.meta.env.PUBLIC_ASTRO_APP_CLERK_JS_VARIANT;
-const CLERK_JS_VERSION = import.meta.env.PUBLIC_ASTRO_APP_CLERK_JS_VERSION;
-
-export {
-  secretKey,
-  apiKey,
-  apiUrl,
-  apiVersion,
-  frontendApi,
-  publishableKey,
-  jwtKey,
-  signInUrl,
-  signUpUrl,
-  PUBLISHABLE_KEY,
-  SECRET_KEY,
-  SIGN_IN_URL,
-  SIGN_UP_URL,
-  DOMAIN,
-  PROXY_URL,
-  IS_SATELLITE,
-  API_URL,
-  API_VERSION,
-  CLERK_JS_URL,
-  CLERK_JS_VARIANT,
-  CLERK_JS_VERSION,
-};
diff --git a/packages/astro/src/v0/index.ts b/packages/astro/src/v0/index.ts
deleted file mode 100644
index 454b8ea7992..00000000000
--- a/packages/astro/src/v0/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './clerkClient';
-export * from './constants';
diff --git a/packages/astro/v0/package.json b/packages/astro/v0/package.json
deleted file mode 100644
index d2fdc59191a..00000000000
--- a/packages/astro/v0/package.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "main": "../dist/v0/index.js"
-}

From 0421dd0b88ec722d4352e865361ca86fa9f33c12 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Mon, 1 Jul 2024 15:57:53 +0300
Subject: [PATCH 04/23] chore(astro): Make hotloading the default

---
 packages/astro/src/client/hotload.ts      | 59 -----------------------
 packages/astro/src/hotload.ts             |  1 -
 packages/astro/src/integration/hotload.ts |  5 --
 packages/astro/src/internal/hotload.ts    | 13 -----
 4 files changed, 78 deletions(-)
 delete mode 100644 packages/astro/src/client/hotload.ts
 delete mode 100644 packages/astro/src/hotload.ts
 delete mode 100644 packages/astro/src/integration/hotload.ts
 delete mode 100644 packages/astro/src/internal/hotload.ts

diff --git a/packages/astro/src/client/hotload.ts b/packages/astro/src/client/hotload.ts
deleted file mode 100644
index ffe5b8c612b..00000000000
--- a/packages/astro/src/client/hotload.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { waitForClerkScript } from '../internal/utils/loadClerkJSScript';
-import { $clerk, $csrState } from '../stores/internal';
-import type { AstroClerkIntegrationParams, AstroClerkUpdateOptions } from '../types';
-import { mountAllClerkAstroJSComponents } from './mount-clerk-astro-js-components';
-import { runOnce } from './run-once';
-
-let initOptions: AstroClerkIntegrationParams | undefined;
-
-/**
- * Prevents firing clerk.load multiple times
- */
-export const createClerkInstance = runOnce(createClerkInstanceInternal);
-
-export async function createClerkInstanceInternal(options?: AstroClerkIntegrationParams) {
-  let clerkJSInstance = window.Clerk;
-  if (!clerkJSInstance) {
-    await waitForClerkScript();
-
-    if (!window.Clerk) {
-      throw new Error('Failed to download latest ClerkJS. Contact support@clerk.com.');
-    }
-    clerkJSInstance = window.Clerk;
-  }
-
-  if (!$clerk.get()) {
-    // @ts-ignore
-    $clerk.set(clerkJSInstance);
-  }
-
-  initOptions = options;
-  // TODO: Update Clerk type from @clerk/types to include this method
-  return (clerkJSInstance as any)
-    .load(options)
-    .then(() => {
-      $csrState.setKey('isLoaded', true);
-
-      mountAllClerkAstroJSComponents();
-
-      clerkJSInstance.addListener(payload => {
-        $csrState.setKey('client', payload.client);
-        $csrState.setKey('user', payload.user);
-        $csrState.setKey('session', payload.session);
-        $csrState.setKey('organization', payload.organization);
-      });
-    })
-    .catch(() => {});
-}
-
-export function updateClerkOptions(options: AstroClerkUpdateOptions) {
-  const clerk = $clerk.get();
-  if (!clerk) {
-    throw new Error('Missing clerk instance');
-  }
-  // TODO: Update Clerk type from @clerk/types to include this method
-  void (clerk as any).__unstable__updateProps({
-    options: { ...initOptions, ...options },
-    appearance: { ...initOptions?.appearance, ...options.appearance },
-  });
-}
diff --git a/packages/astro/src/hotload.ts b/packages/astro/src/hotload.ts
deleted file mode 100644
index 91fef73a055..00000000000
--- a/packages/astro/src/hotload.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './integration/hotload';
diff --git a/packages/astro/src/integration/hotload.ts b/packages/astro/src/integration/hotload.ts
deleted file mode 100644
index 77f3eaaa6b7..00000000000
--- a/packages/astro/src/integration/hotload.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createIntegration } from './create-integration';
-
-export default createIntegration({
-  mode: 'hotload',
-});
diff --git a/packages/astro/src/internal/hotload.ts b/packages/astro/src/internal/hotload.ts
deleted file mode 100644
index ca17cfb879f..00000000000
--- a/packages/astro/src/internal/hotload.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * The following code will be used in order to be injected as script via the astro integration.
- * F.e.
- *
- * injectScript('before-hydration', `...`)
- */
-
-import { createClerkInstance } from '../client/hotload';
-import { createInjectionScriptRunner } from './create-injection-script-runner';
-
-const runInjectionScript = createInjectionScriptRunner(createClerkInstance);
-
-export { runInjectionScript };

From 3f6b158f5f81fc121de4051e082ed231a4900e56 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Tue, 2 Jul 2024 12:42:50 -0700
Subject: [PATCH 05/23] chore(astro): add react unstyled components

---
 .../astro-components/react/SignInButton.astro | 15 +++++
 .../react/SignOutButton.astro                 | 15 +++++
 .../astro-components/react/SignUpButton.astro | 15 +++++
 .../astro/src/astro-components/react/index.ts |  6 ++
 .../astro/src/client/react/SignInButton.tsx   | 46 +++++++++++++++
 .../astro/src/client/react/SignOutButton.tsx  | 30 ++++++++++
 .../astro/src/client/react/SignUpButton.tsx   | 56 +++++++++++++++++++
 packages/astro/src/client/react/index.ts      |  7 +++
 packages/astro/src/client/react/types.ts      | 20 +++++++
 packages/astro/src/client/react/utils.tsx     | 28 ++++++++++
 10 files changed, 238 insertions(+)
 create mode 100644 packages/astro/src/astro-components/react/SignInButton.astro
 create mode 100644 packages/astro/src/astro-components/react/SignOutButton.astro
 create mode 100644 packages/astro/src/astro-components/react/SignUpButton.astro
 create mode 100644 packages/astro/src/client/react/SignInButton.tsx
 create mode 100644 packages/astro/src/client/react/SignOutButton.tsx
 create mode 100644 packages/astro/src/client/react/SignUpButton.tsx
 create mode 100644 packages/astro/src/client/react/types.ts

diff --git a/packages/astro/src/astro-components/react/SignInButton.astro b/packages/astro/src/astro-components/react/SignInButton.astro
new file mode 100644
index 00000000000..b87315d4b07
--- /dev/null
+++ b/packages/astro/src/astro-components/react/SignInButton.astro
@@ -0,0 +1,15 @@
+---
+import type { SignInButtonProps } from "@clerk/astro/client/react";
+type Props = SignInButtonProps
+
+import { SignInButton as SignInButtonReact } from "@clerk/astro/client/react";
+
+const props = {
+  ...Astro.props
+}
+---
+
+<SignInButtonReact
+  client:load
+  {...props}
+/>
diff --git a/packages/astro/src/astro-components/react/SignOutButton.astro b/packages/astro/src/astro-components/react/SignOutButton.astro
new file mode 100644
index 00000000000..3b4602684cb
--- /dev/null
+++ b/packages/astro/src/astro-components/react/SignOutButton.astro
@@ -0,0 +1,15 @@
+---
+import type { SignOutButtonProps } from "@clerk/astro/client/react";
+type Props = SignOutButtonProps
+
+import { SignOutButton as SignOutButtonReact } from "@clerk/astro/client/react";
+
+const props = {
+  ...Astro.props
+}
+---
+
+<SignOutButtonReact
+  client:load
+  {...props}
+/>
diff --git a/packages/astro/src/astro-components/react/SignUpButton.astro b/packages/astro/src/astro-components/react/SignUpButton.astro
new file mode 100644
index 00000000000..01870f3d964
--- /dev/null
+++ b/packages/astro/src/astro-components/react/SignUpButton.astro
@@ -0,0 +1,15 @@
+---
+import type { SignUpButtonProps } from "@clerk/astro/client/react";
+type Props = SignUpButtonProps
+
+import { SignUpButton as SignUpButtonReact } from "@clerk/astro/client/react";
+
+const props = {
+  ...Astro.props
+}
+---
+
+<SignUpButtonReact
+  client:load
+  {...props}
+/>
diff --git a/packages/astro/src/astro-components/react/index.ts b/packages/astro/src/astro-components/react/index.ts
index 425d016df1e..e2d7f9525fa 100644
--- a/packages/astro/src/astro-components/react/index.ts
+++ b/packages/astro/src/astro-components/react/index.ts
@@ -20,3 +20,9 @@ export { default as SignedIn } from './SignedIn.astro';
 export { default as SignedOut } from './SignedOut.astro';
 // @ts-ignore
 export { default as Protect } from './Protect.astro';
+// @ts-ignore
+export { default as SignInButton } from './SignInButton.astro';
+// @ts-ignore
+export { default as SignOutButton } from './SignOutButton.astro';
+// @ts-ignore
+export { default as SignUpButton } from './SignUpButton.astro';
diff --git a/packages/astro/src/client/react/SignInButton.tsx b/packages/astro/src/client/react/SignInButton.tsx
new file mode 100644
index 00000000000..d519108efc0
--- /dev/null
+++ b/packages/astro/src/client/react/SignInButton.tsx
@@ -0,0 +1,46 @@
+import type { SignInProps } from '@clerk/types';
+import React from 'react';
+
+import type { SignInButtonProps } from './types';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk, type WithClerkProp } from './utils';
+
+export type { SignInButtonProps };
+
+export const SignInButton = withClerk(({ clerk, children, ...props }: WithClerkProp<SignInButtonProps>) => {
+  const { signUpFallbackRedirectUrl, forceRedirectUrl, fallbackRedirectUrl, signUpForceRedirectUrl, mode, ...rest } =
+    props;
+  children = normalizeWithDefaultValue(children, 'Sign in');
+  const child = assertSingleChild(children)('SignInButton');
+
+  const clickHandler = () => {
+    const opts: SignInProps = {
+      forceRedirectUrl,
+      fallbackRedirectUrl,
+      signUpFallbackRedirectUrl,
+      signUpForceRedirectUrl,
+    };
+
+    if (!clerk) {
+      return;
+    }
+
+    if (mode === 'modal') {
+      return clerk.openSignIn(opts);
+    }
+    return clerk.redirectToSignIn({
+      ...opts,
+      signInFallbackRedirectUrl: fallbackRedirectUrl,
+      signInForceRedirectUrl: forceRedirectUrl,
+    });
+  };
+
+  const wrappedChildClickHandler: React.MouseEventHandler = async e => {
+    if (child && typeof child === 'object' && 'props' in child) {
+      await safeExecute(child.props.onClick)(e);
+    }
+    return clickHandler();
+  };
+
+  const childProps = { ...rest, onClick: wrappedChildClickHandler };
+  return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+}, 'SignInButton');
diff --git a/packages/astro/src/client/react/SignOutButton.tsx b/packages/astro/src/client/react/SignOutButton.tsx
new file mode 100644
index 00000000000..863db62bdf9
--- /dev/null
+++ b/packages/astro/src/client/react/SignOutButton.tsx
@@ -0,0 +1,30 @@
+import type { SignOutOptions } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type SignOutButtonProps = {
+  redirectUrl?: string;
+  signOutOptions?: SignOutOptions;
+  children?: React.ReactNode;
+};
+
+export const SignOutButton = withClerk(
+  ({ clerk, children, ...props }: React.PropsWithChildren<WithClerkProp<SignOutButtonProps>>) => {
+    const { redirectUrl = '/', signOutOptions, ...rest } = props;
+
+    children = normalizeWithDefaultValue(children, 'Sign out');
+    const child = assertSingleChild(children)('SignOutButton');
+
+    const clickHandler = () => clerk?.signOut({ redirectUrl });
+    const wrappedChildClickHandler: React.MouseEventHandler = async e => {
+      await safeExecute(child.props.onClick)(e);
+      return clickHandler();
+    };
+
+    const childProps = { ...rest, onClick: wrappedChildClickHandler };
+    return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+  },
+  'SignOutButton',
+);
diff --git a/packages/astro/src/client/react/SignUpButton.tsx b/packages/astro/src/client/react/SignUpButton.tsx
new file mode 100644
index 00000000000..b37651e5609
--- /dev/null
+++ b/packages/astro/src/client/react/SignUpButton.tsx
@@ -0,0 +1,56 @@
+import type { SignUpProps } from '@clerk/types';
+import React from 'react';
+
+import type { SignUpButtonProps } from './types';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk, type WithClerkProp } from './utils';
+
+export type { SignUpButtonProps };
+
+export const SignUpButton = withClerk(({ clerk, children, ...props }: WithClerkProp<SignUpButtonProps>) => {
+  const {
+    fallbackRedirectUrl,
+    forceRedirectUrl,
+    signInFallbackRedirectUrl,
+    signInForceRedirectUrl,
+    mode,
+    unsafeMetadata,
+    ...rest
+  } = props;
+
+  children = normalizeWithDefaultValue(children, 'Sign up');
+  const child = assertSingleChild(children)('SignUpButton');
+
+  const clickHandler = () => {
+    const opts: SignUpProps = {
+      fallbackRedirectUrl,
+      forceRedirectUrl,
+      signInFallbackRedirectUrl,
+      signInForceRedirectUrl,
+      unsafeMetadata,
+    };
+
+    if (!clerk) {
+      return;
+    }
+
+    if (mode === 'modal') {
+      return clerk.openSignUp(opts);
+    }
+
+    return clerk.redirectToSignUp({
+      ...opts,
+      signUpFallbackRedirectUrl: fallbackRedirectUrl,
+      signUpForceRedirectUrl: forceRedirectUrl,
+    });
+  };
+
+  const wrappedChildClickHandler: React.MouseEventHandler = async e => {
+    if (child && typeof child === 'object' && 'props' in child) {
+      await safeExecute(child.props.onClick)(e);
+    }
+    return clickHandler();
+  };
+
+  const childProps = { ...rest, onClick: wrappedChildClickHandler };
+  return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+}, 'SignUpButton');
diff --git a/packages/astro/src/client/react/index.ts b/packages/astro/src/client/react/index.ts
index fca69ad5a18..9b8cbf229f4 100644
--- a/packages/astro/src/client/react/index.ts
+++ b/packages/astro/src/client/react/index.ts
@@ -1,3 +1,10 @@
+import { SignInButton, type SignInButtonProps } from './SignInButton';
+import { SignOutButton, type SignOutButtonProps } from './SignOutButton';
+import { SignUpButton, type SignUpButtonProps } from './SignUpButton';
+
 export * from './uiComponents';
 export * from './controlComponents';
 export * from './hooks';
+export { SignInButton, SignOutButton, SignUpButton };
+
+export type { SignInButtonProps, SignOutButtonProps, SignUpButtonProps };
diff --git a/packages/astro/src/client/react/types.ts b/packages/astro/src/client/react/types.ts
new file mode 100644
index 00000000000..04e11a5a3b6
--- /dev/null
+++ b/packages/astro/src/client/react/types.ts
@@ -0,0 +1,20 @@
+import type { SignInProps, SignUpProps } from '@clerk/types';
+
+type ButtonProps = {
+  mode?: 'redirect' | 'modal';
+  children?: React.ReactNode;
+};
+
+export type SignInButtonProps = ButtonProps &
+  Pick<
+    SignInProps,
+    'fallbackRedirectUrl' | 'forceRedirectUrl' | 'signUpForceRedirectUrl' | 'signUpFallbackRedirectUrl'
+  >;
+
+export type SignUpButtonProps = {
+  unsafeMetadata?: SignUpUnsafeMetadata;
+} & ButtonProps &
+  Pick<
+    SignUpProps,
+    'fallbackRedirectUrl' | 'forceRedirectUrl' | 'signInForceRedirectUrl' | 'signInFallbackRedirectUrl'
+  >;
diff --git a/packages/astro/src/client/react/utils.tsx b/packages/astro/src/client/react/utils.tsx
index 4842c113c30..789969b9c44 100644
--- a/packages/astro/src/client/react/utils.tsx
+++ b/packages/astro/src/client/react/utils.tsx
@@ -37,3 +37,31 @@ export const withClerk = <P extends { clerk: LoadedClerk | undefined | null }>(
 export type WithClerkProp<T = unknown> = T & {
   clerk: LoadedClerk | undefined | null;
 };
+
+export const assertSingleChild =
+  (children: React.ReactNode) =>
+  (name: 'SignInButton' | 'SignUpButton' | 'SignOutButton' | 'SignInWithMetamaskButton') => {
+    try {
+      return React.Children.only(children);
+    } catch (e) {
+      return `You've passed multiple children components to <${name}/>. You can only pass a single child component or text.`;
+    }
+  };
+
+export const normalizeWithDefaultValue = (children: React.ReactNode | undefined, defaultText: string) => {
+  if (!children) {
+    children = defaultText;
+  }
+  if (typeof children === 'string') {
+    children = <button type='button'>{children}</button>;
+  }
+  return children;
+};
+
+export const safeExecute =
+  (cb: unknown) =>
+  (...args: any) => {
+    if (cb && typeof cb === 'function') {
+      return cb(...args);
+    }
+  };

From 2e0aa4fb4fa7a7f7fc86254416258dea9ff859d9 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Tue, 2 Jul 2024 13:49:40 -0700
Subject: [PATCH 06/23] chore(astro): add astro unstyled components

---
 packages/astro/package.json                   |  2 +
 .../unstyled/SignInButton.astro               | 48 ++++++++++++++++++
 .../unstyled/SignOutButton.astro              | 24 +++++++++
 .../unstyled/SignUpButton.astro               | 50 +++++++++++++++++++
 .../src/astro-components/unstyled/index.ts    |  8 +++
 5 files changed, 132 insertions(+)
 create mode 100644 packages/astro/src/astro-components/unstyled/SignInButton.astro
 create mode 100644 packages/astro/src/astro-components/unstyled/SignOutButton.astro
 create mode 100644 packages/astro/src/astro-components/unstyled/SignUpButton.astro
 create mode 100644 packages/astro/src/astro-components/unstyled/index.ts

diff --git a/packages/astro/package.json b/packages/astro/package.json
index d823b33004d..4f2197f6e71 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -97,6 +97,8 @@
     "./components/react/*": "./components/react/*",
     "./components/interactive": "./components/interactive/index.ts",
     "./components/interactive/*": "./components/interactive/*",
+    "./components/unstyled": "./components/unstyled/index.ts",
+    "./components/unstyled/*": "./components/unstyled/*",
     "./components/*": "./components/*",
     "./package.json": "./package.json"
   },
diff --git a/packages/astro/src/astro-components/unstyled/SignInButton.astro b/packages/astro/src/astro-components/unstyled/SignInButton.astro
new file mode 100644
index 00000000000..8440110e0f8
--- /dev/null
+++ b/packages/astro/src/astro-components/unstyled/SignInButton.astro
@@ -0,0 +1,48 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import type { SignInProps } from "@clerk/types";
+type Props<Tag extends HTMLTag> = Polymorphic<SignInProps & { as: Tag; id?: string; mode?: 'redirect' | 'modal' }>
+
+import { customAlphabet, urlAlphabet } from "nanoid";
+
+const safeId = customAlphabet(urlAlphabet, 10)();
+
+const { as: Element = 'button', id = safeId, ...props } = Astro.props
+---
+
+<Element id={id}>
+  <slot />
+</Element >
+
+<script is:inline define:vars={{ props, safeId }}>
+  const btn = document.querySelector(`#${safeId}`);
+
+  btn.addEventListener("click", () => {
+    const {
+      forceRedirectUrl,
+      fallbackRedirectUrl,
+      signUpFallbackRedirectUrl,
+      signUpForceRedirectUrl,
+      mode
+    } = props;
+
+    const opts = {
+      forceRedirectUrl,
+      fallbackRedirectUrl,
+      signUpFallbackRedirectUrl,
+      signUpForceRedirectUrl,
+    };
+
+    const clerk = window.Clerk
+
+    if (mode === 'modal') {
+      return clerk.openSignIn(opts);
+    }
+
+    return clerk.redirectToSignIn({
+      ...opts,
+      signInFallbackRedirectUrl: fallbackRedirectUrl,
+      signInForceRedirectUrl: forceRedirectUrl,
+    });
+  });
+</script>
diff --git a/packages/astro/src/astro-components/unstyled/SignOutButton.astro b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
new file mode 100644
index 00000000000..8e2463e7970
--- /dev/null
+++ b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
@@ -0,0 +1,24 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag; id?: string; mode?: 'redirect' | 'modal' }>
+
+import { customAlphabet, urlAlphabet } from "nanoid";
+
+const safeId = customAlphabet(urlAlphabet, 10)();
+
+const { as: Element = 'button', id = safeId, ...props } = Astro.props
+---
+
+<Element id={id}>
+  <slot />
+</Element >
+
+<script is:inline define:vars={{ props, safeId }}>
+  const btn = document.querySelector(`#${safeId}`);
+
+  btn.addEventListener("click", () => {
+    const { redirectUrl } = props;
+
+    window.Clerk.signOut({ redirectUrl })
+  });
+</script>
diff --git a/packages/astro/src/astro-components/unstyled/SignUpButton.astro b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
new file mode 100644
index 00000000000..f8c73aa42e9
--- /dev/null
+++ b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
@@ -0,0 +1,50 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import type { SignUpProps } from "@clerk/types";
+type Props<Tag extends HTMLTag> = Polymorphic<SignUpProps & { as: Tag; id?: string; mode?: 'redirect' | 'modal' }>
+
+import { customAlphabet, urlAlphabet } from "nanoid";
+
+const safeId = customAlphabet(urlAlphabet, 10)();
+
+const { as: Element = 'button', id = safeId, ...props } = Astro.props
+---
+
+<Element id={id}>
+  <slot />
+</Element >
+
+<script is:inline define:vars={{ props, safeId }}>
+  const btn = document.querySelector(`#${safeId}`);
+
+  btn.addEventListener("click", () => {
+    const {
+      fallbackRedirectUrl,
+      forceRedirectUrl,
+      signInFallbackRedirectUrl,
+      signInForceRedirectUrl,
+      mode,
+      unsafeMetadata,
+    } = props;
+
+    const opts = {
+      fallbackRedirectUrl,
+      forceRedirectUrl,
+      signInFallbackRedirectUrl,
+      signInForceRedirectUrl,
+      unsafeMetadata,
+    };
+
+    const clerk = window.Clerk
+
+    if (mode === 'modal') {
+      return clerk.openSignUp(opts);
+    }
+
+    return clerk.redirectToSignUp({
+      ...opts,
+      signUpFallbackRedirectUrl: fallbackRedirectUrl,
+      signUpForceRedirectUrl: forceRedirectUrl,
+    });
+  });
+</script>
diff --git a/packages/astro/src/astro-components/unstyled/index.ts b/packages/astro/src/astro-components/unstyled/index.ts
new file mode 100644
index 00000000000..d62e09924be
--- /dev/null
+++ b/packages/astro/src/astro-components/unstyled/index.ts
@@ -0,0 +1,8 @@
+// The `ts-ignore` comments here are necessary because we're importing this file inside the `astro:components`
+// virtual module's types, which means that `tsc` will try to resolve these imports. Don't mind the editor errors.
+// @ts-ignore
+export { default as SignInButton } from './SignInButton.astro';
+// @ts-ignore
+export { default as SignUpButton } from './SignUpButton.astro';
+// @ts-ignore
+export { default as SignOutButton } from './SignOutButton.astro';

From 82226fd1ed7e059d6043aae46e08d25eba5da951 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Tue, 2 Jul 2024 14:11:29 -0700
Subject: [PATCH 07/23] chore(astro): fix typescript error in signout click
 handler

---
 packages/astro/src/client/react/SignOutButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/astro/src/client/react/SignOutButton.tsx b/packages/astro/src/client/react/SignOutButton.tsx
index 863db62bdf9..ce9728a62d5 100644
--- a/packages/astro/src/client/react/SignOutButton.tsx
+++ b/packages/astro/src/client/react/SignOutButton.tsx
@@ -19,7 +19,7 @@ export const SignOutButton = withClerk(
 
     const clickHandler = () => clerk?.signOut({ redirectUrl });
     const wrappedChildClickHandler: React.MouseEventHandler = async e => {
-      await safeExecute(child.props.onClick)(e);
+      await safeExecute((child as any).props.onClick)(e);
       return clickHandler();
     };
 

From 243f02343b885be178cc5809751d3daf1ec8ff33 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Tue, 2 Jul 2024 14:14:17 -0700
Subject: [PATCH 08/23] chore(astro): update polymorphic element name for
 clarity

---
 .../astro/src/astro-components/unstyled/SignInButton.astro  | 6 +++---
 .../astro/src/astro-components/unstyled/SignOutButton.astro | 6 +++---
 .../astro/src/astro-components/unstyled/SignUpButton.astro  | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/astro/src/astro-components/unstyled/SignInButton.astro b/packages/astro/src/astro-components/unstyled/SignInButton.astro
index 8440110e0f8..5fb2c596423 100644
--- a/packages/astro/src/astro-components/unstyled/SignInButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignInButton.astro
@@ -7,12 +7,12 @@ import { customAlphabet, urlAlphabet } from "nanoid";
 
 const safeId = customAlphabet(urlAlphabet, 10)();
 
-const { as: Element = 'button', id = safeId, ...props } = Astro.props
+const { as: Tag = 'button', id = safeId, ...props } = Astro.props
 ---
 
-<Element id={id}>
+<Tag id={id}>
   <slot />
-</Element >
+</Tag >
 
 <script is:inline define:vars={{ props, safeId }}>
   const btn = document.querySelector(`#${safeId}`);
diff --git a/packages/astro/src/astro-components/unstyled/SignOutButton.astro b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
index 8e2463e7970..88e528ef813 100644
--- a/packages/astro/src/astro-components/unstyled/SignOutButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
@@ -6,12 +6,12 @@ import { customAlphabet, urlAlphabet } from "nanoid";
 
 const safeId = customAlphabet(urlAlphabet, 10)();
 
-const { as: Element = 'button', id = safeId, ...props } = Astro.props
+const { as: Tag = 'button', id = safeId, ...props } = Astro.props
 ---
 
-<Element id={id}>
+<Tag id={id}>
   <slot />
-</Element >
+</Tag >
 
 <script is:inline define:vars={{ props, safeId }}>
   const btn = document.querySelector(`#${safeId}`);
diff --git a/packages/astro/src/astro-components/unstyled/SignUpButton.astro b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
index f8c73aa42e9..46d9b7477bf 100644
--- a/packages/astro/src/astro-components/unstyled/SignUpButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
@@ -7,12 +7,12 @@ import { customAlphabet, urlAlphabet } from "nanoid";
 
 const safeId = customAlphabet(urlAlphabet, 10)();
 
-const { as: Element = 'button', id = safeId, ...props } = Astro.props
+const { as: Tag = 'button', id = safeId, ...props } = Astro.props
 ---
 
-<Element id={id}>
+<Tag id={id}>
   <slot />
-</Element >
+</Tag >
 
 <script is:inline define:vars={{ props, safeId }}>
   const btn = document.querySelector(`#${safeId}`);

From a596fd2cdb6fad5d9df99dd130f0b55ba82825df Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 4 Jul 2024 08:43:40 -0700
Subject: [PATCH 09/23] chore(astro): spread element props in dynamic tag

---
 .../src/astro-components/unstyled/SignInButton.astro      | 8 ++++++--
 .../src/astro-components/unstyled/SignOutButton.astro     | 8 ++++++--
 .../src/astro-components/unstyled/SignUpButton.astro      | 8 ++++++--
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/astro/src/astro-components/unstyled/SignInButton.astro b/packages/astro/src/astro-components/unstyled/SignInButton.astro
index 5fb2c596423..10366a79292 100644
--- a/packages/astro/src/astro-components/unstyled/SignInButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignInButton.astro
@@ -7,10 +7,14 @@ import { customAlphabet, urlAlphabet } from "nanoid";
 
 const safeId = customAlphabet(urlAlphabet, 10)();
 
-const { as: Tag = 'button', id = safeId, ...props } = Astro.props
+const {
+  as: Tag = 'button',
+  id = safeId,
+  ...props
+} = Astro.props
 ---
 
-<Tag id={id}>
+<Tag {...props} id={id}>
   <slot />
 </Tag >
 
diff --git a/packages/astro/src/astro-components/unstyled/SignOutButton.astro b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
index 88e528ef813..acf39490d3b 100644
--- a/packages/astro/src/astro-components/unstyled/SignOutButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
@@ -6,10 +6,14 @@ import { customAlphabet, urlAlphabet } from "nanoid";
 
 const safeId = customAlphabet(urlAlphabet, 10)();
 
-const { as: Tag = 'button', id = safeId, ...props } = Astro.props
+const {
+  as: Tag = 'button',
+  id = safeId,
+  ...props
+} = Astro.props
 ---
 
-<Tag id={id}>
+<Tag {...props} id={id}>
   <slot />
 </Tag >
 
diff --git a/packages/astro/src/astro-components/unstyled/SignUpButton.astro b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
index 46d9b7477bf..6d29a98cacf 100644
--- a/packages/astro/src/astro-components/unstyled/SignUpButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
@@ -7,10 +7,14 @@ import { customAlphabet, urlAlphabet } from "nanoid";
 
 const safeId = customAlphabet(urlAlphabet, 10)();
 
-const { as: Tag = 'button', id = safeId, ...props } = Astro.props
+const {
+  as: Tag = 'button',
+  id = safeId,
+  ...props
+} = Astro.props
 ---
 
-<Tag id={id}>
+<Tag {...props} id={id}>
   <slot />
 </Tag >
 

From f2472087a8e505a4ff7ebe9d895057f657a0ecd7 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 4 Jul 2024 08:52:10 -0700
Subject: [PATCH 10/23] chore(astro): make sure options dont merge with element
 props

---
 .../unstyled/SignInButton.astro               | 41 ++++++++---------
 .../unstyled/SignOutButton.astro              | 11 +++--
 .../unstyled/SignUpButton.astro               | 45 +++++++++----------
 3 files changed, 45 insertions(+), 52 deletions(-)

diff --git a/packages/astro/src/astro-components/unstyled/SignInButton.astro b/packages/astro/src/astro-components/unstyled/SignInButton.astro
index 10366a79292..3bcecd7650b 100644
--- a/packages/astro/src/astro-components/unstyled/SignInButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignInButton.astro
@@ -10,43 +10,40 @@ const safeId = customAlphabet(urlAlphabet, 10)();
 const {
   as: Tag = 'button',
   id = safeId,
-  ...props
+  forceRedirectUrl,
+  fallbackRedirectUrl,
+  signUpFallbackRedirectUrl,
+  signUpForceRedirectUrl,
+  mode,
+  ...elementProps
 } = Astro.props
+
+const signInOptions = {
+  forceRedirectUrl,
+  fallbackRedirectUrl,
+  signUpFallbackRedirectUrl,
+  signUpForceRedirectUrl,
+};
 ---
 
-<Tag {...props} id={id}>
+<Tag {...elementProps} id={id}>
   <slot />
 </Tag >
 
-<script is:inline define:vars={{ props, safeId }}>
+<script is:inline define:vars={{ signInOptions, mode, safeId }}>
   const btn = document.querySelector(`#${safeId}`);
 
   btn.addEventListener("click", () => {
-    const {
-      forceRedirectUrl,
-      fallbackRedirectUrl,
-      signUpFallbackRedirectUrl,
-      signUpForceRedirectUrl,
-      mode
-    } = props;
-
-    const opts = {
-      forceRedirectUrl,
-      fallbackRedirectUrl,
-      signUpFallbackRedirectUrl,
-      signUpForceRedirectUrl,
-    };
-
     const clerk = window.Clerk
 
     if (mode === 'modal') {
-      return clerk.openSignIn(opts);
+      return clerk.openSignIn(signInOptions);
     }
 
     return clerk.redirectToSignIn({
-      ...opts,
-      signInFallbackRedirectUrl: fallbackRedirectUrl,
-      signInForceRedirectUrl: forceRedirectUrl,
+      ...signInOptions,
+      signInFallbackRedirectUrl: signInOptions.fallbackRedirectUrl,
+      signInForceRedirectUrl: signInOptions.forceRedirectUrl,
     });
   });
 </script>
diff --git a/packages/astro/src/astro-components/unstyled/SignOutButton.astro b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
index acf39490d3b..fc2e945bb71 100644
--- a/packages/astro/src/astro-components/unstyled/SignOutButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
@@ -1,6 +1,6 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag; id?: string; mode?: 'redirect' | 'modal' }>
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag; id?: string; }>
 
 import { customAlphabet, urlAlphabet } from "nanoid";
 
@@ -9,20 +9,19 @@ const safeId = customAlphabet(urlAlphabet, 10)();
 const {
   as: Tag = 'button',
   id = safeId,
-  ...props
+  redirectUrl,
+  ...elementProps
 } = Astro.props
 ---
 
-<Tag {...props} id={id}>
+<Tag {...elementProps} id={id}>
   <slot />
 </Tag >
 
-<script is:inline define:vars={{ props, safeId }}>
+<script is:inline define:vars={{ redirectUrl, safeId }}>
   const btn = document.querySelector(`#${safeId}`);
 
   btn.addEventListener("click", () => {
-    const { redirectUrl } = props;
-
     window.Clerk.signOut({ redirectUrl })
   });
 </script>
diff --git a/packages/astro/src/astro-components/unstyled/SignUpButton.astro b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
index 6d29a98cacf..765a312d352 100644
--- a/packages/astro/src/astro-components/unstyled/SignUpButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
@@ -10,45 +10,42 @@ const safeId = customAlphabet(urlAlphabet, 10)();
 const {
   as: Tag = 'button',
   id = safeId,
-  ...props
+  fallbackRedirectUrl,
+  forceRedirectUrl,
+  signInFallbackRedirectUrl,
+  signInForceRedirectUrl,
+  mode,
+  unsafeMetadata,
+  ...elementProps
 } = Astro.props
+
+const signUpOptions = {
+  fallbackRedirectUrl,
+  forceRedirectUrl,
+  signInFallbackRedirectUrl,
+  signInForceRedirectUrl,
+  unsafeMetadata,
+}
 ---
 
-<Tag {...props} id={id}>
+<Tag {...elementProps} id={id}>
   <slot />
 </Tag >
 
-<script is:inline define:vars={{ props, safeId }}>
+<script is:inline define:vars={{ signUpOptions, mode, safeId }}>
   const btn = document.querySelector(`#${safeId}`);
 
   btn.addEventListener("click", () => {
-    const {
-      fallbackRedirectUrl,
-      forceRedirectUrl,
-      signInFallbackRedirectUrl,
-      signInForceRedirectUrl,
-      mode,
-      unsafeMetadata,
-    } = props;
-
-    const opts = {
-      fallbackRedirectUrl,
-      forceRedirectUrl,
-      signInFallbackRedirectUrl,
-      signInForceRedirectUrl,
-      unsafeMetadata,
-    };
-
     const clerk = window.Clerk
 
     if (mode === 'modal') {
-      return clerk.openSignUp(opts);
+      return clerk.openSignUp(signUpOptions);
     }
 
     return clerk.redirectToSignUp({
-      ...opts,
-      signUpFallbackRedirectUrl: fallbackRedirectUrl,
-      signUpForceRedirectUrl: forceRedirectUrl,
+      ...signUpOptions,
+      signUpFallbackRedirectUrl: signUpOptions.fallbackRedirectUrl,
+      signUpForceRedirectUrl: signUpOptions.forceRedirectUrl,
     });
   });
 </script>

From 9809f1db3e688004865a9c683eb98782593133af Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 4 Jul 2024 08:56:05 -0700
Subject: [PATCH 11/23] chore(astro): add missing redirectUrl prop type

---
 .../astro/src/astro-components/unstyled/SignOutButton.astro     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/astro/src/astro-components/unstyled/SignOutButton.astro b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
index fc2e945bb71..4d90de4b97c 100644
--- a/packages/astro/src/astro-components/unstyled/SignOutButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
@@ -1,6 +1,6 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag; id?: string; }>
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag; id?: string; redirectUrl?: string }>
 
 import { customAlphabet, urlAlphabet } from "nanoid";
 

From 2a79d56f131e9b4d39afc7651c07485b7935d2d3 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 4 Jul 2024 10:21:22 -0700
Subject: [PATCH 12/23] chore(astro): add default slot content

---
 packages/astro/src/astro-components/unstyled/SignInButton.astro | 2 +-
 .../astro/src/astro-components/unstyled/SignOutButton.astro     | 2 +-
 packages/astro/src/astro-components/unstyled/SignUpButton.astro | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/astro/src/astro-components/unstyled/SignInButton.astro b/packages/astro/src/astro-components/unstyled/SignInButton.astro
index 3bcecd7650b..61c5132b9ef 100644
--- a/packages/astro/src/astro-components/unstyled/SignInButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignInButton.astro
@@ -27,7 +27,7 @@ const signInOptions = {
 ---
 
 <Tag {...elementProps} id={id}>
-  <slot />
+  <slot>Sign in</slot>
 </Tag >
 
 <script is:inline define:vars={{ signInOptions, mode, safeId }}>
diff --git a/packages/astro/src/astro-components/unstyled/SignOutButton.astro b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
index 4d90de4b97c..ce5690e0726 100644
--- a/packages/astro/src/astro-components/unstyled/SignOutButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
@@ -15,7 +15,7 @@ const {
 ---
 
 <Tag {...elementProps} id={id}>
-  <slot />
+  <slot>Sign out</slot>
 </Tag >
 
 <script is:inline define:vars={{ redirectUrl, safeId }}>
diff --git a/packages/astro/src/astro-components/unstyled/SignUpButton.astro b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
index 765a312d352..1c65b954581 100644
--- a/packages/astro/src/astro-components/unstyled/SignUpButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
@@ -29,7 +29,7 @@ const signUpOptions = {
 ---
 
 <Tag {...elementProps} id={id}>
-  <slot />
+  <slot>Sign up</slot>
 </Tag >
 
 <script is:inline define:vars={{ signUpOptions, mode, safeId }}>

From 5b5272d9f29b0a12fc96d71974df514fbd02a080 Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Fri, 5 Jul 2024 09:25:09 -0700
Subject: [PATCH 13/23] chore(astro): add changeset

---
 .changeset/hungry-pumas-protect.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/hungry-pumas-protect.md

diff --git a/.changeset/hungry-pumas-protect.md b/.changeset/hungry-pumas-protect.md
new file mode 100644
index 00000000000..b2fbac09189
--- /dev/null
+++ b/.changeset/hungry-pumas-protect.md
@@ -0,0 +1,5 @@
+---
+"@clerk/astro": patch
+---
+
+Add unstyled authentication button components for Astro and React integration

From 62b269adbdd3a3f73dffecdfd4da9bb36af9873d Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Mon, 8 Jul 2024 12:18:46 -0700
Subject: [PATCH 14/23] chore(astro): add comments regarding duplicate
 functions

---
 packages/astro/src/client/react/types.ts  | 3 +++
 packages/astro/src/client/react/utils.tsx | 2 ++
 2 files changed, 5 insertions(+)

diff --git a/packages/astro/src/client/react/types.ts b/packages/astro/src/client/react/types.ts
index 04e11a5a3b6..3028beaaf5d 100644
--- a/packages/astro/src/client/react/types.ts
+++ b/packages/astro/src/client/react/types.ts
@@ -1,16 +1,19 @@
 import type { SignInProps, SignUpProps } from '@clerk/types';
 
+// TODO-SHARED: Duplicate from @clerk/clerk-react
 type ButtonProps = {
   mode?: 'redirect' | 'modal';
   children?: React.ReactNode;
 };
 
+// TODO-SHARED: Duplicate from @clerk/clerk-react
 export type SignInButtonProps = ButtonProps &
   Pick<
     SignInProps,
     'fallbackRedirectUrl' | 'forceRedirectUrl' | 'signUpForceRedirectUrl' | 'signUpFallbackRedirectUrl'
   >;
 
+// TODO-SHARED: Duplicate from @clerk/clerk-react
 export type SignUpButtonProps = {
   unsafeMetadata?: SignUpUnsafeMetadata;
 } & ButtonProps &
diff --git a/packages/astro/src/client/react/utils.tsx b/packages/astro/src/client/react/utils.tsx
index 789969b9c44..afe31a0d841 100644
--- a/packages/astro/src/client/react/utils.tsx
+++ b/packages/astro/src/client/react/utils.tsx
@@ -38,6 +38,7 @@ export type WithClerkProp<T = unknown> = T & {
   clerk: LoadedClerk | undefined | null;
 };
 
+// TODO-SHARED: Duplicate from @clerk/clerk-react
 export const assertSingleChild =
   (children: React.ReactNode) =>
   (name: 'SignInButton' | 'SignUpButton' | 'SignOutButton' | 'SignInWithMetamaskButton') => {
@@ -48,6 +49,7 @@ export const assertSingleChild =
     }
   };
 
+// TODO-SHARED: Duplicate from @clerk/clerk-react
 export const normalizeWithDefaultValue = (children: React.ReactNode | undefined, defaultText: string) => {
   if (!children) {
     children = defaultText;

From d4055259e5b81cd30f931c0e8541e4e3275d87ef Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Mon, 8 Jul 2024 12:19:19 -0700
Subject: [PATCH 15/23] chore(astro): add comments regarding duplicate
 functions

---
 packages/astro/src/client/react/utils.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/astro/src/client/react/utils.tsx b/packages/astro/src/client/react/utils.tsx
index afe31a0d841..21b9f33ebb4 100644
--- a/packages/astro/src/client/react/utils.tsx
+++ b/packages/astro/src/client/react/utils.tsx
@@ -60,6 +60,7 @@ export const normalizeWithDefaultValue = (children: React.ReactNode | undefined,
   return children;
 };
 
+// TODO-SHARED: Duplicate from @clerk/clerk-react
 export const safeExecute =
   (cb: unknown) =>
   (...args: any) => {

From 45ae2886df8b26caf246b135c2d5f117aea4911f Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Mon, 8 Jul 2024 12:29:47 -0700
Subject: [PATCH 16/23] chore(astro): use data attribute in referencing
 unstyled components

chore(astro): use data attribute in referencing unstyled components
---
 .../astro/src/astro-components/unstyled/SignInButton.astro | 7 +++----
 .../src/astro-components/unstyled/SignOutButton.astro      | 7 +++----
 .../astro/src/astro-components/unstyled/SignUpButton.astro | 7 +++----
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/astro/src/astro-components/unstyled/SignInButton.astro b/packages/astro/src/astro-components/unstyled/SignInButton.astro
index 61c5132b9ef..51f8a701fa7 100644
--- a/packages/astro/src/astro-components/unstyled/SignInButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignInButton.astro
@@ -1,7 +1,7 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
 import type { SignInProps } from "@clerk/types";
-type Props<Tag extends HTMLTag> = Polymorphic<SignInProps & { as: Tag; id?: string; mode?: 'redirect' | 'modal' }>
+type Props<Tag extends HTMLTag> = Polymorphic<SignInProps & { as: Tag; mode?: 'redirect' | 'modal' }>
 
 import { customAlphabet, urlAlphabet } from "nanoid";
 
@@ -9,7 +9,6 @@ const safeId = customAlphabet(urlAlphabet, 10)();
 
 const {
   as: Tag = 'button',
-  id = safeId,
   forceRedirectUrl,
   fallbackRedirectUrl,
   signUpFallbackRedirectUrl,
@@ -26,12 +25,12 @@ const signInOptions = {
 };
 ---
 
-<Tag {...elementProps} id={id}>
+<Tag {...elementProps} data-clerk-unstyled-id={safeId}>
   <slot>Sign in</slot>
 </Tag >
 
 <script is:inline define:vars={{ signInOptions, mode, safeId }}>
-  const btn = document.querySelector(`#${safeId}`);
+  const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
 
   btn.addEventListener("click", () => {
     const clerk = window.Clerk
diff --git a/packages/astro/src/astro-components/unstyled/SignOutButton.astro b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
index ce5690e0726..dd8439c6dbf 100644
--- a/packages/astro/src/astro-components/unstyled/SignOutButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
@@ -1,6 +1,6 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag; id?: string; redirectUrl?: string }>
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag; redirectUrl?: string }>
 
 import { customAlphabet, urlAlphabet } from "nanoid";
 
@@ -8,18 +8,17 @@ const safeId = customAlphabet(urlAlphabet, 10)();
 
 const {
   as: Tag = 'button',
-  id = safeId,
   redirectUrl,
   ...elementProps
 } = Astro.props
 ---
 
-<Tag {...elementProps} id={id}>
+<Tag {...elementProps} data-clerk-unstyled-id={safeId}>
   <slot>Sign out</slot>
 </Tag >
 
 <script is:inline define:vars={{ redirectUrl, safeId }}>
-  const btn = document.querySelector(`#${safeId}`);
+  const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
 
   btn.addEventListener("click", () => {
     window.Clerk.signOut({ redirectUrl })
diff --git a/packages/astro/src/astro-components/unstyled/SignUpButton.astro b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
index 1c65b954581..2c5d7590f97 100644
--- a/packages/astro/src/astro-components/unstyled/SignUpButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
@@ -1,7 +1,7 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
 import type { SignUpProps } from "@clerk/types";
-type Props<Tag extends HTMLTag> = Polymorphic<SignUpProps & { as: Tag; id?: string; mode?: 'redirect' | 'modal' }>
+type Props<Tag extends HTMLTag> = Polymorphic<SignUpProps & { as: Tag; mode?: 'redirect' | 'modal' }>
 
 import { customAlphabet, urlAlphabet } from "nanoid";
 
@@ -9,7 +9,6 @@ const safeId = customAlphabet(urlAlphabet, 10)();
 
 const {
   as: Tag = 'button',
-  id = safeId,
   fallbackRedirectUrl,
   forceRedirectUrl,
   signInFallbackRedirectUrl,
@@ -28,12 +27,12 @@ const signUpOptions = {
 }
 ---
 
-<Tag {...elementProps} id={id}>
+<Tag {...elementProps} data-clerk-unstyled-id={safeId}>
   <slot>Sign up</slot>
 </Tag >
 
 <script is:inline define:vars={{ signUpOptions, mode, safeId }}>
-  const btn = document.querySelector(`#${safeId}`);
+  const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
 
   btn.addEventListener("click", () => {
     const clerk = window.Clerk

From 0754f045ddfe20d16c730a2bcfe457538a2efadc Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Mon, 8 Jul 2024 19:04:39 -0700
Subject: [PATCH 17/23] chore(astro): Set default Prop value for Polymorphic
 types

---
 packages/astro/src/astro-components/unstyled/SignInButton.astro | 2 +-
 .../astro/src/astro-components/unstyled/SignOutButton.astro     | 2 +-
 packages/astro/src/astro-components/unstyled/SignUpButton.astro | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/astro/src/astro-components/unstyled/SignInButton.astro b/packages/astro/src/astro-components/unstyled/SignInButton.astro
index 51f8a701fa7..df78768bede 100644
--- a/packages/astro/src/astro-components/unstyled/SignInButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignInButton.astro
@@ -1,7 +1,7 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
 import type { SignInProps } from "@clerk/types";
-type Props<Tag extends HTMLTag> = Polymorphic<SignInProps & { as: Tag; mode?: 'redirect' | 'modal' }>
+type Props<Tag extends HTMLTag = HTMLTag> = Polymorphic<SignInProps & { as: Tag; mode?: 'redirect' | 'modal' }>
 
 import { customAlphabet, urlAlphabet } from "nanoid";
 
diff --git a/packages/astro/src/astro-components/unstyled/SignOutButton.astro b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
index dd8439c6dbf..97f1996c1ac 100644
--- a/packages/astro/src/astro-components/unstyled/SignOutButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
@@ -1,6 +1,6 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag; redirectUrl?: string }>
+type Props<Tag extends HTMLTag = HTMLTag> = Polymorphic<{ as: Tag; redirectUrl?: string }>
 
 import { customAlphabet, urlAlphabet } from "nanoid";
 
diff --git a/packages/astro/src/astro-components/unstyled/SignUpButton.astro b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
index 2c5d7590f97..a32b074c806 100644
--- a/packages/astro/src/astro-components/unstyled/SignUpButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
@@ -1,7 +1,7 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
 import type { SignUpProps } from "@clerk/types";
-type Props<Tag extends HTMLTag> = Polymorphic<SignUpProps & { as: Tag; mode?: 'redirect' | 'modal' }>
+type Props<Tag extends HTMLTag = HTMLTag> = Polymorphic<SignUpProps & { as: Tag; mode?: 'redirect' | 'modal' }>
 
 import { customAlphabet, urlAlphabet } from "nanoid";
 

From 209e67ff30b1ec7c88b7a78814b867aa04a847bb Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Tue, 9 Jul 2024 00:01:10 +0300
Subject: [PATCH 18/23] fix(astro): Add build step as dependency for e2e tests
 (#3677)

---
 .changeset/violet-spies-eat.md | 2 ++
 turbo.json                     | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/violet-spies-eat.md

diff --git a/.changeset/violet-spies-eat.md b/.changeset/violet-spies-eat.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/violet-spies-eat.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/turbo.json b/turbo.json
index fe8035f5b7f..0ae0a803a53 100644
--- a/turbo.json
+++ b/turbo.json
@@ -177,7 +177,7 @@
       "outputLogs": "new-only"
     },
     "//#test:integration:astro": {
-      "dependsOn": ["^@clerk/clerk-js#build", "^@clerk/backend#build"],
+      "dependsOn": ["^@clerk/clerk-js#build", "^@clerk/backend#build", "^@clerk/astro#build"],
       "env": ["CLEANUP", "DEBUG", "E2E_*", "INTEGRATION_INSTANCE_KEYS"],
       "inputs": ["integration/**"],
       "outputLogs": "new-only"

From f4a150044c08260a5d8ff2262f3a4a3b338c99e4 Mon Sep 17 00:00:00 2001
From: Lennart <lekoarts@gmail.com>
Date: Tue, 9 Jul 2024 08:16:12 +0200
Subject: [PATCH 19/23] fix(elements): Correct TS types for verification
 machine (#3671)

---
 .changeset/ninety-geese-drop.md               |  2 +
 .../sign-in/utils/starting-factors.ts         | 17 +++----
 .../machines/sign-in/verification.machine.ts  | 46 +++++++------------
 .../machines/sign-in/verification.types.ts    |  7 +--
 .../src/react/sign-in/verifications.tsx       |  6 +--
 5 files changed, 32 insertions(+), 46 deletions(-)
 create mode 100644 .changeset/ninety-geese-drop.md

diff --git a/.changeset/ninety-geese-drop.md b/.changeset/ninety-geese-drop.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/ninety-geese-drop.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/elements/src/internals/machines/sign-in/utils/starting-factors.ts b/packages/elements/src/internals/machines/sign-in/utils/starting-factors.ts
index 0ee87be6375..5903b37f7aa 100644
--- a/packages/elements/src/internals/machines/sign-in/utils/starting-factors.ts
+++ b/packages/elements/src/internals/machines/sign-in/utils/starting-factors.ts
@@ -1,7 +1,7 @@
 // These utilities are ported from: packages/clerk-js/src/ui/components/SignIn/utils.ts
 // They should be functionally identical.
 import { isWebAuthnSupported } from '@clerk/shared/webauthn';
-import type { PreferredSignInStrategy, SignInFactor } from '@clerk/types';
+import type { PreferredSignInStrategy, SignInFactor, SignInFirstFactor, SignInSecondFactor } from '@clerk/types';
 
 const ORDER_WHEN_PASSWORD_PREFERRED = ['passkey', 'password', 'email_link', 'email_code', 'phone_code'] as const;
 const ORDER_WHEN_OTP_PREFERRED = ['email_link', 'email_code', 'phone_code', 'passkey', 'password'] as const;
@@ -14,10 +14,10 @@ const findFactorForIdentifier = (i: string | null) => (f: SignInFactor) => {
 // The algorithm can be found at
 // https://www.notion.so/clerkdev/Implement-sign-in-alt-methods-e6e60ffb644645b3a0553b50556468ce
 export function determineStartingSignInFactor(
-  firstFactors: SignInFactor[],
+  firstFactors: SignInFirstFactor[],
   identifier: string | null,
   preferredSignInStrategy?: PreferredSignInStrategy,
-): SignInFactor | null {
+) {
   if (!firstFactors || firstFactors.length === 0) {
     return null;
   }
@@ -27,7 +27,7 @@ export function determineStartingSignInFactor(
     : determineStrategyWhenOTPIsPreferred(firstFactors, identifier);
 }
 
-function findPasskeyStrategy(factors: SignInFactor[]): SignInFactor | null {
+function findPasskeyStrategy(factors: SignInFirstFactor[]) {
   if (isWebAuthnSupported()) {
     const passkeyFactor = factors.find(({ strategy }) => strategy === 'passkey');
 
@@ -38,10 +38,7 @@ function findPasskeyStrategy(factors: SignInFactor[]): SignInFactor | null {
   return null;
 }
 
-function determineStrategyWhenPasswordIsPreferred(
-  factors: SignInFactor[],
-  identifier: string | null,
-): SignInFactor | null {
+function determineStrategyWhenPasswordIsPreferred(factors: SignInFirstFactor[], identifier: string | null) {
   const passkeyFactor = findPasskeyStrategy(factors);
   if (passkeyFactor) {
     return passkeyFactor;
@@ -69,7 +66,7 @@ function determineStrategyWhenPasswordIsPreferred(
   return null;
 }
 
-function determineStrategyWhenOTPIsPreferred(factors: SignInFactor[], identifier: string | null): SignInFactor | null {
+function determineStrategyWhenOTPIsPreferred(factors: SignInFirstFactor[], identifier: string | null) {
   const passkeyFactor = findPasskeyStrategy(factors);
   if (passkeyFactor) {
     return passkeyFactor;
@@ -97,7 +94,7 @@ function determineStrategyWhenOTPIsPreferred(factors: SignInFactor[], identifier
 }
 
 // The priority of second factors is: TOTP -> Phone code -> any other factor
-export function determineStartingSignInSecondFactor(secondFactors: SignInFactor[]): SignInFactor | null {
+export function determineStartingSignInSecondFactor(secondFactors: SignInSecondFactor[]) {
   if (!secondFactors || secondFactors.length === 0) {
     return null;
   }
diff --git a/packages/elements/src/internals/machines/sign-in/verification.machine.ts b/packages/elements/src/internals/machines/sign-in/verification.machine.ts
index e0dacac80be..b941385be56 100644
--- a/packages/elements/src/internals/machines/sign-in/verification.machine.ts
+++ b/packages/elements/src/internals/machines/sign-in/verification.machine.ts
@@ -5,9 +5,9 @@ import type {
   PasswordAttempt,
   PhoneCodeAttempt,
   PrepareFirstFactorParams,
+  PrepareSecondFactorParams,
   ResetPasswordEmailCodeAttempt,
   ResetPasswordPhoneCodeAttempt,
-  SignInFactor,
   SignInFirstFactor,
   SignInResource,
   SignInSecondFactor,
@@ -19,7 +19,7 @@ import { assign, fromPromise, log, sendTo, setup } from 'xstate';
 import { RESENDABLE_COUNTDOWN_DEFAULT } from '~/internals/constants';
 import { ClerkElementsRuntimeError } from '~/internals/errors';
 import type { FormFields } from '~/internals/machines/form';
-import type { WithParams } from '~/internals/machines/shared';
+import type { SignInStrategyName, WithParams } from '~/internals/machines/shared';
 import { sendToLoading } from '~/internals/machines/shared';
 import { determineStartingSignInFactor, determineStartingSignInSecondFactor } from '~/internals/machines/sign-in/utils';
 import { assertActorEventError, assertIsDefined } from '~/internals/machines/utils/assert';
@@ -35,11 +35,11 @@ export type DetermineStartingFactorInput = {
   parent: SignInRouterMachineActorRef;
 };
 
-export type PrepareFirstFactorInput = WithParams<SignInFirstFactor | null> & {
+export type PrepareFirstFactorInput = WithParams<PrepareFirstFactorParams> & {
   parent: SignInRouterMachineActorRef;
   resendable: boolean;
 };
-export type PrepareSecondFactorInput = WithParams<SignInSecondFactor | null> & {
+export type PrepareSecondFactorInput = WithParams<PrepareSecondFactorParams> & {
   parent: SignInRouterMachineActorRef;
   resendable: boolean;
 };
@@ -67,8 +67,8 @@ export const SignInVerificationMachineId = 'SignInVerification';
 
 const SignInVerificationMachine = setup({
   actors: {
-    determineStartingFactor: fromPromise<SignInFactor | null, DetermineStartingFactorInput>(() =>
-      Promise.reject(new ClerkElementsRuntimeError('Actor `determineStartingFactor` must be overridden')),
+    determineStartingFactor: fromPromise<SignInFirstFactor | SignInSecondFactor | null, DetermineStartingFactorInput>(
+      () => Promise.reject(new ClerkElementsRuntimeError('Actor `determineStartingFactor` must be overridden')),
     ),
     prepare: fromPromise<SignInResource, PrepareFirstFactorInput | PrepareSecondFactorInput>(() =>
       Promise.reject(new ClerkElementsRuntimeError('Actor `prepare` must be overridden')),
@@ -96,10 +96,7 @@ const SignInVerificationMachine = setup({
       // Only show these warnings in development!
       if (process.env.NODE_ENV === 'development') {
         if (
-          !clerk.client.signIn.supportedFirstFactors.every(factor =>
-            // TODO: These "as SignInFactor" assertions are incorrect, factor.strategy is SignInFactor['strategy']. This needs to be fixed together with SignInVerificationStrategyRegisterEvent and SignInStrategy React component
-            context.registeredStrategies.has(factor.strategy as unknown as SignInFactor),
-          )
+          !clerk.client.signIn.supportedFirstFactors.every(factor => context.registeredStrategies.has(factor.strategy))
         ) {
           console.warn(
             `Clerk: Your instance is configured to support these strategies: ${clerk.client.signIn.supportedFirstFactors
@@ -112,9 +109,7 @@ const SignInVerificationMachine = setup({
 
         if (
           clerk.client.signIn.supportedSecondFactors &&
-          !clerk.client.signIn.supportedSecondFactors.every(factor =>
-            context.registeredStrategies.has(factor.strategy as unknown as SignInFactor),
-          )
+          !clerk.client.signIn.supportedSecondFactors.every(factor => context.registeredStrategies.has(factor.strategy))
         ) {
           console.warn(
             `Clerk: Your instance is configured to support these 2FA strategies: ${clerk.client.signIn.supportedSecondFactors
@@ -125,14 +120,9 @@ const SignInVerificationMachine = setup({
           );
         }
 
-        // TODO: These "as SignInFactor" assertions are incorrect, factor.strategy is SignInFactor['strategy']. This needs to be fixed together with SignInVerificationStrategyRegisterEvent and SignInStrategy React component
-        // This type should also probably be SignInFirstFactor['strategy'] instead of SignInFactor['strategy'] !!!
         const strategiesUsedButNotActivated = Array.from(context.registeredStrategies).filter(
-          strategy =>
-            !clerk.client.signIn.supportedFirstFactors.some(
-              supported => (supported.strategy as unknown as SignInFactor) === strategy,
-            ),
-        ) as unknown as Array<SignInFactor['strategy']>;
+          strategy => !clerk.client.signIn.supportedFirstFactors.some(supported => supported.strategy === strategy),
+        );
 
         if (strategiesUsedButNotActivated.length > 0) {
           console.warn(
@@ -140,11 +130,7 @@ const SignInVerificationMachine = setup({
           );
         }
 
-        if (
-          context.currentFactor?.strategy &&
-          // TODO: These "as SignInFactor" assertions are incorrect, factor.strategy is SignInFactor['strategy']. This needs to be fixed together with SignInVerificationStrategyRegisterEvent and SignInStrategy React component
-          !context.registeredStrategies.has(context.currentFactor?.strategy as unknown as SignInFactor)
-        ) {
+        if (context.currentFactor?.strategy && !context.registeredStrategies.has(context.currentFactor?.strategy)) {
           throw new ClerkElementsRuntimeError(
             `Your sign-in attempt is missing a ${context.currentFactor?.strategy} strategy. Make sure <Strategy name="${context.currentFactor?.strategy}"> is rendered in your flow. More information: https://clerk.com/docs/elements/reference/sign-in#strategy`,
           );
@@ -195,7 +181,7 @@ const SignInVerificationMachine = setup({
     formRef: input.formRef,
     loadingStep: 'verifications',
     parent: input.parent,
-    registeredStrategies: new Set<SignInFactor>(),
+    registeredStrategies: new Set<SignInStrategyName>(),
     resendable: false,
     resendableAfter: RESENDABLE_COUNTDOWN_DEFAULT,
   }),
@@ -250,7 +236,7 @@ const SignInVerificationMachine = setup({
         input: ({ context }) => ({
           parent: context.parent,
           resendable: context.resendable,
-          params: context.currentFactor as SignInFirstFactor | null,
+          params: context.currentFactor as PrepareFirstFactorParams,
         }),
         onDone: {
           actions: 'resendableReset',
@@ -348,7 +334,7 @@ const SignInVerificationMachine = setup({
         src: 'attempt',
         input: ({ context }) => ({
           parent: context.parent,
-          currentFactor: context.currentFactor as SignInFirstFactor,
+          currentFactor: context.currentFactor as SignInFirstFactor | null,
           fields: context.formRef.getSnapshot().context.fields,
         }),
         onDone: {
@@ -380,7 +366,7 @@ export const SignInFirstFactorMachine = SignInVerificationMachine.provide({
       );
     }),
     prepare: fromPromise(async ({ input }) => {
-      const { params, parent, resendable } = input;
+      const { params, parent, resendable } = input as PrepareFirstFactorInput;
       const clerk = parent.getSnapshot().context.clerk;
 
       // If a prepare call has already been fired recently, don't re-send
@@ -393,7 +379,7 @@ export const SignInFirstFactorMachine = SignInVerificationMachine.provide({
 
       assertIsDefined(params, 'First factor params');
 
-      return await clerk.client.signIn.prepareFirstFactor(params as PrepareFirstFactorParams);
+      return await clerk.client.signIn.prepareFirstFactor(params);
     }),
     attempt: fromPromise(async ({ input }) => {
       const { currentFactor, fields, parent } = input as AttemptFirstFactorInput;
diff --git a/packages/elements/src/internals/machines/sign-in/verification.types.ts b/packages/elements/src/internals/machines/sign-in/verification.types.ts
index 2762ff82713..191c6f2e979 100644
--- a/packages/elements/src/internals/machines/sign-in/verification.types.ts
+++ b/packages/elements/src/internals/machines/sign-in/verification.types.ts
@@ -3,6 +3,7 @@ import type { SignInFactor } from '@clerk/types';
 import type { ActorRefFrom, ErrorActorEvent } from 'xstate';
 
 import type { FormMachine } from '~/internals/machines/form';
+import type { SignInStrategyName } from '~/internals/machines/shared';
 
 import type { SignInRouterMachineActorRef } from './router.types';
 
@@ -21,8 +22,8 @@ export type SignInVerificationTags =
 export type SignInVerificationSubmitEvent = { type: 'SUBMIT' };
 export type SignInVerificationFactorUpdateEvent = { type: 'STRATEGY.UPDATE'; factor: SignInFactor | undefined };
 export type SignInVerificationRetryEvent = { type: 'RETRY' };
-export type SignInVerificationStrategyRegisterEvent = { type: 'STRATEGY.REGISTER'; factor: SignInFactor };
-export type SignInVerificationStrategyUnregisterEvent = { type: 'STRATEGY.UNREGISTER'; factor: SignInFactor };
+export type SignInVerificationStrategyRegisterEvent = { type: 'STRATEGY.REGISTER'; factor: SignInStrategyName };
+export type SignInVerificationStrategyUnregisterEvent = { type: 'STRATEGY.UNREGISTER'; factor: SignInStrategyName };
 
 export type SignInVerificationEvents =
   | ErrorActorEvent
@@ -47,7 +48,7 @@ export interface SignInVerificationContext {
   formRef: ActorRefFrom<typeof FormMachine>;
   parent: SignInRouterMachineActorRef;
   loadingStep: 'verifications';
-  registeredStrategies: Set<SignInFactor>;
+  registeredStrategies: Set<SignInStrategyName>;
   resendable: boolean;
   resendableAfter: number;
 }
diff --git a/packages/elements/src/react/sign-in/verifications.tsx b/packages/elements/src/react/sign-in/verifications.tsx
index 93282bac20c..c3e971b8978 100644
--- a/packages/elements/src/react/sign-in/verifications.tsx
+++ b/packages/elements/src/react/sign-in/verifications.tsx
@@ -1,4 +1,4 @@
-import type { SignInFactor, SignInStrategy as ClerkSignInStrategy } from '@clerk/types';
+import type { SignInStrategy as ClerkSignInStrategy } from '@clerk/types';
 import { useSelector } from '@xstate/react';
 import { useCallback, useEffect } from 'react';
 import type { ActorRefFrom, SnapshotFrom } from 'xstate';
@@ -76,12 +76,12 @@ export function SignInStrategy({ children, name }: SignInStrategyProps) {
 
   useEffect(() => {
     if (factorCtx) {
-      factorCtx.send({ type: 'STRATEGY.REGISTER', factor: name as unknown as SignInFactor });
+      factorCtx.send({ type: 'STRATEGY.REGISTER', factor: name });
     }
 
     return () => {
       if (factorCtx?.getSnapshot().status === 'active') {
-        factorCtx.send({ type: 'STRATEGY.UNREGISTER', factor: name as unknown as SignInFactor });
+        factorCtx.send({ type: 'STRATEGY.UNREGISTER', factor: name });
       }
     };
   }, [factorCtx, name]);

From 6c609c7bd130dde30e701910bbecb569646bbb5b Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Tue, 9 Jul 2024 05:42:06 -0700
Subject: [PATCH 20/23] chore(astro): Optimize stream modification (#3673)

Co-authored-by: panteliselef <panteliselef@outlook.com>
---
 .changeset/olive-foxes-own.md                 |  5 ++
 packages/astro/src/server/clerk-middleware.ts | 68 ++++++++++---------
 2 files changed, 41 insertions(+), 32 deletions(-)
 create mode 100644 .changeset/olive-foxes-own.md

diff --git a/.changeset/olive-foxes-own.md b/.changeset/olive-foxes-own.md
new file mode 100644
index 00000000000..5d411d8e05a
--- /dev/null
+++ b/.changeset/olive-foxes-own.md
@@ -0,0 +1,5 @@
+---
+"@clerk/astro": patch
+---
+
+Improve stream processing performance
diff --git a/packages/astro/src/server/clerk-middleware.ts b/packages/astro/src/server/clerk-middleware.ts
index 753df636cd8..be08f6642af 100644
--- a/packages/astro/src/server/clerk-middleware.ts
+++ b/packages/astro/src/server/clerk-middleware.ts
@@ -228,6 +228,16 @@ function decorateAstroLocal(req: Request, context: APIContext, requestState: Req
   context.locals.currentUser = createCurrentUser(req, context);
 }
 
+/**
+ * Find the index of the closing head tag in the chunk.
+ *
+ * Note: This implementation uses a simple approach that works for most of our
+ * current use cases.
+ */
+function findClosingHeadTagIndex(chunk: Uint8Array, endHeadTag: Uint8Array) {
+  return chunk.findIndex((_, i) => endHeadTag.every((value, j) => value === chunk[i + j]));
+}
+
 async function decorateRequest(
   locals: APIContext['locals'],
   res: Response,
@@ -245,48 +255,42 @@ async function decorateRequest(
    * without sucrificing DX and having developers wrap each page with a Layout that would handle this.
    */
   if (res.headers.get('content-type') === 'text/html') {
-    const reader = res.body?.getReader();
-    const stream = new ReadableStream({
-      async start(controller) {
-        let { value, done } = await reader!.read();
-        const encoder = new TextEncoder();
-        const decoder = new TextDecoder();
-        while (!done) {
-          const decodedValue = decoder.decode(value);
+    const encoder = new TextEncoder();
+    const closingHeadTag = encoder.encode('</head>');
+    const clerkAstroData = encoder.encode(
+      `<script id="__CLERK_ASTRO_DATA__" type="application/json">${JSON.stringify(locals.auth())}</script>\n`,
+    );
+    const clerkSafeEnvVariables = encoder.encode(
+      `<script id="__CLERK_ASTRO_SAFE_VARS__" type="application/json">${JSON.stringify(getClientSafeEnv(locals))}</script>\n`,
+    );
+    const hotloadScript = encoder.encode(buildClerkHotloadScript(locals));
+
+    const stream = res.body!.pipeThrough(
+      new TransformStream({
+        transform(chunk, controller) {
+          const index = findClosingHeadTagIndex(chunk, closingHeadTag);
+          const isClosingHeadTagFound = index !== -1;
 
           /**
            * Hijack html response to position `__CLERK_ASTRO_DATA__` before the closing `head` html tag
            */
-          if (decodedValue.includes('</head>')) {
-            const [p1, p2] = decodedValue.split('</head>');
-            controller.enqueue(encoder.encode(p1));
-            controller.enqueue(
-              encoder.encode(
-                `<script id="__CLERK_ASTRO_DATA__" type="application/json">${JSON.stringify(locals.auth())}</script>\n`,
-              ),
-            );
-
-            controller.enqueue(
-              encoder.encode(
-                `<script id="__CLERK_ASTRO_SAFE_VARS__" type="application/json">${JSON.stringify(getClientSafeEnv(locals))}</script>\n`,
-              ),
-            );
+          if (isClosingHeadTagFound) {
+            controller.enqueue(chunk.slice(0, index));
+            controller.enqueue(clerkAstroData);
+            controller.enqueue(clerkSafeEnvVariables);
 
             if (__HOTLOAD__) {
-              controller.enqueue(encoder.encode(buildClerkHotloadScript(locals)));
+              controller.enqueue(hotloadScript);
             }
 
-            controller.enqueue(encoder.encode('</head>'));
-            controller.enqueue(encoder.encode(p2));
+            controller.enqueue(closingHeadTag);
+            controller.enqueue(chunk.slice(index + closingHeadTag.length));
           } else {
-            controller.enqueue(value);
+            controller.enqueue(chunk);
           }
-
-          ({ value, done } = await reader!.read());
-        }
-        controller.close();
-      },
-    });
+        },
+      }),
+    );
 
     const modifiedResponse = new Response(stream, {
       status: res.status,

From 380c32912948bbe9fe91ef071c25e163d92dc073 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Tue, 9 Jul 2024 09:46:41 -0700
Subject: [PATCH 21/23] chore(astro): Add session id prop to sign out button

---
 .../src/astro-components/unstyled/SignOutButton.astro  | 10 ++++++----
 packages/astro/src/client/react/SignOutButton.tsx      | 10 ++++------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/astro/src/astro-components/unstyled/SignOutButton.astro b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
index 97f1996c1ac..13242cb0ee2 100644
--- a/packages/astro/src/astro-components/unstyled/SignOutButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
@@ -1,6 +1,7 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-type Props<Tag extends HTMLTag = HTMLTag> = Polymorphic<{ as: Tag; redirectUrl?: string }>
+import type { SignOutOptions } from '@clerk/types';
+type Props<Tag extends HTMLTag = HTMLTag> = Polymorphic<{ as: Tag; } & SignOutOptions>
 
 import { customAlphabet, urlAlphabet } from "nanoid";
 
@@ -8,7 +9,8 @@ const safeId = customAlphabet(urlAlphabet, 10)();
 
 const {
   as: Tag = 'button',
-  redirectUrl,
+  redirectUrl = '/',
+  sessionId,
   ...elementProps
 } = Astro.props
 ---
@@ -17,10 +19,10 @@ const {
   <slot>Sign out</slot>
 </Tag >
 
-<script is:inline define:vars={{ redirectUrl, safeId }}>
+<script is:inline define:vars={{ redirectUrl, sessionId, safeId }}>
   const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
 
   btn.addEventListener("click", () => {
-    window.Clerk.signOut({ redirectUrl })
+    window.Clerk.signOut({ redirectUrl, sessionId })
   });
 </script>
diff --git a/packages/astro/src/client/react/SignOutButton.tsx b/packages/astro/src/client/react/SignOutButton.tsx
index ce9728a62d5..c61a3eb527b 100644
--- a/packages/astro/src/client/react/SignOutButton.tsx
+++ b/packages/astro/src/client/react/SignOutButton.tsx
@@ -4,22 +4,20 @@ import React from 'react';
 import type { WithClerkProp } from './utils';
 import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
 
-export type SignOutButtonProps = {
-  redirectUrl?: string;
-  signOutOptions?: SignOutOptions;
+export type SignOutButtonProps = SignOutOptions & {
   children?: React.ReactNode;
 };
 
 export const SignOutButton = withClerk(
   ({ clerk, children, ...props }: React.PropsWithChildren<WithClerkProp<SignOutButtonProps>>) => {
-    const { redirectUrl = '/', signOutOptions, ...rest } = props;
+    const { redirectUrl = '/', sessionId, ...rest } = props;
 
     children = normalizeWithDefaultValue(children, 'Sign out');
     const child = assertSingleChild(children)('SignOutButton');
 
-    const clickHandler = () => clerk?.signOut({ redirectUrl });
+    const clickHandler = () => clerk?.signOut({ redirectUrl, sessionId });
     const wrappedChildClickHandler: React.MouseEventHandler = async e => {
-      await safeExecute((child as any).props.onClick)(e);
+      await safeExecute(child.props.onClick)(e);
       return clickHandler();
     };
 

From 61db931d7d00a1479490c55bbb59f4c106338ec6 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Tue, 9 Jul 2024 10:52:17 -0700
Subject: [PATCH 22/23] chore(astro): Remove wrapped unstyled react components

---
 .../src/astro-components/react/SignInButton.astro | 15 ---------------
 .../astro-components/react/SignOutButton.astro    | 15 ---------------
 .../src/astro-components/react/SignUpButton.astro | 15 ---------------
 .../astro/src/astro-components/react/index.ts     |  6 ------
 4 files changed, 51 deletions(-)
 delete mode 100644 packages/astro/src/astro-components/react/SignInButton.astro
 delete mode 100644 packages/astro/src/astro-components/react/SignOutButton.astro
 delete mode 100644 packages/astro/src/astro-components/react/SignUpButton.astro

diff --git a/packages/astro/src/astro-components/react/SignInButton.astro b/packages/astro/src/astro-components/react/SignInButton.astro
deleted file mode 100644
index b87315d4b07..00000000000
--- a/packages/astro/src/astro-components/react/SignInButton.astro
+++ /dev/null
@@ -1,15 +0,0 @@
----
-import type { SignInButtonProps } from "@clerk/astro/client/react";
-type Props = SignInButtonProps
-
-import { SignInButton as SignInButtonReact } from "@clerk/astro/client/react";
-
-const props = {
-  ...Astro.props
-}
----
-
-<SignInButtonReact
-  client:load
-  {...props}
-/>
diff --git a/packages/astro/src/astro-components/react/SignOutButton.astro b/packages/astro/src/astro-components/react/SignOutButton.astro
deleted file mode 100644
index 3b4602684cb..00000000000
--- a/packages/astro/src/astro-components/react/SignOutButton.astro
+++ /dev/null
@@ -1,15 +0,0 @@
----
-import type { SignOutButtonProps } from "@clerk/astro/client/react";
-type Props = SignOutButtonProps
-
-import { SignOutButton as SignOutButtonReact } from "@clerk/astro/client/react";
-
-const props = {
-  ...Astro.props
-}
----
-
-<SignOutButtonReact
-  client:load
-  {...props}
-/>
diff --git a/packages/astro/src/astro-components/react/SignUpButton.astro b/packages/astro/src/astro-components/react/SignUpButton.astro
deleted file mode 100644
index 01870f3d964..00000000000
--- a/packages/astro/src/astro-components/react/SignUpButton.astro
+++ /dev/null
@@ -1,15 +0,0 @@
----
-import type { SignUpButtonProps } from "@clerk/astro/client/react";
-type Props = SignUpButtonProps
-
-import { SignUpButton as SignUpButtonReact } from "@clerk/astro/client/react";
-
-const props = {
-  ...Astro.props
-}
----
-
-<SignUpButtonReact
-  client:load
-  {...props}
-/>
diff --git a/packages/astro/src/astro-components/react/index.ts b/packages/astro/src/astro-components/react/index.ts
index e2d7f9525fa..425d016df1e 100644
--- a/packages/astro/src/astro-components/react/index.ts
+++ b/packages/astro/src/astro-components/react/index.ts
@@ -20,9 +20,3 @@ export { default as SignedIn } from './SignedIn.astro';
 export { default as SignedOut } from './SignedOut.astro';
 // @ts-ignore
 export { default as Protect } from './Protect.astro';
-// @ts-ignore
-export { default as SignInButton } from './SignInButton.astro';
-// @ts-ignore
-export { default as SignOutButton } from './SignOutButton.astro';
-// @ts-ignore
-export { default as SignUpButton } from './SignUpButton.astro';

From 7e9262082cf2eb4149e56869212444077b797414 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Tue, 9 Jul 2024 10:57:26 -0700
Subject: [PATCH 23/23] chore(astro): Fix children prop type

---
 packages/astro/src/client/react/SignOutButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/astro/src/client/react/SignOutButton.tsx b/packages/astro/src/client/react/SignOutButton.tsx
index c61a3eb527b..efe3abf4722 100644
--- a/packages/astro/src/client/react/SignOutButton.tsx
+++ b/packages/astro/src/client/react/SignOutButton.tsx
@@ -17,7 +17,7 @@ export const SignOutButton = withClerk(
 
     const clickHandler = () => clerk?.signOut({ redirectUrl, sessionId });
     const wrappedChildClickHandler: React.MouseEventHandler = async e => {
-      await safeExecute(child.props.onClick)(e);
+      await safeExecute((child as any).props.onClick)(e);
       return clickHandler();
     };