mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-10 12:27:44 +00:00
example(astro): add missing imports, remove unused scripts, fix indentation (#1455)
Note for pages/index.astro: <script> moved outside <RootLayout> as per Astro convention.
This commit is contained in:
Konrad Serafin
@@ -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",
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
---
|
||||
import { SignInCard } from "@/components/sign-in";
|
||||
import RootLayout from "@/layouts/root-layout.astro";
|
||||
---
|
||||
|
||||
<RootLayout>
|
||||
<SignInCard client:load />
|
||||
</RootLayout>
|
||||
<SignInCard client:load />
|
||||
</RootLayout>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
import { SignUpCard } from "@/components/sign-up";
|
||||
import RootLayout from "@/layouts/root-layout.astro";
|
||||
---
|
||||
|
||||
|
||||
<RootLayout>
|
||||
<SignUpCard client:load />
|
||||
</RootLayout>
|
||||
<SignUpCard client:load />
|
||||
</RootLayout>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
import { TwoFactorEmail } from "@/components/two-factor";
|
||||
import RootLayout from "@/layouts/root-layout.astro";
|
||||
---
|
||||
|
||||
|
||||
|
||||
<RootLayout>
|
||||
<TwoFactorEmail client:load />
|
||||
</RootLayout>
|
||||
<TwoFactorEmail client:load />
|
||||
</RootLayout>
|
||||
|
||||
Reference in New Issue
Block a user