Kirimase Init 4. Add Lucia

.env

@@ -0,0 +1 @@
+DATABASE_URL=postgres://postgres:postgres@localhost:5432/{DB_NAME}

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

drizzle.config.ts

@@ -0,0 +1,11 @@
+import type { Config } from "drizzle-kit";
+import { env } from "@/lib/env.mjs";
+
+export default {
+  schema: "./src/lib/db/schema",
+  out: "./src/lib/db/migrations",
+  driver: "pg",
+  dbCredentials: {
+    connectionString: env.DATABASE_URL,
+  }
+} satisfies Config;

kirimase.config.json

@@ -0,0 +1,18 @@
+{
+  "hasSrc": true,
+  "packages": [
+    "shadcn-ui",
+    "drizzle",
+    "lucia"
+  ],
+  "preferredPackageManager": "bun",
+  "t3": false,
+  "alias": "@",
+  "analytics": true,
+  "rootPath": "src/",
+  "componentLib": "shadcn-ui",
+  "driver": "pg",
+  "provider": "postgresjs",
+  "orm": "drizzle",
+  "auth": "lucia"
+}

next.config.mjs

@@ -1,4 +1,10 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  webpack: (config) => {
+    config.externals.push("@node-rs/argon2", "@node-rs/bcrypt");
+    return config;
+  },
+};
+
 
 export default nextConfig;

package.json

@@ -6,22 +6,54 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "db:generate": "drizzle-kit generate:pg",
+    "db:migrate": "tsx src/lib/db/migrate.ts",
+    "db:drop": "drizzle-kit drop",
+    "db:pull": "drizzle-kit introspect:pg",
+    "db:studio": "drizzle-kit studio",
+    "db:check": "drizzle-kit check:pg"
   },
   "dependencies": {
+    "@lucia-auth/adapter-drizzle": "^1.0.4",
+    "@node-rs/argon2": "^1.8.0",
+    "@node-rs/bcrypt": "^1.10.1",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@t3-oss/env-nextjs": "^0.9.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "drizzle-orm": "^0.30.2",
+    "drizzle-zod": "^0.5.1",
+    "lucia": "^3.1.1",
+    "lucide-react": "^0.358.0",
+    "nanoid": "^5.0.6",
+    "next": "14.1.3",
+    "next-themes": "^0.3.0",
+    "oslo": "^1.1.3",
+    "postgres": "^3.4.3",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.1.3"
+    "sonner": "^1.4.3",
+    "tailwind-merge": "^2.2.2",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "dotenv": "^16.4.5",
+    "drizzle-kit": "^0.20.14",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.3",
+    "pg": "^8.11.3",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.1.3"
+    "tsx": "^4.7.1",
+    "typescript": "^5"
   }
-}
+}

src/app/(app)/account/AccountCard.tsx

@@ -0,0 +1,45 @@
+import { Card } from "@/components/ui/card";
+
+interface AccountCardProps {
+  params: {
+    header: string;
+    description: string;
+    price?: number;
+  };
+  children: React.ReactNode;
+}
+
+export function AccountCard({ params, children }: AccountCardProps) {
+  const { header, description } = params;
+  return (
+    <Card>
+      <div id="body" className="p-4 ">
+        <h3 className="text-xl font-semibold">{header}</h3>
+        <p className="text-muted-foreground">{description}</p>
+      </div>
+      {children}
+    </Card>
+  );
+}
+
+export function AccountCardBody({ children }: { children: React.ReactNode }) {
+  return <div className="p-4">{children}</div>;
+}
+
+export function AccountCardFooter({
+  description,
+  children,
+}: {
+  children: React.ReactNode;
+  description: string;
+}) {
+  return (
+    <div
+      className="bg-muted p-4 border dark:bg-card flex justify-between items-center rounded-b-lg"
+      id="footer"
+    >
+      <p className="text-muted-foreground text-sm">{description}</p>
+      {children}
+    </div>
+  );
+}

