From 4f6b136dfca9f0842902b7631e47b0600197023e Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 11 Jul 2024 17:13:55 +0300
Subject: [PATCH 1/3] chore(e2e): Test control components for Astro and Astro +
 React

This commit also changes `astro.node.withEmailCodes` to `astro.node.withCustomRoles`. Additionally the `withCustomRoles` now will use the production Backend API
---
 .changeset/ten-planes-run.md                  |   2 +
 integration/presets/envs.ts                   |   2 -
 integration/presets/longRunningApps.ts        |   2 +-
 .../astro-node/src/pages/index.astro          |  15 +--
 .../astro-node/src/pages/react/discover.astro |  14 +++
 .../astro-node/src/pages/react/index.astro    | 117 ++++++++++++++++++
 .../src/pages/react/only-admins.astro         |  19 +++
 .../src/pages/react/only-members.astro        |  19 +++
 .../components.test.ts}                       |  20 ++-
 integration/tests/astro/protect.test.ts       |  49 ++++++++
 .../tests/astro/react/components.test.ts      |  35 ++++++
 integration/tests/astro/react/protect.test.ts |  49 ++++++++
 12 files changed, 326 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/ten-planes-run.md
 create mode 100644 integration/templates/astro-node/src/pages/react/discover.astro
 create mode 100644 integration/templates/astro-node/src/pages/react/index.astro
 create mode 100644 integration/templates/astro-node/src/pages/react/only-admins.astro
 create mode 100644 integration/templates/astro-node/src/pages/react/only-members.astro
 rename integration/tests/{astro.test.ts => astro/components.test.ts} (75%)
 create mode 100644 integration/tests/astro/protect.test.ts
 create mode 100644 integration/tests/astro/react/components.test.ts
 create mode 100644 integration/tests/astro/react/protect.test.ts

diff --git a/.changeset/ten-planes-run.md b/.changeset/ten-planes-run.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/ten-planes-run.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/integration/presets/envs.ts b/integration/presets/envs.ts
index 5d62e882059..54724dc005d 100644
--- a/integration/presets/envs.ts
+++ b/integration/presets/envs.ts
@@ -44,8 +44,6 @@ const withEmailLinks = environmentConfig()
 const withCustomRoles = environmentConfig()
   .setId('withCustomRoles')
   .setEnvVariable('public', 'CLERK_TELEMETRY_DISABLED', true)
-  // Temporarily use the stage api until the custom roles feature is released to prod
-  .setEnvVariable('private', 'CLERK_API_URL', 'https://api.clerkstage.dev')
   .setEnvVariable('private', 'CLERK_SECRET_KEY', envKeys['with-custom-roles'].sk)
   .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', envKeys['with-custom-roles'].pk)
   .setEnvVariable('public', 'CLERK_SIGN_IN_URL', '/sign-in')
