feat: update dependencies and refactor layout and homepage components

- Added new dependencies: @daveyplate/better-auth-ui, next-themes, and sonner. - Refactored layout component to use Providers and Toaster for better state management and notifications. - Updated homepage to utilize authClient for session management and improved user experience with navigation links for sign-in and sign-up.
2026-03-25 11:42:02 +01:00
parent f8f86eb990
commit 66c4455033
9 changed files with 1368 additions and 41 deletions
--- a/app/auth/[path]/page.tsx
+++ b/app/auth/[path]/page.tsx
@@ -0,0 +1,22 @@
+import { AuthView } from "@daveyplate/better-auth-ui";
+import { authViewPaths } from "@daveyplate/better-auth-ui/server";
+
+export const dynamicParams = false;
+
+export function generateStaticParams() {
+  return Object.values(authViewPaths).map((path) => ({ path }));
+}
+
+export default async function AuthPage({
+  params,
+}: {
+  params: Promise<{ path: string }>;
+}) {
+  const { path } = await params;
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-4">
+      <AuthView path={path} />
+    </main>
+  );
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,20 +1,12 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono, Manrope } from "next/font/google";
+import { Manrope } from "next/font/google";
 import "./globals.css";
 import { cn } from "@/lib/utils";
-import { ConvexClientProvider } from "@/components/ui/convex-prover";
+import { Providers } from "@/components/providers";
+import { Toaster } from "@/components/ui/sonner";
+import { InitUser } from "@/components/init-user";

-const manrope = Manrope({subsets:['latin'],variable:'--font-sans'});
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+const manrope = Manrope({ subsets: ["latin"], variable: "--font-sans" });

 export const metadata: Metadata = {
  title: "Create Next App",
@@ -28,11 +20,15 @@ export default function RootLayout({
 }>) {
  return (
    <html
-      lang="en"
-      className={cn("h-full", "antialiased", geistSans.variable, geistMono.variable, "font-sans", manrope.variable)}
+      lang="de"
+      className={cn("h-full", "antialiased", "font-sans", manrope.variable)}
    >
      <body className="min-h-full flex flex-col">
-        <ConvexClientProvider>{children}</ConvexClientProvider>
+        <Providers>
+          <InitUser />
+          {children}
+          <Toaster />
+        </Providers>
      </body>
    </html>
  );
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,38 +1,51 @@
-// src/app/page.tsx — minimaler Test
 "use client";

 import { authClient } from "@/lib/auth-client";
-import { useQuery } from "convex/react";
-import { api } from "@/convex/_generated/api";
+import Link from "next/link";

 export default function Home() {
-  const user = useQuery(api.auth.getCurrentUser);
+  const { data: session, isPending } = authClient.useSession();

-// user === undefined → Query lädt noch
-// user === null → Nicht eingeloggt
-// user === { id, name, email, ... } → Eingeloggt
+  if (isPending) {
+    return (
+      <main className="flex min-h-screen items-center justify-center">
+        <p className="text-muted-foreground">Laden...</p>
+      </main>
+    );
+  }

  return (
-    <div>
-      <h1>LemonSpace</h1>
-      {user ? (
-        <div>
-          <p>Eingeloggt als: {user.name}</p>
-          <button onClick={() => authClient.signOut()}>Logout</button>
+    <main className="flex min-h-screen flex-col items-center justify-center gap-6 p-4">
+      <h1 className="text-4xl font-bold">🍋 LemonSpace</h1>
+
+      {session?.user ? (
+        <div className="flex flex-col items-center gap-4">
+          <p className="text-lg">
+            Willkommen, <span className="font-semibold">{session.user.name}</span>
+          </p>
+          <Link
+            href="/dashboard"
+            className="rounded-lg bg-primary px-6 py-3 text-primary-foreground hover:bg-primary/90"
+          >
+            Zum Dashboard
+          </Link>
        </div>
      ) : (
-        <button
-          onClick={() =>
-            authClient.signUp.email({
-              email: "test@lemonspace.io",
-              password: "test1234",
-              name: "Test User",
-            })
-          }
+        <div className="flex gap-4">
+          <Link
+            href="/auth/sign-in"
+            className="rounded-lg bg-primary px-6 py-3 text-primary-foreground hover:bg-primary/90"
          >
-          Test Signup
-        </button>
-      )}
+            Anmelden
+          </Link>
+          <Link
+            href="/auth/sign-up"
+            className="rounded-lg border border-border px-6 py-3 hover:bg-accent"
+          >
+            Registrieren
+          </Link>
        </div>
+      )}
+    </main>
  );
 }
--- a/components/init-user.tsx
+++ b/components/init-user.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { authClient } from "@/lib/auth-client";
+import { useMutation, useQuery } from "convex/react";
+import { api } from "@/convex/_generated/api";
+import { useEffect } from "react";
+
+/**
+ * Initialisiert die Credit-Balance für neue User.
+ * Wird einmal im Layout eingebunden und sorgt dafür,
+ * dass jeder eingeloggte User eine Balance + Free-Subscription hat.
+ */
+export function InitUser() {
+  const { data: session } = authClient.useSession();
+  const balance = useQuery(
+    api.credits.getBalance,
+    session?.user ? {} : "skip"
+  );
+  const initBalance = useMutation(api.credits.initBalance);
+
+  useEffect(() => {
+    if (
+      session?.user &&
+      balance &&
+      balance.balance === 0 &&
+      balance.monthlyAllocation === 0
+    ) {
+      initBalance();
+    }
+  }, [session?.user, balance, initBalance]);
+
+  return null;
+}
--- a/components/providers.tsx
+++ b/components/providers.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { ReactNode } from "react";
+import { ConvexReactClient } from "convex/react";
+import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
+import { AuthUIProvider } from "@daveyplate/better-auth-ui";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+import { authClient } from "@/lib/auth-client";
+
+const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
+
+export function Providers({
+  children,
+  initialToken,
+}: {
+  children: ReactNode;
+  initialToken?: string | null;
+}) {
+  const router = useRouter();
+
+  return (
+    <ConvexBetterAuthProvider
+      client={convex}
+      authClient={authClient}
+      initialToken={initialToken}
+    >
+      <AuthUIProvider
+        authClient={authClient}
+        navigate={router.push}
+        replace={router.replace}
+        onSessionChange={() => router.refresh()}
+        Link={Link}
+      >
+        {children}
+      </AuthUIProvider>
+    </ConvexBetterAuthProvider>
+  );
+}
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
--- a/components/ui/sonner.tsx
+++ b/components/ui/sonner.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
--- a/package.json
+++ b/package.json
@@ -10,16 +10,19 @@
  },
  "dependencies": {
    "@convex-dev/better-auth": "^0.11.3",
+    "@daveyplate/better-auth-ui": "^3.4.0",
    "better-auth": "^1.5.6",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "convex": "^1.34.0",
    "lucide-react": "^1.6.0",
    "next": "16.2.1",
+    "next-themes": "^0.4.6",
    "radix-ui": "^1.4.3",
    "react": "19.2.4",
    "react-dom": "19.2.4",
    "shadcn": "^4.1.0",
+    "sonner": "^2.0.7",
    "tailwind-merge": "^3.5.0",
    "tw-animate-css": "^1.4.0",
    "zod": "^4.3.6"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml