clerk was missing /shared npm package

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@astrojs/node": "^9.5.4",
         "@clerk/astro": "^3.0.1",
+        "@clerk/shared": "^4.0.0",
         "@clerk/themes": "^2.4.55",
         "astro": "^5.17.1",
         "bootstrap": "^5.3.8",
@@ -476,35 +477,6 @@
         "astro": "^4.15.0 || ^5.0.0 || ^6.0.0"
       }
     },
-    "node_modules/@clerk/astro/node_modules/@clerk/shared": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-4.0.0.tgz",
-      "integrity": "sha512-Z3QhVud7FM9SBgSGxyUdC+nDg6vro+5zJ5gDO1To3FDzRLWKW4xIGd5y8UBqWZMMMHWaSDiZvYlUynb+gs8PnQ==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "dependencies": {
-        "@tanstack/query-core": "5.90.16",
-        "dequal": "2.0.3",
-        "glob-to-regexp": "0.4.1",
-        "js-cookie": "3.0.5",
-        "std-env": "^3.9.0"
-      },
-      "engines": {
-        "node": ">=20.9.0"
-      },
-      "peerDependencies": {
-        "react": "^18.0.0 || ~19.0.3 || ~19.1.4 || ~19.2.3 || ~19.3.0-0",
-        "react-dom": "^18.0.0 || ~19.0.3 || ~19.1.4 || ~19.2.3 || ~19.3.0-0"
-      },
-      "peerDependenciesMeta": {
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@clerk/astro/node_modules/nanoid": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.6.tgz",
@@ -537,7 +509,7 @@
         "node": ">=20.9.0"
       }
     },
-    "node_modules/@clerk/backend/node_modules/@clerk/shared": {
+    "node_modules/@clerk/shared": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-4.0.0.tgz",
       "integrity": "sha512-Z3QhVud7FM9SBgSGxyUdC+nDg6vro+5zJ5gDO1To3FDzRLWKW4xIGd5y8UBqWZMMMHWaSDiZvYlUynb+gs8PnQ==",
@@ -566,10 +538,23 @@
         }
       }
     },
-    "node_modules/@clerk/shared": {
+    "node_modules/@clerk/themes": {
-      "version": "3.47.0",
+      "version": "2.4.55",
-      "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-3.47.0.tgz",
+      "resolved": "https://registry.npmjs.org/@clerk/themes/-/themes-2.4.55.tgz",
-      "integrity": "sha512-EDWFysptTc58X96MGQIZ3LlcMFKLG+rhIF9kf6n+wnyQDWnfuyA8I8ge7GbjfUXMf00c//A/CGSjg7t/oupUpw==",
+      "integrity": "sha512-j9q8NtAaI2f7vNBuO2RAUDmAebab2UoZCXshlTzEhsbB1UH+94fPs4KyUlsbrSNxIJNfTrM2IKxAZKos3gcCJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@clerk/shared": "^3.47.0",
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      }
+    },
+    "node_modules/@clerk/themes/node_modules/@clerk/shared": {
+      "version": "3.47.2",
+      "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-3.47.2.tgz",
+      "integrity": "sha512-dwUT27DKq3Gr9vn9lAfc/LSe79P1rKIib8/mTWA7ZEzY7XX2Yq5UnDMCMznYrI8oVLdJrCT4ypFXRgnH306Oew==",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -596,19 +581,6 @@
         }
       }
     },
-    "node_modules/@clerk/themes": {
-      "version": "2.4.55",
-      "resolved": "https://registry.npmjs.org/@clerk/themes/-/themes-2.4.55.tgz",
-      "integrity": "sha512-j9q8NtAaI2f7vNBuO2RAUDmAebab2UoZCXshlTzEhsbB1UH+94fPs4KyUlsbrSNxIJNfTrM2IKxAZKos3gcCJw==",
-      "license": "MIT",
-      "dependencies": {
-        "@clerk/shared": "^3.47.0",
-        "tslib": "2.8.1"
-      },
-      "engines": {
-        "node": ">=18.17.0"
-      }
-    },
     "node_modules/@drizzle-team/brocli": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@drizzle-team/brocli/-/brocli-0.11.0.tgz",

package.json