diff --git a/integration/presets/longRunningApps.ts b/integration/presets/longRunningApps.ts
index b13eafeefac..e6077faa291 100644
--- a/integration/presets/longRunningApps.ts
+++ b/integration/presets/longRunningApps.ts
@@ -23,7 +23,7 @@ export const createLongRunningApps = () => {
     { id: 'next.appRouter.withCustomRoles', config: next.appRouter, env: envs.withCustomRoles },
     { id: 'quickstart.next.appRouter', config: next.appRouterQuickstart, env: envs.withEmailCodesQuickstart },
     { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
-    { id: 'astro.node.withEmailCodes', config: astro.node, env: envs.withEmailCodes },
+    { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
   ] as const;
 
   const apps = configs.map(longRunningApplication);
diff --git a/integration/templates/astro-node/src/pages/index.astro b/integration/templates/astro-node/src/pages/index.astro
index ae6a9ed78b6..b3d2a4e0a19 100644
--- a/integration/templates/astro-node/src/pages/index.astro
+++ b/integration/templates/astro-node/src/pages/index.astro
@@ -3,7 +3,7 @@ import Layout from "../layouts/Layout.astro";
 import Card from "../components/Card.astro";
 import SignOutButton from "../lib/astro-components/SignOutButton.astro";
 
-import { SignedIn, SignedOut } from "@clerk/astro/client/react";
+import { SignedIn, SignedOut } from "@clerk/astro/components/control";
 import { OrganizationSwitcher } from "@clerk/astro/components/interactive";
 ---
 
@@ -24,17 +24,12 @@ import { OrganizationSwitcher } from "@clerk/astro/components/interactive";
 
   <div class="h-12"></div>
 
-  <p class="instructions">
-    To get started, open the directory <code>src/pages</code> in your project.<br
-    />
-    <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
-  </p>
   <ul role="list" class="link-card-grid">
-    <SignedOut client:load>
+    <SignedOut>
       <Card
         href="/sign-in"
         title="Log in"
-        body="Learn how Astro works and explore the official API docs."
+        body="Go to this page to log in"
       />
       <Card
         href="/sign-up"
@@ -42,11 +37,11 @@ import { OrganizationSwitcher } from "@clerk/astro/components/interactive";
         body="Supercharge your project with new frameworks and libraries."
       />
     </SignedOut>
-    <SignedIn client:load>
+    <SignedIn>
       <Card
         href="/user"
         title="User Profile"
-        body="Learn how Astro works and explore the official API docs."
+        body="Go to this page to see your profile"
       />
       <Card
         href="/organization"
diff --git a/integration/templates/astro-node/src/pages/react/discover.astro b/integration/templates/astro-node/src/pages/react/discover.astro
new file mode 100644
index 00000000000..2484cd040ff
--- /dev/null
+++ b/integration/templates/astro-node/src/pages/react/discover.astro
@@ -0,0 +1,14 @@
+---
+import { OrganizationList } from "@clerk/astro/components/interactive";
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="Welcome to Astro.">
+  <div class="w-full flex justify-center">
+    <OrganizationList
+      afterSelectOrganizationUrl="/organization"
+      afterCreateOrganizationUrl="/organization"
+      afterSelectPersonalUrl="/user"
+    />
+  </div>
+</Layout>
diff --git a/integration/templates/astro-node/src/pages/react/index.astro b/integration/templates/astro-node/src/pages/react/index.astro
new file mode 100644
index 00000000000..0a2020dba76
--- /dev/null
+++ b/integration/templates/astro-node/src/pages/react/index.astro
@@ -0,0 +1,117 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Card from "../../components/Card.astro";
+import SignOutButton from "../../lib/astro-components/SignOutButton.astro";
+
+import { SignedIn, SignedOut } from "@clerk/astro/client/react";
+import { OrganizationSwitcher } from "@clerk/astro/components/interactive";
+---
+
+<Layout title="Welcome to Astro.">
+  <h1>Welcome to <span class="text-gradient">Astro</span> + React</h1>
+  <SignedIn client:load>
+    <OrganizationSwitcher
+      appearance={{
+        elements: {
+          organizationPreview__organizationSwitcherTrigger: "text-white",
+          organizationSwitcherTriggerIcon: "text-white",
+        },
+      }}
+      afterSelectOrganizationUrl="/organization"
+    />
+    <SignOutButton />
+  </SignedIn>
+
+  <div class="h-12"></div>
+
+  <p class="instructions">
+    To get started, open the directory <code>src/pages</code> in your project.<br
+    />
+    <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
+  </p>
+  <ul role="list" class="link-card-grid">
+    <SignedOut client:load>
+      <Card
+        href="/sign-in"
+        title="Log in"
+        body="Go to this page to log in"
+      />
+      <Card
+        href="/sign-up"
+        title="Create account"
+        body="Supercharge your project with new frameworks and libraries."
+      />
+    </SignedOut>
+    <SignedIn client:load>
+      <Card
+        href="/user"
+        title="User Profile"
+        body="Go to this page to see your profile"
+      />
+      <Card
+        href="/organization"
+        title="Active Organization"
+        body="Learn how Astro works and explore the official API docs."
+      />
+      <Card
+        href="/discover"
+        title="Discover Organization"
+        body="Learn how Astro works and explore the official API docs."
+      />
+      <Card
+        href="/only-admins"
+        title="For admins"
+        body={"Learn how Astro works and explore the official API docs."}
+      />
+      <Card
+        href="/only-members"
+        title="For members"
+        body="Learn how Astro works and explore the official API docs."
+      />
+    </SignedIn>
+  </ul>
+</Layout>
+
+<style>
+  h1 {
+    font-size: 4rem;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    margin-bottom: 1em;
+  }
+  .text-gradient {
+    background-image: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 400%;
+    background-position: 0%;
+  }
+  .instructions {
+    margin-bottom: 2rem;
+    border: 1px solid rgba(var(--accent-light), 25%);
+    background: linear-gradient(
+      rgba(var(--accent-dark), 66%),
+      rgba(var(--accent-dark), 33%)
+    );
+    padding: 1.5rem;
+    border-radius: 8px;
+  }
+  .instructions code {
+    font-size: 0.8em;
+    font-weight: bold;
+    background: rgba(var(--accent-light), 12%);
+    color: rgb(var(--accent-light));
+    border-radius: 4px;
+    padding: 0.3em 0.4em;
+  }
+  .instructions strong {
+    color: rgb(var(--accent-light));
+  }
+  .link-card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
+    gap: 2rem;
+    padding: 0;
+  }
+</style>
diff --git a/integration/templates/astro-node/src/pages/react/only-admins.astro b/integration/templates/astro-node/src/pages/react/only-admins.astro
new file mode 100644
index 00000000000..a3be3205d56
--- /dev/null
+++ b/integration/templates/astro-node/src/pages/react/only-admins.astro
@@ -0,0 +1,19 @@
+---
+import { Protect } from "@clerk/astro/client/react";
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="Page is only accessible by members">
+  <div class="w-full flex justify-center flex-col">
+    <Protect client:load role="admin">
+      <Fragment slot="fallback">
+        <h1 class="text-2xl text-center">Not an admin</h1>
+        <a
+          class="text-sm text-center text-gray-100 transition hover:text-gray-400"
+          href="/only-members">Go to Members Page</a
+        >
+      </Fragment>
+      <h1 class="text-2xl text-center">I'm an admin</h1>
+    </Protect>
+  </div>
+</Layout>
diff --git a/integration/templates/astro-node/src/pages/react/only-members.astro b/integration/templates/astro-node/src/pages/react/only-members.astro
new file mode 100644
index 00000000000..081ba3a9ac8
--- /dev/null
+++ b/integration/templates/astro-node/src/pages/react/only-members.astro
@@ -0,0 +1,19 @@
+---
+import { Protect } from "@clerk/astro/client/react";
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="Page is only accessible by members">
+  <div class="w-full flex justify-center flex-col">
+    <Protect client:load role="basic_member">
+      <Fragment slot="fallback">
+        <h1 class="text-2xl text-center">Not a member</h1>
+        <a
+          class="text-sm text-center text-gray-100 transition hover:text-gray-400"
+          href="/only-admins">Go to Admin Page</a
+        >
+      </Fragment>
+      <h1 class="text-2xl text-center">I'm a member</h1>
+    </Protect>
+  </div>
+</Layout>
diff --git a/integration/tests/astro.test.ts b/integration/tests/astro/components.test.ts
similarity index 75%
rename from integration/tests/astro.test.ts
rename to integration/tests/astro/components.test.ts
index aca306ee720..70e0f883cfb 100644
--- a/integration/tests/astro.test.ts
+++ b/integration/tests/astro/components.test.ts
@@ -1,9 +1,9 @@
 import { expect, test } from '@playwright/test';
 
-import type { FakeUser } from '../testUtils';
-import { createTestUtils, testAgainstRunningApps } from '../testUtils';
+import type { FakeUser } from '../../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../../testUtils';
 
-testAgainstRunningApps({ withPattern: ['astro.node.withEmailCodes'] })('test astro @astro', ({ app }) => {
+testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic flows for @astro', ({ app }) => {
   test.describe.configure({ mode: 'parallel' });
   let fakeUser: FakeUser;
 
@@ -64,7 +64,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withEmailCodes'] })('test ast
     await expect(u.page.getByText(/profile details/i)).toBeVisible();
   });
 
-  test('render user profile', async ({ page, context }) => {
+  test('render user profile with streamed data', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.page.goToRelative('/sign-in');
     await u.po.signIn.waitForMounted();
@@ -84,4 +84,16 @@ testAgainstRunningApps({ withPattern: ['astro.node.withEmailCodes'] })('test ast
     await u.page.waitForURL(`${app.serverUrl}/sign-in?redirect_url=${encodeURIComponent(`${app.serverUrl}/user`)}`);
     await u.po.signIn.waitForMounted();
   });
+
+  test('SignedIn, SignedOut SSR', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.page.goToStart();
+    await expect(u.page.getByText('Go to this page to log in')).toBeVisible();
+    await u.page.goToRelative('/sign-in');
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+    await u.po.expect.toBeSignedIn();
+    await expect(u.page.getByText('Go to this page to see your profile')).toBeVisible();
+    await expect(u.page.getByText('Sign out!')).toBeVisible();
+  });
 });
