clerk · wobsoriano · Aug 22, 2024 · Jul 10, 2024 · Jul 10, 2024 · Jul 10, 2024
diff --git a/.changeset/proud-horses-smell.md b/.changeset/proud-horses-smell.md
@@ -0,0 +1,5 @@
+---
+"@clerk/astro": minor
+---
+
+Add support for Astro `static` and `hybrid` outputs.
diff --git a/integration/presets/astro.ts b/integration/presets/astro.ts
@@ -20,6 +20,9 @@ const astroNode = applicationConfig()
   .addDependency('@clerk/types', clerkTypesLocal)
   .addDependency('@clerk/localizations', clerkLocalizationLocal);
 
+const astroStatic = astroNode.clone().setName('astro-hybrid').useTemplate(templates['astro-hybrid']);
+
 export const astro = {
   node: astroNode,
-};
+  static: astroStatic,
+} as const;
diff --git a/integration/presets/longRunningApps.ts b/integration/presets/longRunningApps.ts
@@ -25,6 +25,7 @@ export const createLongRunningApps = () => {
     { id: 'quickstart.next.appRouter', config: next.appRouterQuickstart, env: envs.withEmailCodesQuickstart },
     { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
     { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
+    { id: 'astro.static.withCustomRoles', config: astro.static, env: envs.withCustomRoles },
     { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
   ] as const;
 

diff --git a/integration/templates/astro-hybrid/.gitignore b/integration/templates/astro-hybrid/.gitignore
@@ -0,0 +1,24 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
diff --git a/integration/templates/astro-hybrid/astro.config.mjs b/integration/templates/astro-hybrid/astro.config.mjs
@@ -0,0 +1,11 @@
+import { defineConfig } from 'astro/config';
+import clerk from '@clerk/astro';
+import react from '@astrojs/react';
+
+export default defineConfig({
+  output: 'hybrid',
+  integrations: [clerk(), react()],
+  server: {
+    port: Number(process.env.PORT),
+  },
+});
diff --git a/integration/templates/astro-hybrid/package.json b/integration/templates/astro-hybrid/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "astro-clerk-hybrid-playground",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev --port $PORT",
+    "build": "astro check && astro build",
+    "preview": "astro preview --port $PORT",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.7.0",
+    "@astrojs/react": "^3.6.0",
+    "@astrojs/node": "^8.3.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "astro": "^4.11.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.5.3"
+  }
+}
diff --git a/integration/templates/astro-hybrid/public/favicon.svg b/integration/templates/astro-hybrid/public/favicon.svg
diff --git a/integration/templates/astro-hybrid/src/layouts/Layout.astro b/integration/templates/astro-hybrid/src/layouts/Layout.astro
@@ -0,0 +1,24 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!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>
+    <main>
+      <slot />
+    </main>
+  </body>
+</html>
diff --git a/integration/templates/astro-hybrid/src/middleware.ts b/integration/templates/astro-hybrid/src/middleware.ts
@@ -0,0 +1,3 @@
+import { clerkMiddleware } from '@clerk/astro/server';
+
+export const onRequest = clerkMiddleware();
diff --git a/integration/templates/astro-hybrid/src/pages/index.astro b/integration/templates/astro-hybrid/src/pages/index.astro
@@ -0,0 +1,19 @@
+---
+import { UserButton, SignInButton, SignedIn, SignedOut } from "@clerk/astro/components";
+import { OrganizationSwitcher } from "@clerk/astro/react";
+import Layout from "../layouts/Layout.astro";
+
+export const prerender = true;
+---
+
+<Layout title="Home">
+    <SignedOut>
+        <h1>Signed out</h1>
+        <SignInButton mode="modal" fallbackRedirectUrl="/" />
+    </SignedOut>
+    <SignedIn>
+        <h1>Signed in</h1>
+        <UserButton />
+        <OrganizationSwitcher client:only="react" />
+    </SignedIn>
+</Layout>
diff --git a/integration/templates/astro-hybrid/src/pages/only-admins.astro b/integration/templates/astro-hybrid/src/pages/only-admins.astro
@@ -0,0 +1,13 @@
+---
+import { Protect } from "@clerk/astro/components";
+import Layout from "../layouts/Layout.astro";
+
+export const prerender = true;
+---
+
+<Layout title="Protected">
+    <Protect role="admin">
+        <h1>I'm an admin</h1>
+        <h1 slot="fallback">Not an admin</h1>
+    </Protect>
+</Layout>
diff --git a/integration/templates/astro-hybrid/src/pages/only-members.astro b/integration/templates/astro-hybrid/src/pages/only-members.astro
@@ -0,0 +1,13 @@
+---
+import { Protect } from "@clerk/astro/components";
+import Layout from "../layouts/Layout.astro";
+
+export const prerender = false;
+---
+
+<Layout title="Protected">
+    <Protect role="basic_member" isStatic={false}>
+        <h1>I'm a member</h1>
+        <h1 slot="fallback">Not a member</h1>
+    </Protect>
+</Layout>
diff --git a/integration/templates/astro-hybrid/src/pages/ssr.astro b/integration/templates/astro-hybrid/src/pages/ssr.astro
@@ -0,0 +1,19 @@
+---
+import { UserButton, SignInButton, SignedIn, SignedOut } from "@clerk/astro/components";
+import { OrganizationSwitcher } from "@clerk/astro/react";
+import Layout from "../layouts/Layout.astro";
+
+export const prerender = false;
+---
+
+<Layout title="Home">
+    <SignedOut isStatic={false}>
+        <h1>Signed out</h1>
+        <SignInButton mode="modal" fallbackRedirectUrl="/" />
+    </SignedOut>
+    <SignedIn isStatic={false}>
+        <h1>Signed in</h1>
+        <UserButton />
+        <OrganizationSwitcher client:load />
+    </SignedIn>
+</Layout>
diff --git a/integration/templates/astro-hybrid/tsconfig.json b/integration/templates/astro-hybrid/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}
diff --git a/integration/templates/index.ts b/integration/templates/index.ts
@@ -12,6 +12,7 @@ export const templates = {
   'remix-node': resolve(__dirname, './remix-node'),
   'elements-next': resolve(__dirname, './elements-next'),
   'astro-node': resolve(__dirname, './astro-node'),
+  'astro-hybrid': resolve(__dirname, './astro-hybrid'),
   'expo-web': resolve(__dirname, './expo-web'),
 } as const;
 