@@ -5,12 +5,13 @@
   "scripts": {
     "dev": "astro dev --host 0.0.0.0",
     "build": "astro build",
-    "preview": "astro preview",
+    "preview": "astro preview --host 0.0.0.0",
     "astro": "astro"
   },
   "dependencies": {
     "@astrojs/node": "^9.5.4",
     "@clerk/astro": "^3.0.1",
+    "@clerk/shared": "^4.0.0",
     "@clerk/themes": "^2.4.55",
     "astro": "^5.17.1",
     "bootstrap": "^5.3.8",

src/components/CardGrid.astro

@@ -2,7 +2,7 @@
 import BackToTop from "./BackToTop.astro"
 ---
 <div class="row mb-4">
-    <div class="col-md-3 display-sm-none">
+    <div class="col-md-2 display-sm-none">
         <div class="h5 d-none">Inventory management placeholder</div>
         <div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="filterBar" aria-labelledby="filterBarLabel">
         <div class="offcanvas-header">
@@ -14,9 +14,9 @@ import BackToTop from "./BackToTop.astro"
         </div>
         </div>
     </div>
-    <div class="col-sm-12 col-md-9 mt-0">
+    <div class="col-sm-12 col-md-10 mt-0">
         <div id="activeFilters" class="mb-2 d-flex align-items-center justify-content-end small"></div>
-        <div id="cardGrid" class="row g-xxl-3 g-2 row-cols-2 row-cols-lg-3 row-cols-xxl-4 row-cols-xxxl-5"></div>
+        <div id="cardGrid" class="row g-xxl-3 g-2 row-cols-2 row-cols-md-3 row-cols-xl-4 row-cols-xxxl-5"></div>
         <div id="notfound"></div>
     </div>
 </div>

src/components/ClerkAuth.astro

@@ -1,14 +0,0 @@
----
-import { SignedIn, SignedOut, UserButton, SignInButton, SignUpButton } from "@clerk/astro/components";
----
-<div class="row">
-    <SignedOut>
-        <div class="col-3">
-            <SignInButton mode="modal" />
-            <SignUpButton mode="modal" />
-        </div>
-    </SignedOut>
-    <SignedIn>
-        <UserButton />
-    </SignedIn>
-</div>

src/middleware.ts

@@ -7,8 +7,11 @@ const isProtectedRoute = createRouteMatcher([
 ]);
 
 export const onRequest = clerkMiddleware((auth, context) => {
-  if (!auth().userId && isProtectedRoute(context.request)) {
+  const { isAuthenticated, redirectToSignIn } = auth()
-    // Redirect unauthenticated users to the sign-in page
+
-    return auth().redirectToSignIn(); 
+  if (!isAuthenticated && isProtectedRoute(context.request)) {
+    // Add custom logic to run before redirecting
+
+    return redirectToSignIn()
   }
 });

src/pages/index.astro

@@ -27,7 +27,7 @@ import { Show, SignInButton, SignUpButton, SignOutButton } from '@clerk/astro/co
         </div>
         <div class="col-12 col-md-6 d-flex flex-row gap-5 justify-content-end">
             <div>
-                <Show when="signed-out">
+            <Show when="signed-out">
                 <!-- Using Bootstrap btn classes -->
                 <SignInButton asChild mode="modal">
                 <button class="btn btn-success">

src/pages/partials/cards.astro

@@ -206,7 +206,7 @@ const facets = searchResults.results.slice(1).map((result: any) => {
                 document.getElementById('searchform').dispatchEvent(new Event('submit', {bubbles:true, cancelable:true}));
             });
         }
-        
+
     </script>
 }
 
@@ -221,7 +221,7 @@ const facets = searchResults.results.slice(1).map((result: any) => {
         <div class="inventory-button position-relative float-end shadow-filter text-center d-none">
             <div class="inventory-label pt-2">+/-</div>
         </div>
-        <div hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="const cardTitle = this.querySelector('#cardImage').getAttribute('alt'); dataLayer.push({'event': 'virtualPageview', 'pageUrl': this.getAttribute('hx-get'), 'pageTitle': cardTitle, 'previousUrl': '/pokemon'});">
+        <div class="card-trigger" data-card-id={card.cardId} hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="const cardTitle = this.querySelector('#cardImage').getAttribute('alt'); dataLayer.push({'event': 'virtualPageview', 'pageUrl': this.getAttribute('hx-get'), 'pageTitle': cardTitle, 'previousUrl': '/pokemon'});">
             <img src={`/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-4 mb-2 card-image image-grow w-100" onerror="this.onerror=null;this.src='/cards/default.jpg'"/>
         </div>
         <div class="row row-cols-5 gx-1 price-row mb-2">

src/pages/pokemon.astro

@@ -3,6 +3,7 @@ import Layout from '../layouts/Main.astro';
 import Search from '../components/Search.astro';
 import CardGrid from "../components/CardGrid.astro";
 import NavBar from '../components/NavBar.astro';
+
 export const prerender = false;
 ---