diff --git a/integration/tests/astro/protect.test.ts b/integration/tests/astro/protect.test.ts
new file mode 100644
index 00000000000..5fb4dc857a6
--- /dev/null
+++ b/integration/tests/astro/protect.test.ts
@@ -0,0 +1,49 @@
+import { expect, test } from '@playwright/test';
+
+import type { FakeOrganization, FakeUser } from '../../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../../testUtils';
+
+testAgainstRunningApps({
+  withPattern: ['astro.node.withCustomRoles'],
+})('protect @astro with react', ({ app }) => {
+  test.describe.configure({ mode: 'parallel' });
+
+  let fakeAdmin: FakeUser;
+  let fakeOrganization: FakeOrganization;
+
+  test.beforeAll(async () => {
+    const m = createTestUtils({ app });
+    fakeAdmin = m.services.users.createFakeUser();
+    const admin = await m.services.users.createBapiUser(fakeAdmin);
+    fakeOrganization = await m.services.users.createFakeOrganization(admin.id);
+  });
+
+  test.afterAll(async () => {
+    await fakeOrganization.delete();
+    await fakeAdmin.deleteIfExists();
+    await app.teardown();
+  });
+
+  test('only admin', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.page.goToRelative('/sign-in');
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+    await u.po.expect.toBeSignedIn();
+    await u.po.organizationSwitcher.waitForMounted();
+    await u.po.organizationSwitcher.toggleTrigger();
+    await u.page.locator('.cl-organizationSwitcherPreviewButton').click();
+    await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+    await u.page.goToRelative('/only-admins');
+    await expect(u.page.getByText("I'm an admin")).toBeVisible();
+  });
+
+  test('only member', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.page.goToRelative('/sign-in#/?redirect_url=/only-members');
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+    await u.po.expect.toBeSignedIn();
+    await expect(u.page.getByText('Not a member')).toBeVisible();
+  });
+});
diff --git a/integration/tests/astro/react/components.test.ts b/integration/tests/astro/react/components.test.ts
new file mode 100644
index 00000000000..a7ab8c30ec8
--- /dev/null
+++ b/integration/tests/astro/react/components.test.ts
@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test';
+
+import type { FakeUser } from '../../../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../../../testUtils';
+
+testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })(
+  'basic flows for @astro with react',
+  ({ app }) => {
+    test.describe.configure({ mode: 'serial' });
+    let fakeUser: FakeUser;
+
+    test.beforeAll(async () => {
+      const m = createTestUtils({ app });
+      fakeUser = m.services.users.createFakeUser();
+      await m.services.users.createBapiUser(fakeUser);
+    });
+
+    test.afterAll(async () => {
+      await fakeUser.deleteIfExists();
+      await app.teardown();
+    });
+
+    test('SignedIn, SignedOut SSR', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+      await u.page.goToRelative('/react');
+      await expect(u.page.getByText('Go to this page to log in')).toBeVisible();
+      await u.page.goToRelative('/sign-in#/?redirect_url=/react');
+      await u.po.signIn.waitForMounted();
+      await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+      await u.po.expect.toBeSignedIn();
+      await expect(u.page.getByText('Go to this page to see your profile')).toBeVisible();
+      await expect(u.page.getByText('Sign out!')).toBeVisible();
+    });
+  },
+);
diff --git a/integration/tests/astro/react/protect.test.ts b/integration/tests/astro/react/protect.test.ts
new file mode 100644
index 00000000000..a36f9ff1c90
--- /dev/null
+++ b/integration/tests/astro/react/protect.test.ts
@@ -0,0 +1,49 @@
+import { expect, test } from '@playwright/test';
+
+import type { FakeOrganization, FakeUser } from '../../../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../../../testUtils';
+
+testAgainstRunningApps({
+  withPattern: ['astro.node.withCustomRoles'],
+})('protect @astro with react', ({ app }) => {
+  test.describe.configure({ mode: 'parallel' });
+
+  let fakeAdmin: FakeUser;
+  let fakeOrganization: FakeOrganization;
+
+  test.beforeAll(async () => {
+    const m = createTestUtils({ app });
+    fakeAdmin = m.services.users.createFakeUser();
+    const admin = await m.services.users.createBapiUser(fakeAdmin);
+    fakeOrganization = await m.services.users.createFakeOrganization(admin.id);
+  });
+
+  test.afterAll(async () => {
+    await fakeOrganization.delete();
+    await fakeAdmin.deleteIfExists();
+    await app.teardown();
+  });
+
+  test('only admin', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.page.goToRelative('/sign-in');
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+    await u.po.expect.toBeSignedIn();
+    await u.po.organizationSwitcher.waitForMounted();
+    await u.po.organizationSwitcher.toggleTrigger();
+    await u.page.locator('.cl-organizationSwitcherPreviewButton').click();
+    await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+    await u.page.goToRelative('/react/only-admins');
+    await expect(u.page.getByText("I'm an admin")).toBeVisible();
+  });
+
+  test('only member', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.page.goToRelative('/sign-in#/?redirect_url=/react/only-members');
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+    await u.po.expect.toBeSignedIn();
+    await expect(u.page.getByText('Not a member')).toBeVisible();
+  });
+});