diff --git a/integration/tests/astro/hybrid.test.ts b/integration/tests/astro/hybrid.test.ts
@@ -0,0 +1,114 @@
+import { expect, test } from '@playwright/test';
+
+import type { FakeOrganization, FakeUser } from '../../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../../testUtils';
+
+testAgainstRunningApps({ withPattern: ['astro.static.withCustomRoles'] })(
+  'basic flows for @astro hybrid output',
+  ({ app }) => {
+    test.describe.configure({ mode: 'serial' });
+
+    let fakeAdmin: FakeUser;
+    let fakeOrganization: FakeOrganization;
+    let fakeAdmin2: FakeUser;
+    let fakeOrganization2: 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);
+
+      fakeAdmin2 = m.services.users.createFakeUser();
+      const admin2 = await m.services.users.createBapiUser(fakeAdmin2);
+      fakeOrganization2 = await m.services.users.createFakeOrganization(admin2.id);
+    });
+
+    test.afterAll(async () => {
+      await fakeOrganization.delete();
+      await fakeAdmin.deleteIfExists();
+
+      await fakeOrganization2.delete();
+      await fakeAdmin2.deleteIfExists();
+      await app.teardown();
+    });
+
+    test('render SignedIn and SignedOut contents (prerendered)', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+      await u.page.goToAppHome();
+
+      await u.page.waitForClerkJsLoaded();
+
+      await u.po.expect.toBeSignedOut();
+      await expect(u.page.getByText('Signed out')).toBeVisible();
+      await expect(u.page.getByText('Signed in')).toBeHidden();
+
+      await u.page.getByRole('button', { name: /Sign in/i }).click();
+
+      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('Signed out')).toBeHidden();
+      await expect(u.page.getByText('Signed in')).toBeVisible();
+    });
+
+    test('render SignedIn and SignedOut contents (SSR)', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+      await u.page.goToRelative('/ssr');
+
+      await u.page.waitForClerkJsLoaded();
+
+      await u.po.expect.toBeSignedOut();
+      await expect(u.page.getByText('Signed out')).toBeVisible();
+      await expect(u.page.getByText('Signed in')).toBeHidden();
+
+      await u.page.getByRole('button', { name: /Sign in/i }).click();
+
+      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('Signed out')).toBeHidden();
+      await expect(u.page.getByText('Signed in')).toBeVisible();
+    });
+
+    test('render Protect contents for admin', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+      await u.page.goToAppHome();
+
+      await u.page.waitForClerkJsLoaded();
+
+      // Sign in
+      await u.page.getByRole('button', { name: /Sign in/i }).click();
+      await u.po.signIn.waitForMounted();
+      await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+      await u.po.expect.toBeSignedIn();
+
+      // Select an organization
+      await u.po.organizationSwitcher.waitForMounted();
+      await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+      await u.page.goToRelative('/only-admins');
+
+      await expect(u.page.getByText("I'm an admin")).toBeVisible();
+    });
+
+    test('render Protect fallback', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+      await u.page.goToAppHome();
+
+      await u.page.waitForClerkJsLoaded();
+
+      // Sign in
+      await u.page.getByRole('button', { name: /Sign in/i }).click();
+      await u.po.signIn.waitForMounted();
+      await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+      await u.po.expect.toBeSignedIn();
+
+      await u.page.goToRelative('/only-members');
+
+      await expect(u.page.getByText('Not a member')).toBeVisible();
+    });
+  },
+);
diff --git a/packages/astro/.eslintrc.cjs b/packages/astro/.eslintrc.cjs
@@ -4,11 +4,7 @@ module.exports = {
   rules: {
     'import/no-unresolved': ['error', { ignore: ['^#'] }],
   },
-  ignorePatterns: [
-    'src/astro-components/index.ts',
-    'src/astro-components/interactive/UserButton/index.ts',
-    'src/astro-components/interactive/UserProfile/index.ts',
-  ],
+  ignorePatterns: ['src/astro-components/**/*.ts'],
   overrides: [
     {
       files: ['./env.d.ts'],

diff --git a/packages/astro/.gitignore b/packages/astro/.gitignore
@@ -5,6 +5,7 @@ astro-components/
 components/
 !src/components/
 .output/
+/types.ts
 
 .vscode/
 .idea/

diff --git a/packages/astro/bundled/package.json b/packages/astro/bundled/package.json
diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -30,20 +30,20 @@
     "dev": "tsup --watch --onSuccess \"npm run build:dts\"",
     "build": "tsup --onSuccess \"npm run build:dts\" && npm run copy:components",
     "build:dts": "tsc --emitDeclarationOnly --declaration",
-    "copy:components": "rm -rf ./components && mkdir -p ./components/ && cp  -r ./src/astro-components/* ./components/",
+    "copy:components": "rm -rf ./components && mkdir -p ./components/ && cp  -r ./src/astro-components/* ./components/ && cp ./src/types.ts ./",
     "lint": "eslint src/",
     "lint:attw": "attw --pack .",
     "lint:publint": "publint",
     "publish:local": "npx yalc push --replace --sig"
   },
   "files": [
     "dist",
-    "bundled",
     "client",
     "server",
     "internal",
     "components",
-    "env.d.ts"
+    "env.d.ts",
+    "types.ts"
   ],
   "exports": {
     ".": {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { clerkMiddleware } from '@clerk/astro/server';

		export const onRequest = clerkMiddleware();