implement authentik auth

bun.lock

@@ -17,6 +17,7 @@
         "lucide-react": "^0.539.0",
         "nanoid": "^5.1.5",
         "next": "15.4.6",
+        "next-auth": "^5.0.0-beta.29",
         "next-themes": "^0.4.6",
         "react": "19.1.0",
         "react-dom": "19.1.0",
@@ -42,6 +43,8 @@
   "packages": {
     "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],
 
+    "@auth/core": ["@auth/core@0.40.0", "", { "dependencies": { "@panva/hkdf": "^1.2.1", "jose": "^6.0.6", "oauth4webapi": "^3.3.0", "preact": "10.24.3", "preact-render-to-string": "6.5.11" }, "peerDependencies": { "@simplewebauthn/browser": "^9.0.1", "@simplewebauthn/server": "^9.0.2", "nodemailer": "^6.8.0" }, "optionalPeers": ["@simplewebauthn/browser", "@simplewebauthn/server", "nodemailer"] }, "sha512-n53uJE0RH5SqZ7N1xZoMKekbHfQgjd0sAEyUbE+IYJnmuQkbvuZnXItCU7d+i7Fj8VGOgqvNO7Mw4YfBTlZeQw=="],
+
     "@emnapi/core": ["@emnapi/core@1.4.5", "", { "dependencies": { "@emnapi/wasi-threads": "1.0.4", "tslib": "^2.4.0" } }, "sha512-XsLw1dEOpkSX/WucdqUhPWP7hDxSvZiY+fsUC14h+FtQ2Ifni4znbBt8punRX+Uj2JG/uDb8nEHVKvrVlvdZ5Q=="],
 
     "@emnapi/runtime": ["@emnapi/runtime@1.4.5", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-++LApOtY0pEEz1zrd9vy1/zXVaVJJ/EbAF3u0fXIzPJEDtnITsBGbbK0EkM72amhl/R5b+5xx0Y/QhcVOpuulg=="],
@@ -168,6 +171,8 @@
 
     "@nolyfill/is-core-module": ["@nolyfill/is-core-module@1.0.39", "", {}, "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA=="],
 
+    "@panva/hkdf": ["@panva/hkdf@1.2.1", "", {}, "sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw=="],
+
     "@radix-ui/number": ["@radix-ui/number@1.1.1", "", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],
 
     "@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
@@ -640,6 +645,8 @@
 
     "jiti": ["jiti@2.5.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w=="],
 
+    "jose": ["jose@6.0.12", "", {}, "sha512-T8xypXs8CpmiIi78k0E+Lk7T2zlK4zDyg+o1CZ4AkOHgDg98ogdP2BeZ61lTFKFyoEwJ9RgAgN+SdM3iPgNonQ=="],
+
     "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
 
     "js-yaml": ["js-yaml@4.1.0", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA=="],
@@ -720,8 +727,12 @@
 
     "next": ["next@15.4.6", "", { "dependencies": { "@next/env": "15.4.6", "@swc/helpers": "0.5.15", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.4.6", "@next/swc-darwin-x64": "15.4.6", "@next/swc-linux-arm64-gnu": "15.4.6", "@next/swc-linux-arm64-musl": "15.4.6", "@next/swc-linux-x64-gnu": "15.4.6", "@next/swc-linux-x64-musl": "15.4.6", "@next/swc-win32-arm64-msvc": "15.4.6", "@next/swc-win32-x64-msvc": "15.4.6", "sharp": "^0.34.3" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-us++E/Q80/8+UekzB3SAGs71AlLDsadpFMXVNM/uQ0BMwsh9m3mr0UNQIfjKed8vpWXsASe+Qifrnu1oLIcKEQ=="],
 
+    "next-auth": ["next-auth@5.0.0-beta.29", "", { "dependencies": { "@auth/core": "0.40.0" }, "peerDependencies": { "@simplewebauthn/browser": "^9.0.1", "@simplewebauthn/server": "^9.0.2", "next": "^14.0.0-0 || ^15.0.0-0", "nodemailer": "^6.6.5", "react": "^18.2.0 || ^19.0.0-0" }, "optionalPeers": ["@simplewebauthn/browser", "@simplewebauthn/server", "nodemailer"] }, "sha512-Ukpnuk3NMc/LiOl32njZPySk7pABEzbjhMUFd5/n10I0ZNC7NCuVv8IY2JgbDek2t/PUOifQEoUiOOTLy4os5A=="],
+
     "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
 
+    "oauth4webapi": ["oauth4webapi@3.7.0", "", {}, "sha512-Q52wTPUWPsVLVVmTViXPQFMW2h2xv2jnDGxypjpelCFKaOjLsm7AxYuOk1oQgFm95VNDbuggasu9htXrz6XwKw=="],
+
     "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
 
     "object-inspect": ["object-inspect@1.13.4", "", {}, "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew=="],
@@ -762,6 +773,10 @@
 
     "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
 
+    "preact": ["preact@10.24.3", "", {}, "sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA=="],
+
+    "preact-render-to-string": ["preact-render-to-string@6.5.11", "", { "peerDependencies": { "preact": ">=10" } }, "sha512-ubnauqoGczeGISiOh6RjX0/cdaF8v/oDXIjO85XALCQjwQP+SB4RDXXtvZ6yTYSjG+PC1QRP2AhPgCEsM2EvUw=="],
+
     "prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
 
     "prop-types": ["prop-types@15.8.1", "", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],

package.json

@@ -22,6 +22,7 @@
     "lucide-react": "^0.539.0",
     "nanoid": "^5.1.5",
     "next": "15.4.6",
+    "next-auth": "^5.0.0-beta.29",
     "next-themes": "^0.4.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",

src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,2 @@
+import { handlers } from "@/auth";
+export const { GET, POST } = handlers;

src/app/components/sign-in.tsx

@@ -0,0 +1,37 @@
+import { signIn, signOut } from "@/auth"
+import { auth } from "@/auth"
+import { Button } from "@/components/ui/button"
+
+export default async function SignIn() {
+  const session = await auth()
+
+  if (session?.user) {
+    return (
+      <div className="flex items-center gap-4">
+        <form
+          action={async () => {
+            "use server"
+            await signOut()
+          }}
+        >
+          <Button type="submit" variant="secondary" >
+            Sign Out
+          </Button>
+        </form>
+      </div>
+    )
+  }
+
+  return (
+    <form
+      action={async () => {
+        "use server"
+        await signIn("authentik")
+      }}
+    >
+      <Button type="submit" variant="default" >
+        Sign In
+      </Button>
+    </form>
+  )
+}

src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Geist } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "next-themes";
 import { ModeToggle } from "@/components/mode-toggle";
+import SignIn from "./components/sign-in";
 
 const geist = Geist({ subsets: ['latin', 'cyrillic'], variable: "--font-geist-sans" })
 
@@ -30,7 +31,10 @@ export default function RootLayout({
         >
           <header className="dark:text-white text-gray-900 px-4 py-3 font-bold shadow flex justify-between items-center-safe">
             {metadata.title as string || "iCal PWA"}
-            <ModeToggle />
+            <div className="flex flex-row gap-2">
+              <SignIn />
+              <ModeToggle />
+            </div>
           </header>
           <main className="flex-1 p-4">{children}</main>
         </ThemeProvider>

src/app/page.tsx

@@ -13,8 +13,9 @@ import { addEvent, deleteEvent, getAllEvents, clearEvents, getDB } from '@/lib/d
 import { parseICS, generateICS } from '@/lib/ical'
 import type { CalendarEvent } from '@/lib/types'
 import { Textarea } from '@/components/ui/textarea'
+import { auth } from '@/auth'
 
-export default function HomePage() {
+export default async function HomePage() {
   const [events, setEvents] = useState<CalendarEvent[]>([])
   const [dialogOpen, setDialogOpen] = useState(false)
   const [editingId, setEditingId] = useState<string | null>(null)
@@ -43,6 +44,8 @@ export default function HomePage() {
     })()
   }, [])
 
+  const session = await auth()
+
   const resetForm = () => {
     setTitle('')
     setDescription('')
@@ -218,23 +221,30 @@ export default function HomePage() {
 
   return (
     <div onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop}
-      className={`p-4 min-h-[80vh] rounded border-2 border-dashed transition ${isDragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-300'
+      className={`p-4 min-h-[80vh] relative rounded border-2 border-dashed transition ${isDragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-300'
         }`}
     >
+      <div className='absolute bottom-0 w-full pb-4 text-gray-400'>
+        <div className='max-w-fit m-auto'> Drag & Drop *.ics here</div>
+      </div>
       {/* AI Toolbar */}
       <div className="flex flex-row gap-4 mb-4 items-start">
-        <div className='w-full'>
+        {session?.user && (
-          <Textarea
+          <div className='w-full'>
-            className="wrap-anywhere min-h-12"
+            <Textarea
-            placeholder='Describe event for AI to create'
+              className="wrap-anywhere min-h-12"
-            value={aiPrompt}
+              placeholder='Describe event for AI to create'
-            onChange={e => setAiPrompt(e.target.value)}
+              value={aiPrompt}
-          />
+              onChange={e => setAiPrompt(e.target.value)}
-        </div>
+            />
+          </div>
+        )}
         <div className='flex flex-row gap-2 pt-1.5'>
-          <Button onClick={handleAiCreate} disabled={aiLoading}>
+          {session?.user && (
-            {aiLoading ? 'Thinking...' : 'AI Create'}
+            <Button onClick={handleAiCreate} disabled={aiLoading}>
-          </Button>
+              {aiLoading ? 'Thinking...' : 'AI Create'}
+            </Button>
+          )}
           <Button variant="secondary" onClick={handleAiSummarize} disabled={aiLoading}>
             {aiLoading ? 'Summarizing...' : 'AI Summarize'}
           </Button>

src/auth.ts

@@ -0,0 +1,56 @@
+import NextAuth, { NextAuthConfig } from "next-auth";
+import Authentik from "next-auth/providers/authentik";
+import type { Provider } from "next-auth/providers";
+
+const providers: Provider[] = [
+	Authentik({
+		clientId: process.env.AUTH_AUTHENTIK_CLIENT_ID,
+		clientSecret: process.env.AUTH_AUTHENTIK_CLIENT_SECRET,
+		issuer: process.env.AUTH_AUTHENTIK_ISSUER,
+		authorization: {
+			params: {
+				scope: "openid email profile",
+			},
+		},
+		profile(profile) {
+			return {
+				id: profile.sub,
+				name: profile.name,
+				email: profile.email,
+				image: profile.picture,
+			};
+		},
+	}),
+];
+
+export const providerMap = providers.map((provider) => {
+	if (typeof provider === "function") {
+		const providerData = provider();
+		return { id: providerData.id, name: providerData.name };
+	} else {
+		return { id: provider.id, name: provider.name };
+	}
+});
+
+const config = {
+	providers,
+	pages: {
+		signIn: "/signin",
+		signOut: "/signout",
+	},
+	// callbacks: {
+	// 	authorized({ auth, request: { nextUrl } }) {
+	// 		const isLoggedIn = !!auth?.user;
+	// 		const isOnProtectedRoute = nextUrl.pathname.startsWith("/api/ai-event");
+	//
+	// 		if (isOnProtectedRoute) {
+	// 			if (isLoggedIn) return true;
+	// 			return false;
+	// 		} else if (isLoggedIn) {
+	// 			return Response.redirect(new URL("/api/ai-event", nextUrl));
+	// 		}
+	// 		return true;
+	// 	},
+	// },
+} satisfies NextAuthConfig;
+export const { handlers, signIn, signOut, auth } = NextAuth(config);