From c1fc0897adc5d6ff1b6514a0a3801900968b794d Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 11 Jul 2024 23:33:38 +0300
Subject: [PATCH 2/3] fix(e2e,astro): Drop `@nanostores/react` and add test for
 react components

---
 .../src/components/page-with-user.tsx         |  17 +++
 .../astro-node/src/layouts/Protected.astro    |   5 -
 .../astro-node/src/layouts/Streaming.astro    |   2 +-
 .../astro-node/src/layouts/react/Layout.astro | 143 ++++++++++++++++++
 .../astro-node/src/pages/react/discover.astro |  14 --
 .../astro-node/src/pages/react/index.astro    |   6 +-
 .../src/pages/react/only-admins.astro         |   2 +-
 .../src/pages/react/only-members.astro        |   2 +-
 .../astro-node/src/pages/react/sign-in.astro  |  10 ++
 .../astro-node/src/pages/react/user.astro     |  13 ++
 .../templates/astro-node/src/pages/user.astro |  11 +-
 .../tests/astro/react/components.test.ts      |  38 ++++-
 integration/tests/astro/react/protect.test.ts |   4 +-
 package-lock.json                             |  19 ---
 packages/astro/package.json                   |   1 -
 packages/astro/src/client/react/utils.tsx     |  12 +-
 16 files changed, 242 insertions(+), 57 deletions(-)
 create mode 100644 integration/templates/astro-node/src/components/page-with-user.tsx
 delete mode 100644 integration/templates/astro-node/src/layouts/Protected.astro
 create mode 100644 integration/templates/astro-node/src/layouts/react/Layout.astro
 delete mode 100644 integration/templates/astro-node/src/pages/react/discover.astro
 create mode 100644 integration/templates/astro-node/src/pages/react/sign-in.astro
 create mode 100644 integration/templates/astro-node/src/pages/react/user.astro