src/app/(app)/account/UpdateEmailCard.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect } from "react";
+import { useFormState, useFormStatus } from "react-dom";
+
+import { AccountCard, AccountCardFooter, AccountCardBody } from "./AccountCard";
+import { updateUser } from "@/lib/actions/users";
+
+import { toast } from "sonner";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+export default function UpdateEmailCard({ email }: { email: string }) {
+  const [state, formAction] = useFormState(updateUser, {
+    error: "",
+  });
+
+  useEffect(() => {
+    if (state.success == true) toast.success("Updated Email");
+    if (state.error) toast.error("Error", { description: state.error });
+  }, [state]);
+
+  return (
+    <AccountCard
+      params={{
+        header: "Your Email",
+        description:
+          "Please enter the email address you want to use with your account.",
+      }}
+    >
+      <form action={formAction}>
+        <AccountCardBody>
+          <Input defaultValue={email ?? ""} name="email" />
+        </AccountCardBody>
+        <AccountCardFooter description="We will email vou to verify the change.">
+          <Submit />
+        </AccountCardFooter>
+      </form>
+    </AccountCard>
+  );
+}
+
+const Submit = () => {
+  const { pending } = useFormStatus();
+  return <Button disabled={pending}>Update Email</Button>;
+};
+

src/app/(app)/account/UpdateNameCard.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect } from "react";
+import { useFormState, useFormStatus } from "react-dom";
+
+import { AccountCard, AccountCardFooter, AccountCardBody } from "./AccountCard";
+import { updateUser } from "@/lib/actions/users";
+
+import { toast } from "sonner";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+export default function UpdateNameCard({ name }: { name: string }) {
+  const [state, formAction] = useFormState(updateUser, {
+    error: "",
+  });
+
+  useEffect(() => {
+    if (state.success == true) toast.success("Updated User");
+    if (state.error) toast.error("Error", { description: state.error });
+  }, [state]);
+
+  return (
+    <AccountCard
+      params={{
+        header: "Your Name",
+        description:
+          "Please enter your full name, or a display name you are comfortable with.",
+      }}
+    >
+      <form action={formAction}>
+        <AccountCardBody>
+          <Input defaultValue={name ?? ""} name="name" />
+        </AccountCardBody>
+        <AccountCardFooter description="64 characters maximum">
+          <Submit />
+        </AccountCardFooter>
+      </form>
+    </AccountCard>
+  );
+}
+
+const Submit = () => {
+  const { pending } = useFormStatus();
+  return <Button disabled={pending}>Update Name</Button>;
+};

src/app/(app)/account/UserSettings.tsx

@@ -0,0 +1,17 @@
+"use client";
+import UpdateNameCard from "./UpdateNameCard";
+import UpdateEmailCard from "./UpdateEmailCard";
+import { AuthSession } from "@/lib/auth/utils";
+
+export default function UserSettings({
+  session,
+}: {
+  session: AuthSession["session"];
+}) {
+  return (
+    <>
+      <UpdateNameCard name={session?.user.name ?? ""} />
+      <UpdateEmailCard email={session?.user.email ?? ""} />
+    </>
+  );
+}

src/app/(app)/account/page.tsx

@@ -0,0 +1,16 @@
+import UserSettings from "./UserSettings";
+import { checkAuth, getUserAuth } from "@/lib/auth/utils";
+
+export default async function Account() {
+  await checkAuth();
+  const { session } = await getUserAuth();
+
+  return (
+    <main>
+      <h1 className="text-2xl font-semibold my-4">Account</h1>
+      <div className="space-y-4">
+        <UserSettings session={session} />
+      </div>
+    </main>
+  );
+}

src/app/(app)/dashboard/page.tsx

@@ -0,0 +1,15 @@
+import SignOutBtn from "@/components/auth/SignOutBtn";
+import { getUserAuth } from "@/lib/auth/utils";
+
+export default async function Home() {
+  const { session } = await getUserAuth();
+  return (
+    <main className="">
+      <h1 className="text-2xl font-bold my-2">Profile</h1>
+      <pre className="bg-secondary p-4 rounded-lg my-2">
+        {JSON.stringify(session, null, 2)}
+      </pre>
+      <SignOutBtn />
+    </main>
+  );
+}

src/app/(app)/layout.tsx

@@ -0,0 +1,20 @@
+import { checkAuth } from "@/lib/auth/utils";
+import { Toaster } from "@/components/ui/sonner";
+import Navbar from "@/components/Navbar";
+import Sidebar from "@/components/Sidebar";
+export default async function AppLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  await checkAuth();
+  return ( <main><div className="flex h-screen">
+<Sidebar />
+<main className="flex-1 md:p-8 pt-2 p-8 overflow-y-auto">
+<Navbar />
+{children}
+</main>
+</div>
+<Toaster richColors />
+</main> )
+}