From 08e0eb067fda8266b84ef4ce12e7b5718ce40a71 Mon Sep 17 00:00:00 2001
From: Konrad Serafin <33784221+theinfinit@users.noreply.github.com>
Date: Sun, 16 Feb 2025 14:08:51 +0100
Subject: [PATCH] example(astro): add missing imports, remove unused scripts,
 fix indentation (#1455)

Note for pages/index.astro: <script> moved outside <RootLayout> as per Astro convention.
---
 examples/astro-example/package.json           |  4 +-
 examples/astro-example/src/auth.ts            |  3 +-
 .../src/layouts/root-layout.astro             | 45 +++++-----
 .../astro-example/src/pages/dashboard.astro   |  4 +-
 examples/astro-example/src/pages/index.astro  | 82 +++++++++----------
 .../astro-example/src/pages/sign-in.astro     |  6 +-
 .../astro-example/src/pages/sign-up.astro     |  7 +-
 .../astro-example/src/pages/two-factor.astro  |  5 +-
 .../src/pages/two-factor/email.astro          |  8 +-
 9 files changed, 85 insertions(+), 79 deletions(-)
diff --git a/examples/astro-example/package.json b/examples/astro-example/package.json
index 4aa6f88fa3..d5e9d73f36 100644
--- a/examples/astro-example/package.json
+++ b/examples/astro-example/package.json
@@ -6,10 +6,8 @@
   "scripts": {
     "dev": "pnpm migrate:auth && astro dev --port 3000",
     "migrate:auth": "pnpx @better-auth/cli migrate",
-    "start": "astro dev",
     "build": "astro check && astro build",
-    "preview": "astro preview",
-    "astro": "astro"
+    "preview": "astro preview"
   },
   "dependencies": {
     "@ark-ui/solid": "^3.13.0",
diff --git a/examples/astro-example/src/auth.ts b/examples/astro-example/src/auth.ts
index 4c5db89b95..466f7e688e 100644
--- a/examples/astro-example/src/auth.ts
+++ b/examples/astro-example/src/auth.ts
@@ -1,5 +1,6 @@
 import { betterAuth } from "better-auth";
-import { passkey, twoFactor } from "better-auth/plugins";
+import { passkey } from "better-auth/plugins/passkey";
+import { twoFactor } from "better-auth/plugins";
 import Database from "better-sqlite3";
 
 export const auth = betterAuth({
diff --git a/examples/astro-example/src/layouts/root-layout.astro b/examples/astro-example/src/layouts/root-layout.astro
index aa66c831f7..d77865d621 100644
--- a/examples/astro-example/src/layouts/root-layout.astro
+++ b/examples/astro-example/src/layouts/root-layout.astro
@@ -4,31 +4,31 @@ import "../app.css";
 
 <script is:inline>
   const getThemePreference = () => {
-      if (
-          typeof localStorage !== "undefined" &&
-          localStorage.getItem("theme")
-      ) {
-          return localStorage.getItem("theme");
-      }
-      return window.matchMedia("(prefers-color-scheme: dark)").matches
-          ? "dark"
-          : "light";
+    if (
+      typeof localStorage !== "undefined" &&
+      localStorage.getItem("theme")
+    ) {
+      return localStorage.getItem("theme");
+    }
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
   };
 
   const setColorMode = () => {
-      const isDark = getThemePreference() === "dark";
-      document.documentElement.classList[isDark ? "add" : "remove"]("dark");
+    const isDark = getThemePreference() === "dark";
+    document.documentElement.classList[isDark ? "add" : "remove"]("dark");
   };
 
   if (typeof localStorage !== "undefined") {
-      const observer = new MutationObserver(() => {
-          const isDark = document.documentElement.classList.contains("dark");
-          localStorage.setItem("theme", isDark ? "dark" : "light");
-      });
-      observer.observe(document.documentElement, {
-          attributes: true,
-          attributeFilter: ["class"],
-      });
+    const observer = new MutationObserver(() => {
+      const isDark = document.documentElement.classList.contains("dark");
+      localStorage.setItem("theme", isDark ? "dark" : "light");
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
   }
 
   setColorMode();
@@ -38,15 +38,16 @@ import "../app.css";
 
 
 <html>
+  <head>
     <meta charset="utf-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
     <title>Astro</title>
   </head>
-    <body class="w-full h-screen flex-col items-center flex justify-center">
+  <body class="w-full h-screen flex-col items-center flex justify-center">
     <div class="w-1/2 flex justify-center">
       <slot /> 
     </div>
-    </body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/examples/astro-example/src/pages/dashboard.astro b/examples/astro-example/src/pages/dashboard.astro
index a227f7ef3b..889c57c98e 100644
--- a/examples/astro-example/src/pages/dashboard.astro
+++ b/examples/astro-example/src/pages/dashboard.astro
@@ -1,5 +1,7 @@
 ---
 import { auth } from "@/auth";
+import { UserCard } from "@/components/user-card";
+import RootLayout from "@/layouts/root-layout.astro";
 
 const activeSessions = await auth.api
 	.listSessions({
@@ -14,5 +16,5 @@ const session = await auth.api.getSession({
 ---
 
 <RootLayout>
-      <UserCard  activeSessions={activeSessions} initialSession={session} client:only  />
+	<UserCard activeSessions={activeSessions} initialSession={session} client:only />
 </RootLayout>
diff --git a/examples/astro-example/src/pages/index.astro b/examples/astro-example/src/pages/index.astro
index 511874f0c2..c04e231c2e 100644
--- a/examples/astro-example/src/pages/index.astro
+++ b/examples/astro-example/src/pages/index.astro
@@ -1,53 +1,53 @@
 ---
+import RootLayout from "@/layouts/root-layout.astro";
 ---
 
 <RootLayout>
-    <div class="min-h-[80vh] flex flex-col items-center justify-center overflow-hidden no-visible-scrollbar px-6 md:px-0">
-      <h3 class="font-bold text-xl text-black dark:text-white text-center">
-        Better Auth.
-      </h3>
-      <p class="text-center break-words text-sm md:text-base">
-        Official astro
-        <a
-          href="https://better-auth.com"
-          target="_blank"
-          class="italic underline"
-        >
-          better-auth
-        </a>{" "}
-        example. <br />
-      </p> 
-      <a href="/sign-in">
-        <button
+  <div class="min-h-[80vh] flex flex-col items-center justify-center overflow-hidden no-visible-scrollbar px-6 md:px-0">
+    <h3 class="font-bold text-xl text-black dark:text-white text-center">
+      Better Auth.
+    </h3>
+    <p class="text-center break-words text-sm md:text-base">
+      Official astro
+      <a
+        href="https://better-auth.com"
+        target="_blank"
+        class="italic underline"
+      >
+        better-auth
+      </a>{" "}
+      example. <br />
+    </p> 
+    <a href="/sign-in">
+      <button
         id="login"
         class="bg-black mt-3 flex items-center gap-2 rounded-sm py-2 px-3 text-white text-sm"
       >
         Sign In
       </button>  
-  </a>    
-
-  <a href="/dashboard">
-    <button
-    id="dashboard"
-    class="bg-black mt-3 flex items-center gap-2 rounded-sm py-2 px-3 text-white text-sm"
-  >
-    Dashboard
-  </button> 
-</a>
+    </a>
+    <a href="/dashboard">
+      <button
+        id="dashboard"
+        class="bg-black mt-3 flex items-center gap-2 rounded-sm py-2 px-3 text-white text-sm"
+      >
+        Dashboard
+      </button> 
+    </a>
   </div>
-  <script>
-    import { useVanillaSession } from "../libs/auth-client";
-    useVanillaSession.subscribe((val) => {
-      if (val.data) {
-        document.getElementById("login")!.style.display = "none";
-        document.getElementById("dashboard")!.style.display = "flex";
-      } else {
-        if(val.error){
-          document.getElementById("login")!.style.display = "flex";
-          document.getElementById("dashboard")!.style.display = "none";
-        }
-      }
-    }); 
-  </script>  
 </RootLayout>
 
+<script>
+  import { useVanillaSession } from "../libs/auth-client";
+  useVanillaSession.subscribe((val) => {
+    if (val.data) {
+      document.getElementById("login")!.style.display = "none";
+      document.getElementById("dashboard")!.style.display = "flex";
+    } else {
+      if(val.error){
+        document.getElementById("login")!.style.display = "flex";
+        document.getElementById("dashboard")!.style.display = "none";
+      }
+    }
+  });
+</script>
diff --git a/examples/astro-example/src/pages/sign-in.astro b/examples/astro-example/src/pages/sign-in.astro
index 6bc71112e9..bd1b3d6202 100644
--- a/examples/astro-example/src/pages/sign-in.astro
+++ b/examples/astro-example/src/pages/sign-in.astro
@@ -1,6 +1,8 @@
 ---
+import { SignInCard } from "@/components/sign-in";
+import RootLayout from "@/layouts/root-layout.astro";
 ---
 
 <RootLayout>
-    <SignInCard client:load />
-</RootLayout>   
\ No newline at end of file
+  <SignInCard client:load />
+</RootLayout>
diff --git a/examples/astro-example/src/pages/sign-up.astro b/examples/astro-example/src/pages/sign-up.astro
index 136db7b4c3..3c02e493ed 100644
--- a/examples/astro-example/src/pages/sign-up.astro
+++ b/examples/astro-example/src/pages/sign-up.astro
@@ -1,7 +1,8 @@
 ---
+import { SignUpCard } from "@/components/sign-up";
+import RootLayout from "@/layouts/root-layout.astro";
 ---
 
-
 <RootLayout>
-    <SignUpCard client:load />
-</RootLayout>
\ No newline at end of file
+  <SignUpCard client:load />
+</RootLayout>
diff --git a/examples/astro-example/src/pages/two-factor.astro b/examples/astro-example/src/pages/two-factor.astro
index 3b04945721..5a1cbb3067 100644
--- a/examples/astro-example/src/pages/two-factor.astro
+++ b/examples/astro-example/src/pages/two-factor.astro
@@ -1,7 +1,8 @@
 ---
+import { TwoFactorComponent } from "@/components/two-factor";
+import RootLayout from "@/layouts/root-layout.astro";
 ---
 
 <RootLayout>
-    <TwoFactorComponent client:load />
+  <TwoFactorComponent client:load />
 </RootLayout>
-    
\ No newline at end of file
diff --git a/examples/astro-example/src/pages/two-factor/email.astro b/examples/astro-example/src/pages/two-factor/email.astro
index 7a3e973f9a..0d36a3ec0d 100644
--- a/examples/astro-example/src/pages/two-factor/email.astro
+++ b/examples/astro-example/src/pages/two-factor/email.astro
@@ -1,8 +1,8 @@
 ---
+import { TwoFactorEmail } from "@/components/two-factor";
+import RootLayout from "@/layouts/root-layout.astro";
 ---
 
-
-
 <RootLayout>
-<TwoFactorEmail client:load />
-</RootLayout>
\ No newline at end of file
+  <TwoFactorEmail client:load />
+</RootLayout>