diff --git a/integration/templates/astro-node/src/components/page-with-user.tsx b/integration/templates/astro-node/src/components/page-with-user.tsx
new file mode 100644
index 00000000000..547c01ee7b9
--- /dev/null
+++ b/integration/templates/astro-node/src/components/page-with-user.tsx
@@ -0,0 +1,17 @@
+import React, { type PropsWithChildren, useSyncExternalStore } from 'react';
+import { UserProfile } from '@clerk/astro/client/react';
+import { $userStore } from '@clerk/astro/client/stores';
+
+export function PageWithUser({ children }: PropsWithChildren) {
+  const user = useSyncExternalStore($userStore.listen, $userStore.get, $userStore.get);
+
+  return (
+    <>
+      <p>My name is: {user?.firstName}</p>
+      <div className='flex w-full justify-center'>
+        <UserProfile />
+      </div>
+      {children}
+    </>
+  );
+}
diff --git a/integration/templates/astro-node/src/layouts/Protected.astro b/integration/templates/astro-node/src/layouts/Protected.astro
deleted file mode 100644
index a36699ec99d..00000000000
--- a/integration/templates/astro-node/src/layouts/Protected.astro
+++ /dev/null
@@ -1,5 +0,0 @@
----
-const { userId } = Astro.locals.auth()
----
-
-{userId && <slot />}
diff --git a/integration/templates/astro-node/src/layouts/Streaming.astro b/integration/templates/astro-node/src/layouts/Streaming.astro
index 326f15f02a9..e19b870db3c 100644
--- a/integration/templates/astro-node/src/layouts/Streaming.astro
+++ b/integration/templates/astro-node/src/layouts/Streaming.astro
@@ -2,7 +2,7 @@
 await new Promise((res) =>
   setTimeout(() => {
     res(undefined);
-  }, 1000),
+  }, 4000),
 );
 ---
 
diff --git a/integration/templates/astro-node/src/layouts/react/Layout.astro b/integration/templates/astro-node/src/layouts/react/Layout.astro
new file mode 100644
index 00000000000..84f6aedcff8
--- /dev/null
+++ b/integration/templates/astro-node/src/layouts/react/Layout.astro
@@ -0,0 +1,143 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+
+import { SignedIn, SignedOut, UserButton } from "@clerk/astro/client/react";
+import { LanguagePicker } from "../../components/LanguagePicker";
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="Astro description" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+  </head>
+  <body>
+    <header class="bg-black/40 backdrop-blur-md border-b border-b-zinc-800">
+      <div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8">
+        <div class="flex h-16 items-center justify-between">
+          <div class="md:flex md:items-center md:gap-12">
+            <a class="block text-teal-600" href="/">
+              <span>Home</span>
+            </a>
+          </div>
+
+          <div class="hidden md:block">
+            <nav aria-label="Global">
+              <ul class="flex items-center gap-6 text-sm">
+                <li>
+                  <a
+                    class="text-gray-100 transition hover:text-gray-400"
+                    href="/user"
+                  >
+                    User
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="text-gray-100 transition hover:text-gray-400"
+                    href="/organization"
+                  >
+                    Organization
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="text-gray-100 transition hover:text-gray-400"
+                    href="/discover"
+                  >
+                    Discover
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+
+          <div class="flex gap-5 items-center">
+            <LanguagePicker client:idle />
+
+            <SignedIn client:load>
+              <UserButton client:load afterSignOutUrl="/" />
+            </SignedIn>
+
+            <SignedOut client:load>
+              <div class="sm:flex sm:gap-4">
+                <a
+                  class="inline-flex group relative isolate w-fit transform-gpu overflow-hidden rounded-md px-3 py-[0.1875rem] cursor-pointer after:absolute after:inset-0 after:hover:opacity-100 transition duration-300 ease-[cubic-bezier(.4,.36,0,1)] after:duration-300 after:ease-[cubic-bezier(.4,.36,0,1)] after:transtion-opacity shadow-[inset_0px_1px_0px_theme(colors.white/12%),inset_0px_-1px_0px_theme(colors.white/4%),0px_2px_2px_-1px_rgb(66,67,77,0.24),0px_4px_4px_-2px_rgb(66,67,77,0.12)] bg-[#3C169C] ring-1 ring-[#230B6A] after:bg-[linear-gradient(theme(colors.white/24%),theme(colors.white/16%)_46%,theme(colors.white/12%)_54%,theme(colors.white/8%))] after:opacity-60 [--text-color:#FFFFFF]"
+                  href="/sign-in"
+                >
+                  <span
+                    class="text-[0.8125rem] font-medium leading-6 text-[--text-color] drop-shadow-[--text-drop-shadow]"
+                  >
+                    Login
+                  </span>
+                </a>
+
+                <div class="hidden sm:flex">
+                  <a
+                    class="inline-flex group relative isolate w-fit transform-gpu overflow-hidden rounded-md px-3 py-[0.1875rem] cursor-pointer after:absolute after:inset-0 after:hover:opacity-100 transition duration-300 ease-[cubic-bezier(.4,.36,0,1)] after:duration-300 after:ease-[cubic-bezier(.4,.36,0,1)] after:transtion-opacity shadow-[inset_0px_1px_0px_theme(colors.white/12%),inset_0px_-1px_0px_theme(colors.white/4%),0px_2px_2px_-1px_rgb(66,67,77,0.24),0px_4px_4px_-2px_rgb(66,67,77,0.12)] bg-newGray-900 ring-1 ring-newGray-950 after:bg-[linear-gradient(theme(colors.white/24%),theme(colors.white/16%)_46%,theme(colors.white/12%)_54%,theme(colors.white/8%))] after:opacity-60 [--text-color:#FFFFFF]"
+                    href="/sign-up"
+                  >
+                    <span
+                      class="text-[0.8125rem] font-medium leading-6 text-[--text-color] drop-shadow-[--text-drop-shadow]"
+                    >
+                      Register
+                    </span>
+                  </a>
+                </div>
+              </div>
+            </SignedOut>
+          </div>
+        </div>
+      </div>
+    </header>
+    <main>
+      <slot />
+    </main>
+  </body>
+</html>
+<style is:global>
+  :root {
+    --accent: 136, 58, 234;
+    --accent-light: 224, 204, 250;
+    --accent-dark: 49, 10, 101;
+    --accent-gradient: linear-gradient(
+      45deg,
+      rgb(var(--accent)),
+      rgb(var(--accent-light)) 30%,
+      white 60%
+    );
+  }
+  html {
+    font-family: system-ui, sans-serif;
+    background: #13151a;
+    background-size: 224px;
+  }
+  code {
+    font-family:
+      Menlo,
+      Monaco,
+      Lucida Console,
+      Liberation Mono,
+      DejaVu Sans Mono,
+      Bitstream Vera Sans Mono,
+      Courier New,
+      monospace;
+  }
+  main {
+    padding: 1rem;
+    margin: auto;
+    width: calc(100% - 2rem);
+    max-width: 800px;
+    color: white;
+    font-size: 20px;
+    line-height: 1.6;
+  }
+</style>
diff --git a/integration/templates/astro-node/src/pages/react/discover.astro b/integration/templates/astro-node/src/pages/react/discover.astro
deleted file mode 100644
index 2484cd040ff..00000000000
--- a/integration/templates/astro-node/src/pages/react/discover.astro
+++ /dev/null
@@ -1,14 +0,0 @@
----
-import { OrganizationList } from "@clerk/astro/components/interactive";
-import Layout from "../../layouts/Layout.astro";
----
-
-<Layout title="Welcome to Astro.">
-  <div class="w-full flex justify-center">
-    <OrganizationList
-      afterSelectOrganizationUrl="/organization"
-      afterCreateOrganizationUrl="/organization"
-      afterSelectPersonalUrl="/user"
-    />
-  </div>
-</Layout>
diff --git a/integration/templates/astro-node/src/pages/react/index.astro b/integration/templates/astro-node/src/pages/react/index.astro
index 0a2020dba76..fe5b85630f0 100644
--- a/integration/templates/astro-node/src/pages/react/index.astro
+++ b/integration/templates/astro-node/src/pages/react/index.astro
@@ -1,16 +1,16 @@
 ---
-import Layout from "../../layouts/Layout.astro";
+import Layout from "../../layouts/react/Layout.astro";
 import Card from "../../components/Card.astro";
 import SignOutButton from "../../lib/astro-components/SignOutButton.astro";
 
-import { SignedIn, SignedOut } from "@clerk/astro/client/react";
-import { OrganizationSwitcher } from "@clerk/astro/components/interactive";
+import { SignedIn, SignedOut, OrganizationSwitcher } from "@clerk/astro/client/react";
 ---
 
 <Layout title="Welcome to Astro.">
   <h1>Welcome to <span class="text-gradient">Astro</span> + React</h1>
   <SignedIn client:load>
     <OrganizationSwitcher
+      client:load
       appearance={{
         elements: {
           organizationPreview__organizationSwitcherTrigger: "text-white",
diff --git a/integration/templates/astro-node/src/pages/react/only-admins.astro b/integration/templates/astro-node/src/pages/react/only-admins.astro
index a3be3205d56..fa82e45d5bc 100644
--- a/integration/templates/astro-node/src/pages/react/only-admins.astro
+++ b/integration/templates/astro-node/src/pages/react/only-admins.astro
@@ -1,6 +1,6 @@
 ---
 import { Protect } from "@clerk/astro/client/react";
-import Layout from "../../layouts/Layout.astro";
+import Layout from "../../layouts/react/Layout.astro";
 ---
 
 <Layout title="Page is only accessible by members">
diff --git a/integration/templates/astro-node/src/pages/react/only-members.astro b/integration/templates/astro-node/src/pages/react/only-members.astro
index 081ba3a9ac8..76fe4c5e74a 100644
--- a/integration/templates/astro-node/src/pages/react/only-members.astro
+++ b/integration/templates/astro-node/src/pages/react/only-members.astro
@@ -1,6 +1,6 @@
 ---
 import { Protect } from "@clerk/astro/client/react";
-import Layout from "../../layouts/Layout.astro";
+import Layout from "../../layouts/react/Layout.astro";
 ---
 
 <Layout title="Page is only accessible by members">
diff --git a/integration/templates/astro-node/src/pages/react/sign-in.astro b/integration/templates/astro-node/src/pages/react/sign-in.astro
new file mode 100644
index 00000000000..90b2bf3e89b
--- /dev/null
+++ b/integration/templates/astro-node/src/pages/react/sign-in.astro
@@ -0,0 +1,10 @@
+---
+import { SignIn } from "@clerk/astro/client/react";
+import Layout from "../../layouts/react/Layout.astro";
+---
+
+<Layout title="Welcome to Astro.">
+  <div class="w-full flex justify-center">
+    <SignIn client:load />
+  </div>
+</Layout>
diff --git a/integration/templates/astro-node/src/pages/react/user.astro b/integration/templates/astro-node/src/pages/react/user.astro
new file mode 100644
index 00000000000..2de93c316cd
--- /dev/null
+++ b/integration/templates/astro-node/src/pages/react/user.astro
@@ -0,0 +1,13 @@
+---
+import { UserProfile } from "@clerk/astro/components/interactive";
+import Layout from "../../layouts/react/Layout.astro";
+import {PageWithUser} from "../../components/page-with-user";
+import StreamUser from "../../components/StreamUser.astro";
+---
+
+<Layout title="Welcome to Astro.">
+  <!--<UserProfile client:load/>-->
+  <PageWithUser client:load>
+    <StreamUser />
+  </PageWithUser>
+</Layout>
diff --git a/integration/templates/astro-node/src/pages/user.astro b/integration/templates/astro-node/src/pages/user.astro
index 1c35ba389a8..dfed7f34ff7 100644
--- a/integration/templates/astro-node/src/pages/user.astro
+++ b/integration/templates/astro-node/src/pages/user.astro
@@ -1,15 +1,12 @@
 ---
 import { UserProfile } from "@clerk/astro/components/interactive";
 import Layout from "../layouts/Layout.astro";
-import Protected from "../layouts/Protected.astro";
 import StreamUser from "../components/StreamUser.astro";
 ---
 
 <Layout title="Welcome to Astro.">
-  <Protected>
-    <div class="w-full flex justify-center">
-      <UserProfile />
-    </div>
-    <StreamUser />
-  </Protected>
+  <div class="w-full flex justify-center">
+    <UserProfile />
+  </div>
+  <StreamUser />
 </Layout>
diff --git a/integration/tests/astro/react/components.test.ts b/integration/tests/astro/react/components.test.ts
index a7ab8c30ec8..d32fdd5e4a1 100644
--- a/integration/tests/astro/react/components.test.ts
+++ b/integration/tests/astro/react/components.test.ts
@@ -20,11 +20,47 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })(
       await app.teardown();
     });
 
+    test('render user button', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+      await u.page.goToRelative('/react/sign-in#/?redirect_url=/react');
+      await u.po.signIn.waitForMounted();
+      await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+      await u.page.waitForAppUrl('/react');
+      await u.po.expect.toBeSignedIn();
+
+      await u.po.userButton.waitForMounted();
+      await u.po.userButton.toggleTrigger();
+      await u.po.userButton.waitForPopover();
+
+      await u.po.userButton.toHaveVisibleMenuItems([/Manage account/i, /Sign out$/i]);
+
+      await u.po.userButton.triggerManageAccount();
+      await u.po.userProfile.waitForUserProfileModal();
+
+      await expect(u.page.getByText(/profile details/i)).toBeVisible();
+    });
+
+    test('render user profile with streamed data', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+      await u.page.goToRelative('/react/sign-in#/?redirect_url=/react');
+      await u.po.signIn.waitForMounted();
+      await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+      await u.po.expect.toBeSignedIn();
+      await u.po.userButton.waitForMounted();
+      await u.page.goToRelative('/react/user');
+      await u.po.userProfile.waitForMounted();
+
+      await expect(u.page.getByText(`My name is: ${fakeUser.firstName}`)).toBeVisible();
+
+      // Streams data from Astro.locals.currentUser()
+      await expect(u.page.getByText(`"firstName":"${fakeUser.firstName}"`)).toBeVisible();
+    });
+
     test('SignedIn, SignedOut SSR', async ({ page, context }) => {
       const u = createTestUtils({ app, page, context });
       await u.page.goToRelative('/react');
       await expect(u.page.getByText('Go to this page to log in')).toBeVisible();
-      await u.page.goToRelative('/sign-in#/?redirect_url=/react');
+      await u.page.goToRelative('/react/sign-in#/?redirect_url=/react');
       await u.po.signIn.waitForMounted();
       await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
       await u.po.expect.toBeSignedIn();
diff --git a/integration/tests/astro/react/protect.test.ts b/integration/tests/astro/react/protect.test.ts
index a36f9ff1c90..0b67d98aca4 100644
--- a/integration/tests/astro/react/protect.test.ts
+++ b/integration/tests/astro/react/protect.test.ts
@@ -26,7 +26,7 @@ testAgainstRunningApps({
 
   test('only admin', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
-    await u.page.goToRelative('/sign-in');
+    await u.page.goToRelative('/react/sign-in#/?redirect_url=/react');
     await u.po.signIn.waitForMounted();
     await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
     await u.po.expect.toBeSignedIn();
@@ -40,7 +40,7 @@ testAgainstRunningApps({
 
   test('only member', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
-    await u.page.goToRelative('/sign-in#/?redirect_url=/react/only-members');
+    await u.page.goToRelative('/react/sign-in#/?redirect_url=/react/only-members');
     await u.po.signIn.waitForMounted();
     await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
     await u.po.expect.toBeSignedIn();
diff --git a/package-lock.json b/package-lock.json
index 71cfd191826..3234e4be573 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8896,24 +8896,6 @@
         "darwin"
       ]
     },
-    "node_modules/@nanostores/react": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/@nanostores/react/-/react-0.7.2.tgz",
-      "integrity": "sha512-e3OhHJFv3NMSFYDgREdlAQqkyBTHJM91s31kOZ4OvZwJKdFk5BLk0MLbh51EOGUz9QGX2aCHfy1RvweSi7fgwA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "engines": {
-        "node": "^18.0.0 || >=20.0.0"
-      },
-      "peerDependencies": {
-        "nanostores": "^0.9.0 || ^0.10.0",
-        "react": ">=18.0.0"
-      }
-    },
     "node_modules/@netlify/functions": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/@netlify/functions/-/functions-2.8.0.tgz",
@@ -48386,7 +48368,6 @@
         "@clerk/clerk-js": "5.8.0",
         "@clerk/shared": "2.3.2",
         "@clerk/types": "4.7.0",
-        "@nanostores/react": "0.7.2",
         "nanoid": "5.0.7",
         "nanostores": "0.10.3",
         "path-to-regexp": "6.2.2"
diff --git a/packages/astro/package.json b/packages/astro/package.json
index 721e9b81c41..80c4adf06d7 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -113,7 +113,6 @@
     "@clerk/clerk-js": "5.8.0",
     "@clerk/shared": "2.3.2",
     "@clerk/types": "4.7.0",
-    "@nanostores/react": "0.7.2",
     "nanoid": "5.0.7",
     "nanostores": "0.10.3",
     "path-to-regexp": "6.2.2"
diff --git a/packages/astro/src/client/react/utils.tsx b/packages/astro/src/client/react/utils.tsx
index 21b9f33ebb4..b99ed6276ec 100644
--- a/packages/astro/src/client/react/utils.tsx
+++ b/packages/astro/src/client/react/utils.tsx
@@ -1,10 +1,18 @@
 import type { LoadedClerk } from '@clerk/types';
-import { useStore } from '@nanostores/react';
-import { computed } from 'nanostores';
+import { computed, type Store, type StoreValue } from 'nanostores';
 import React from 'react';
 
 import { $clerk, $csrState } from '../../stores/internal';
 
+/**
+ * This implementation of `useStore` is an alternative solution to the hook exported by nanostores
+ * Reference: https://github.com/nanostores/react/blob/main/index.js
+ */
+function useStore<T extends Store, SV extends StoreValue<T>>(store: T): SV {
+  const get = store.get.bind(store);
+  return React.useSyncExternalStore(store.listen, get, get);
+}
+
 export const withClerk = <P extends { clerk: LoadedClerk | undefined | null }>(
   Component: React.ComponentType<P>,
   displayName?: string,

From d006499c28a493573443d53900a84ba564b61922 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 11 Jul 2024 23:34:32 +0300
Subject: [PATCH 3/3] fix(e2e,astro): Add changeset

---
 .changeset/many-boxes-beg.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/many-boxes-beg.md

diff --git a/.changeset/many-boxes-beg.md b/.changeset/many-boxes-beg.md
new file mode 100644
index 00000000000..53dc02b70e7
--- /dev/null
+++ b/.changeset/many-boxes-beg.md
@@ -0,0 +1,5 @@
+---
+"@clerk/astro": patch
+---
+
+Remove `@nanostores/react` from depedency.