WIP: auth: work on adding google auth via invite

This prevents the dimensionless portal div from being treated as a flex item and creating extra gaps below the footer.

.env.example

@@ -1,7 +1,12 @@
 DATABASE_URL=file:local.db
+
 AUTH_DOMAIN=auth.lab.cazzzer.com
 AUTH_CLIENT_ID=
 AUTH_CLIENT_SECRET=
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+
+INVITE_TOKEN=GUjdsz9aREFTEBYDrA3AajUE8oVys2xW
 
 OPNSENSE_API_URL=https://opnsense.cazzzer.com
 OPNSENSE_API_KEY=

.idea/bun.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="BunSettings">
+    <option name="bunPath" value="bun" />
+  </component>
+</project>

.idea/modules.xml

@@ -2,7 +2,7 @@
 <project version="4">
   <component name="ProjectModuleManager">
     <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/vpgen-sv5.iml" filepath="$PROJECT_DIR$/.idea/vpgen-sv5.iml" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/vpgen.iml" filepath="$PROJECT_DIR$/.idea/vpgen.iml" />
     </modules>
   </component>
 </project>

bruno/opnsense-api/Delete Client.bru

@@ -0,0 +1,25 @@
+meta {
+  name: Delete Client
+  type: http
+  seq: 11
+}
+
+post {
+  url: {{base}}/api/wireguard/client/delClient/:clientUuid
+  body: none
+  auth: inherit
+}
+
+params:path {
+  clientUuid: d484d381-4d6f-4444-8e9d-9cda7b5b2243
+}
+
+body:json {
+  {
+    "current": 1,
+    "rowCount": 7,
+    "sort": {},
+    "servers": ["{{serverUuid}}"],
+    "searchPhrase": "{{searchPhrase}}"
+  }
+}

drizzle/0001_equal_unicorn.sql

@@ -0,0 +1 @@
+ALTER TABLE `users` ADD `auth_source` text DEFAULT 'authentik' NOT NULL;

drizzle/meta/0001_snapshot.json

@@ -0,0 +1,229 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "cc1fa973-1e9c-4bd6-b082-d7cf36f7342c",
+  "prevId": "48b7ce55-58f1-4b97-a144-ca733576dba6",
+  "tables": {
+    "devices": {
+      "name": "devices",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "opnsense_id": {
+          "name": "opnsense_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "public_key": {
+          "name": "public_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "private_key": {
+          "name": "private_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "pre_shared_key": {
+          "name": "pre_shared_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "devices_public_key_unique": {
+          "name": "devices_public_key_unique",
+          "columns": [
+            "public_key"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "devices_user_id_users_id_fk": {
+          "name": "devices_user_id_users_id_fk",
+          "tableFrom": "devices",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "ip_allocations": {
+      "name": "ip_allocations",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "device_id": {
+          "name": "device_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "ip_allocations_device_id_unique": {
+          "name": "ip_allocations_device_id_unique",
+          "columns": [
+            "device_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "ip_allocations_device_id_devices_id_fk": {
+          "name": "ip_allocations_device_id_devices_id_fk",
+          "tableFrom": "ip_allocations",
+          "tableTo": "devices",
+          "columnsFrom": [
+            "device_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "sessions": {
+      "name": "sessions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "sessions_user_id_users_id_fk": {
+          "name": "sessions_user_id_users_id_fk",
+          "tableFrom": "sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "auth_source": {
+          "name": "auth_source",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'authentik'"
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

drizzle/meta/_journal.json

@@ -8,6 +8,13 @@
       "when": 1736295566569,
       "tag": "0000_fair_tarantula",
       "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "6",
+      "when": 1741936760967,
+      "tag": "0001_equal_unicorn",
+      "breakpoints": true
     }
   ]
 }

package.json

@@ -20,42 +20,42 @@
 		"@oslojs/crypto": "^1.0.1",
 		"@oslojs/encoding": "^1.1.0",
 		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/adapter-node": "^5.2.11",
-		"@sveltejs/kit": "^2.15.0",
+		"@sveltejs/adapter-node": "^5.2.12",
+		"@sveltejs/kit": "^2.19.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/container-queries": "^0.1.1",
-		"@tailwindcss/forms": "^0.5.9",
-		"@tailwindcss/typography": "^0.5.15",
+		"@tailwindcss/forms": "^0.5.10",
+		"@tailwindcss/typography": "^0.5.16",
 		"@types/better-sqlite3": "^7.6.12",
 		"@types/eslint": "^9.6.1",
 		"@types/qrcode-svg": "^1.1.5",
-		"arctic": "^2.3.3",
-		"autoprefixer": "^10.4.20",
+		"arctic": "^2.3.4",
+		"autoprefixer": "^10.4.21",
 		"bits-ui": "^0.22.0",
 		"clsx": "^2.1.1",
-		"eslint": "^9.17.0",
+		"eslint": "^9.22.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.46.1",
-		"globals": "^15.14.0",
+		"globals": "^15.15.0",
 		"ip-address": "^10.0.1",
 		"lucide-svelte": "^0.469.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.2",
-		"prettier-plugin-tailwindcss": "^0.6.9",
+		"prettier": "^3.5.3",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
 		"qrcode-svg": "^1.1.0",
-		"svelte": "^5.16.0",
-		"svelte-check": "^4.1.1",
+		"svelte": "^5.23.0",
+		"svelte-check": "^4.1.5",
 		"tailwind-merge": "^2.6.0",
-		"tailwind-variants": "^0.3.0",
+		"tailwind-variants": "^0.3.1",
 		"tailwindcss": "^3.4.17",
 		"tailwindcss-animate": "^1.0.7",
-		"typescript": "^5.7.2",
-		"typescript-eslint": "^8.18.2",
-		"vite": "^6.0.6"
+		"typescript": "^5.8.2",
+		"typescript-eslint": "^8.26.1",
+		"vite": "^6.2.2"
 	},
 	"dependencies": {
 		"@libsql/client": "^0.14.0",
-		"drizzle-kit": "^0.30.1",
-		"drizzle-orm": "^0.38.3"
+		"drizzle-kit": "^0.30.5",
+		"drizzle-orm": "^0.38.4"
 	}
 }

src/lib/assets/google.svg

@@ -0,0 +1,13 @@
+<svg width="40" height="40" viewBox="10 10 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_710_6221)">
+<path d="M29.6 20.2273C29.6 19.5182 29.5364 18.8364 29.4182 18.1818H20V22.05H25.3818C25.15 23.3 24.4455 24.3591 23.3864 25.0682V27.5773H26.6182C28.5091 25.8364 29.6 23.2727 29.6 20.2273Z" fill="#4285F4"/>
+<path d="M20 30C22.7 30 24.9636 29.1045 26.6181 27.5773L23.3863 25.0682C22.4909 25.6682 21.3454 26.0227 20 26.0227C17.3954 26.0227 15.1909 24.2636 14.4045 21.9H11.0636V24.4909C12.7091 27.7591 16.0909 30 20 30Z" fill="#34A853"/>
+<path d="M14.4045 21.9C14.2045 21.3 14.0909 20.6591 14.0909 20C14.0909 19.3409 14.2045 18.7 14.4045 18.1V15.5091H11.0636C10.3864 16.8591 10 18.3864 10 20C10 21.6136 10.3864 23.1409 11.0636 24.4909L14.4045 21.9Z" fill="#FBBC04"/>
+<path d="M20 13.9773C21.4681 13.9773 22.7863 14.4818 23.8227 15.4727L26.6909 12.6045C24.9591 10.9909 22.6954 10 20 10C16.0909 10 12.7091 12.2409 11.0636 15.5091L14.4045 18.1C15.1909 15.7364 17.3954 13.9773 20 13.9773Z" fill="#E94235"/>
+</g>
+<defs>
+<clipPath id="clip0_710_6221">
+<rect width="20" height="20" fill="white" transform="translate(10 10)"/>
+</clipPath>
+</defs>
+</svg>

src/lib/components/app/auth-form/auth-form.svelte

@@ -2,14 +2,16 @@
 	import { LucideLoaderCircle } from 'lucide-svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { cn } from '$lib/utils.js';
+	import googleIcon from '$lib/assets/google.svg';
 
-	let { class: className, ...rest }: { class?: string; rest?: { [p: string]: unknown } } = $props();
+	let { inviteToken, class: className, ...rest }: { inviteToken?: string; class?: string; rest?: { [p: string]: unknown } } = $props();
 
 	let isLoading = $state(false);
 </script>
 
 <div class={cn('flex gap-6', className)} {...rest}>
-	<form method="get" action="/auth/authentik">
+	<form method="get" action="/auth/authentik{inviteToken ? `?invite=${inviteToken}` : ''}">
+		<input type="hidden" value={inviteToken} name="invite" />
 		<Button
 			type="submit"
 			onclick={() => {
@@ -28,4 +30,24 @@
 			Sign in with Authentik
 		</Button>
 	</form>
+	<form method="get" action="/auth/google">
+		<input type="hidden" value={inviteToken} name="invite" />
+		<Button
+			type="submit"
+			onclick={() => {
+				isLoading = true;
+			}}
+		>
+			{#if isLoading}
+				<LucideLoaderCircle class="mr-2 h-4 w-4 animate-spin" />
+			{:else}
+				<img
+					class="mr-2 h-4 w-4"
+					alt="Google Logo"
+					src={googleIcon}
+				/>
+			{/if}
+			Sign in with Google
+		</Button>
+	</form>
 </div>

src/lib/components/ui/dialog/dialog-content.svelte

@@ -17,7 +17,7 @@
 	} = $props();
 </script>
 
-<Dialog.Portal {...portalProps}>
+<Dialog.Portal class="absolute" {...portalProps}>
 	<Dialog.Overlay />
 	<DialogPrimitive.Content
 		bind:ref

src/lib/server/auth.ts

@@ -5,6 +5,7 @@ import { db } from '$lib/server/db';
 import * as table from '$lib/server/db/schema';
 import type { RequestEvent } from '@sveltejs/kit';
 import { dev } from '$app/environment';
+import { env } from '$env/dynamic/private';
 
 const DAY_IN_MS = 1000 * 60 * 60 * 24;
 
@@ -79,4 +80,8 @@ export async function validateSession(sessionId: string) {
 	return { session, user };
 }
 
+export function isValidInviteToken(inviteToken: string) {
+	return inviteToken === env.INVITE_TOKEN;
+}
+
 export type SessionValidationResult = Awaited<ReturnType<typeof validateSession>>;

src/lib/server/db/schema.ts

@@ -3,6 +3,7 @@ import { relations } from 'drizzle-orm';
 
 export const users = sqliteTable('users', {
 	id: text('id').primaryKey(),
+	authSource: text('auth_source').notNull().default('authentik'),
 	username: text('username').notNull(),
 	name: text('name').notNull(),
 });

src/lib/server/db/seed.ts

@@ -2,7 +2,7 @@ import { ipAllocations, users, devices } from './schema';
 import { eq } from 'drizzle-orm';
 import assert from 'node:assert';
 import { drizzle } from 'drizzle-orm/libsql';
-import * as schema from '$lib/server/db/schema';
+import * as schema from './schema';
 
 assert(process.env.DATABASE_URL, 'DATABASE_URL is not set');
 const db = drizzle(process.env.DATABASE_URL, { schema });

src/lib/server/devices/create.ts

@@ -1,62 +1,11 @@
-import type { User } from '$lib/server/db/schema';
-import { ipAllocations, devices } from '$lib/server/db/schema';
-import { db } from '$lib/server/db';
-import { opnsenseAuth, opnsenseUrl, serverPublicKey, serverUuid } from '$lib/server/opnsense';
-import { Address4, Address6 } from 'ip-address';
-import { env } from '$env/dynamic/private';
-import { and, count, eq, isNull } from 'drizzle-orm';
+import { devices, ipAllocations, type User } from '$lib/server/db/schema';
 import { err, ok, type Result } from '$lib/types';
-import type { DeviceDetails } from '$lib/devices';
+import { db } from '$lib/server/db';
+import { count, eq, isNull } from 'drizzle-orm';
+import { env } from '$env/dynamic/private';
+import { opnsenseAuth, opnsenseUrl, serverUuid } from '$lib/server/opnsense';
 import { opnsenseSanitezedUsername } from '$lib/opnsense';
-
-export async function findDevices(userId: string) {
-	return db.query.devices.findMany({
-		columns: {
-			id: true,
-			name: true,
-			publicKey: true,
-			privateKey: true,
-			preSharedKey: true,
-		},
-		with: {
-			ipAllocation: true,
-		},
-		where: eq(devices.userId, userId),
-	});
-}
-
-export async function findDevice(userId: string, deviceId: number) {
-	return db.query.devices.findFirst({
-		columns: {
-			id: true,
-			name: true,
-			publicKey: true,
-			privateKey: true,
-			preSharedKey: true,
-		},
-		with: {
-			ipAllocation: true,
-		},
-		where: and(eq(devices.userId, userId), eq(devices.id, deviceId)),
-	});
-}
-
-export function mapDeviceToDetails(
-	device: Awaited<ReturnType<typeof findDevices>>[0],
-): DeviceDetails {
-	const ips = getIpsFromIndex(device.ipAllocation.id);
-	return {
-		id: device.id,
-		name: device.name,
-		publicKey: device.publicKey,
-		privateKey: device.privateKey,
-		preSharedKey: device.preSharedKey,
-		ips,
-		vpnPublicKey: serverPublicKey,
-		vpnEndpoint: env.VPN_ENDPOINT,
-		vpnDns: env.VPN_DNS,
-	};
-}
+import { getIpsFromIndex } from './utils';
 
 export async function createDevice(params: {
 	name: string;
@@ -169,18 +118,6 @@ async function getKeys() {
 	};
 }
 
-export function getIpsFromIndex(ipIndex: number) {
-	ipIndex -= 1; // 1-indexed in the db
-	const v4StartingAddr = new Address4(env.IPV4_STARTING_ADDR);
-	const v6StartingAddr = new Address6(env.IPV6_STARTING_ADDR);
-	const v4Allowed = Address4.fromBigInt(v4StartingAddr.bigInt() + BigInt(ipIndex));
-	const v6Offset = BigInt(ipIndex) << (128n - BigInt(env.IPV6_CLIENT_PREFIX_SIZE));
-	const v6Allowed = Address6.fromBigInt(v6StartingAddr.bigInt() + v6Offset);
-	const v6AllowedShort = v6Allowed.parsedAddress.join(':');
-
-	return [v4Allowed.address + '/32', v6AllowedShort + '/' + env.IPV6_CLIENT_PREFIX_SIZE];
-}
-
 async function opnsenseCreateClient(params: {
 	username: string;
 	pubkey: string;

src/lib/server/devices/delete.ts

@@ -0,0 +1,73 @@
+import { and, eq } from 'drizzle-orm';
+import { db } from '$lib/server/db';
+import { devices } from '$lib/server/db/schema';
+import { err, ok, type Result } from '$lib/types';
+import { opnsenseAuth, opnsenseUrl } from '$lib/server/opnsense';
+
+export async function deleteDevice(
+	userId: string,
+	deviceId: number,
+): Promise<Result<null, [400 | 500, string]>> {
+	const device = await db.query.devices.findFirst({
+		columns: {
+			publicKey: true,
+		},
+		where: and(eq(devices.userId, userId), eq(devices.id, deviceId)),
+	});
+	if (!device) return err([400, 'Device not found']);
+	const opnsenseClientUuid = (await opnsenseFindClient(device.publicKey))?.['uuid'];
+	if (typeof opnsenseClientUuid !== 'string') {
+		console.error(
+			'failed to get OPNsense client for deletion for device',
+			deviceId,
+			device.publicKey,
+		);
+		return err([500, 'Error getting client from OPNsense']);
+	}
+
+	const opnsenseDeletionResult = await opnsenseDeleteClient(opnsenseClientUuid);
+	if (opnsenseDeletionResult?.['result'] !== 'deleted') {
+		console.error(
+			'failed to delete OPNsense client for device',
+			deviceId,
+			device.publicKey,
+			'\n',
+			'OPNsense client uuid:',
+			opnsenseClientUuid,
+		);
+		return err([500, 'Error deleting client in OPNsense']);
+	}
+
+	await db.delete(devices).where(eq(devices.id, deviceId));
+	return ok(null);
+}
+
+async function opnsenseFindClient(pubkey: string) {
+	const res = await fetch(`${opnsenseUrl}/api/wireguard/client/searchClient`, {
+		method: 'POST',
+		headers: {
+			Authorization: opnsenseAuth,
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+		},
+		body: JSON.stringify({
+			current: 1,
+			// "rowCount": 7,
+			sort: {},
+			searchPhrase: pubkey,
+			type: ['peer'],
+		}),
+	});
+	return (await res.json())?.rows?.[0] ?? null;
+}
+
+async function opnsenseDeleteClient(clientUuid: string) {
+	const res = await fetch(`${opnsenseUrl}/api/wireguard/client/delClient/${clientUuid}`, {
+		method: 'POST',
+		headers: {
+			Authorization: opnsenseAuth,
+			Accept: 'application/json',
+		},
+	});
+	return res.json();
+}

src/lib/server/devices/find.ts

@@ -0,0 +1,56 @@
+import { db } from '$lib/server/db';
+import { and, eq } from 'drizzle-orm';
+import { devices } from '$lib/server/db/schema';
+import type { DeviceDetails } from '$lib/devices';
+import { serverPublicKey } from '$lib/server/opnsense';
+import { env } from '$env/dynamic/private';
+import { getIpsFromIndex } from '$lib/server/devices/index';
+
+export async function findDevices(userId: string) {
+	return db.query.devices.findMany({
+		columns: {
+			id: true,
+			name: true,
+			publicKey: true,
+			privateKey: true,
+			preSharedKey: true,
+		},
+		with: {
+			ipAllocation: true,
+		},
+		where: eq(devices.userId, userId),
+	});
+}
+
+export async function findDevice(userId: string, deviceId: number) {
+	return db.query.devices.findFirst({
+		columns: {
+			id: true,
+			name: true,
+			publicKey: true,
+			privateKey: true,
+			preSharedKey: true,
+		},
+		with: {
+			ipAllocation: true,
+		},
+		where: and(eq(devices.userId, userId), eq(devices.id, deviceId)),
+	});
+}
+
+export function mapDeviceToDetails(
+	device: Awaited<ReturnType<typeof findDevices>>[0],
+): DeviceDetails {
+	const ips = getIpsFromIndex(device.ipAllocation.id);
+	return {
+		id: device.id,
+		name: device.name,
+		publicKey: device.publicKey,
+		privateKey: device.privateKey,
+		preSharedKey: device.preSharedKey,
+		ips,
+		vpnPublicKey: serverPublicKey,
+		vpnEndpoint: env.VPN_ENDPOINT,
+		vpnDns: env.VPN_DNS,
+	};
+}

src/lib/server/devices/index.ts

@@ -0,0 +1,3 @@
+export { findDevices, findDevice, mapDeviceToDetails } from './find';
+export { createDevice } from './create';
+export { getIpsFromIndex } from './utils';

src/lib/server/devices/utils.ts

@@ -0,0 +1,14 @@
+import { Address4, Address6 } from 'ip-address';
+import { env } from '$env/dynamic/private';
+
+export function getIpsFromIndex(ipIndex: number) {
+	ipIndex -= 1; // 1-indexed in the db
+	const v4StartingAddr = new Address4(env.IPV4_STARTING_ADDR);
+	const v6StartingAddr = new Address6(env.IPV6_STARTING_ADDR);
+	const v4Allowed = Address4.fromBigInt(v4StartingAddr.bigInt() + BigInt(ipIndex));
+	const v6Offset = BigInt(ipIndex) << (128n - BigInt(env.IPV6_CLIENT_PREFIX_SIZE));
+	const v6Allowed = Address6.fromBigInt(v6StartingAddr.bigInt() + v6Offset);
+	const v6AllowedShort = v6Allowed.parsedAddress.join(':');
+
+	return [v4Allowed.address + '/32', v6AllowedShort + '/' + env.IPV6_CLIENT_PREFIX_SIZE];
+}

src/lib/server/oauth.ts

@@ -1,4 +1,4 @@
-import { Authentik } from 'arctic';
+import { Authentik, Google } from 'arctic';
 import { env } from '$env/dynamic/private';
 
 export const authentik = new Authentik(
@@ -7,3 +7,9 @@ export const authentik = new Authentik(
 	env.AUTH_CLIENT_SECRET,
 	`${env.ORIGIN}/auth/authentik/callback`,
 );
+
+export const google = new Google(
+	env.GOOGLE_CLIENT_ID,
+	env.GOOGLE_CLIENT_SECRET,
+	`${env.ORIGIN}/auth/google/callback`,
+);

src/routes/auth/authentik/callback/+server.ts

@@ -1,27 +1,28 @@
-import { createSession, setSessionTokenCookie } from "$lib/server/auth";
-import { authentik } from "$lib/server/oauth";
-import { decodeIdToken } from "arctic";
+import { createSession, setSessionTokenCookie } from '$lib/server/auth';
+import { authentik } from '$lib/server/oauth';
+import { decodeIdToken } from 'arctic';
 
-import type { RequestEvent } from "@sveltejs/kit";
-import type { OAuth2Tokens } from "arctic";
+import type { RequestEvent } from '@sveltejs/kit';
+import type { OAuth2Tokens } from 'arctic';
 import { db } from '$lib/server/db';
 import { eq } from 'drizzle-orm';
 
 import * as table from '$lib/server/db/schema';
 
 export async function GET(event: RequestEvent): Promise<Response> {
-	const code = event.url.searchParams.get("code");
-	const state = event.url.searchParams.get("state");
-	const storedState = event.cookies.get("authentik_oauth_state") ?? null;
-	const codeVerifier = event.cookies.get("authentik_code_verifier") ?? null;
+	const code = event.url.searchParams.get('code');
+	const state = event.url.searchParams.get('state');
+	const storedState = event.cookies.get('authentik_oauth_state') ?? null;
+	const codeVerifier = event.cookies.get('authentik_code_verifier') ?? null;
+
 	if (code === null || state === null || storedState === null || codeVerifier === null) {
 		return new Response(null, {
-			status: 400
+			status: 400,
 		});
 	}
 	if (state !== storedState) {
 		return new Response(null, {
-			status: 400
+			status: 400,
 		});
 	}
 
@@ -31,15 +32,19 @@ export async function GET(event: RequestEvent): Promise<Response> {
 	} catch (e) {
 		// Invalid code or client credentials
 		return new Response(null, {
-			status: 400
+			status: 400,
 		});
 	}
-	const claims = decodeIdToken(tokens.idToken()) as { sub: string, preferred_username: string, name: string };
-	console.log("claims", claims);
+	const claims = decodeIdToken(tokens.idToken()) as {
+		sub: string;
+		preferred_username: string;
+		name: string;
+	};
+	console.log('claims', claims);
 	const userId: string = claims.sub;
 	const username: string = claims.preferred_username;
 
-	const existingUser = await db.query.users.findFirst({where: eq(table.users.id, userId)});
+	const existingUser = await db.query.users.findFirst({ where: eq(table.users.id, userId) });
 
 	if (existingUser) {
 		const session = await createSession(existingUser.id);
@@ -47,13 +52,14 @@ export async function GET(event: RequestEvent): Promise<Response> {
 		return new Response(null, {
 			status: 302,
 			headers: {
-				Location: "/"
-			}
+				Location: '/',
+			},
 		});
 	}
 
 	const user: table.User = {
 		id: userId,
+		authSource: 'authentik',
 		username,
 		name: claims.name as string,
 	};
@@ -65,14 +71,14 @@ export async function GET(event: RequestEvent): Promise<Response> {
 	} catch (e) {
 		console.error('failed to create user', e);
 		return new Response(null, {
-			status: 500
+			status: 500,
 		});
 	}
 
 	return new Response(null, {
 		status: 302,
 		headers: {
-			Location: "/"
-		}
+			Location: '/',
+		},
 	});
 }

src/routes/auth/google/+server.ts

@@ -0,0 +1,38 @@
+import type { RequestHandler } from './$types';
+import { generateCodeVerifier, generateState } from 'arctic';
+import { google } from '$lib/server/oauth';
+
+export const GET: RequestHandler = ({ url, cookies }) => {
+	const inviteToken = url.searchParams.get('invite');
+
+	const state = generateState();
+	const codeVerifier = generateCodeVerifier();
+	const scopes = ['openid', 'profile', 'email'];
+	const authUrl = google.createAuthorizationURL(state, codeVerifier, scopes);
+
+	cookies.set('google_oauth_state', state, {
+		path: '/',
+		httpOnly: true,
+		maxAge: 60 * 10, // 10 minutes
+		sameSite: 'lax',
+	});
+	cookies.set('google_code_verifier', codeVerifier, {
+		path: '/',
+		httpOnly: true,
+		maxAge: 60 * 10, // 10 minutes
+		sameSite: 'lax',
+	});
+	if (inviteToken !== null) cookies.set('invite_token', inviteToken, {
+		path: '/',
+		httpOnly: true,
+		maxAge: 60 * 10, // 10 minutes
+		sameSite: 'lax',
+	});
+
+	return new Response(null, {
+		status: 302,
+		headers: {
+			Location: authUrl.toString(),
+		},
+	});
+};

src/routes/auth/google/callback/+server.ts

@@ -0,0 +1,97 @@
+import type { RequestHandler } from './$types';
+import * as arctic from 'arctic';
+import { google } from '$lib/server/oauth';
+import { db } from '$lib/server/db';
+import { eq } from 'drizzle-orm';
+import * as table from '$lib/server/db/schema';
+import { createSession, isValidInviteToken, setSessionTokenCookie } from '$lib/server/auth';
+import type { OAuth2Tokens } from 'arctic';
+
+export const GET: RequestHandler = async (event) => {
+	const { url, cookies } = event;
+	const code = url.searchParams.get('code');
+	const state = url.searchParams.get('state');
+	const storedState = cookies.get('google_oauth_state') ?? null;
+	const codeVerifier = cookies.get('google_code_verifier', ) ?? null;
+	const inviteToken = cookies.get('invite_token') ?? null;
+
+	if (code === null || state === null || storedState === null || codeVerifier === null) {
+		return new Response(null, {
+			status: 400,
+		});
+	}
+
+	let tokens: OAuth2Tokens;
+	try {
+		tokens = await google.validateAuthorizationCode(code, codeVerifier);
+	} catch (e) {
+		if (e instanceof arctic.OAuth2RequestError) {
+			// Invalid authorization code, credentials, or redirect URI
+			console.debug(e);
+			console.debug(state)
+			return new Response(null, {
+				status: 400,
+			});
+		}
+		if (e instanceof arctic.ArcticFetchError) {
+			// Failed to call `fetch()`
+			console.debug(e.cause);
+			return new Response(null, {
+				status: 400,
+			});
+		}
+	}
+
+	const accessToken = tokens.accessToken();
+	const idToken = tokens.idToken();
+	const claims = arctic.decodeIdToken(idToken) as {
+		sub: string;
+		email: string;
+		name: string;
+	};
+
+	console.log('claims', claims);
+
+	const userId = claims.sub;
+	const existingUser = await db.query.users.findFirst({ where: eq(table.users.id, userId) });
+
+	if (existingUser) {
+		const session = await createSession(existingUser.id);
+		setSessionTokenCookie(event, session.id, session.expiresAt);
+		return new Response(null, {
+			status: 302,
+			headers: {
+				Location: '/',
+			},
+		});
+	}
+
+	// TODO: proper error page
+	if (inviteToken === null || !isValidInviteToken(inviteToken)) {
+		return new Response(null, {
+			status: 400,
+		});
+	}
+
+	const user: table.User = {
+		id: userId,
+		authSource: 'google',
+		username: claims.email,
+		name: claims.name,
+	};
+
+	// TODO: proper error handling, delete cookies
+	await db.insert(table.users).values(user);
+	console.log('created user', user, 'with invite token', inviteToken);
+
+	const session = await createSession(user.id);
+
+	setSessionTokenCookie(event, session.id, session.expiresAt);
+
+	return new Response(null, {
+		status: 302,
+		headers: {
+			Location: '/',
+		},
+	});
+};

src/routes/devices/+page.server.ts

@@ -1,13 +1,13 @@
 import type { Actions } from './$types';
 import { createDevice } from '$lib/server/devices';
-import { error, redirect } from '@sveltejs/kit';
+import { error, fail, redirect } from '@sveltejs/kit';
 
 export const actions = {
 	create: async (event) => {
 		if (!event.locals.user) return error(401, 'Unauthorized');
 		const formData = await event.request.formData();
 		const name = formData.get('name');
-		if (typeof name !== 'string' || name.trim() === '') return error(400, 'Invalid name');
+		if (typeof name !== 'string' || name.trim() === '') return fail(400, { name, invalid: true });
 		const res = await createDevice({
 			name: name.trim(),
 			user: event.locals.user,

src/routes/devices/+page.svelte

@@ -8,6 +8,7 @@
 	import type { PageData } from './$types';
 	import { Label } from '$lib/components/ui/label';
 	import { page } from '$app/state';
+	import DeleteDevice from './delete-device.svelte';
 
 	const { data }: { data: PageData } = $props();
 
@@ -56,6 +57,9 @@
 						<Badge class="select-auto bg-background" variant="secondary">{ip}</Badge>
 					{/each}
 				</Table.Cell>
+				<Table.Cell class="py-0">
+					<DeleteDevice device={device} />
+				</Table.Cell>
 			</Table.Row>
 		{/each}
 	</Table.Body>
@@ -86,11 +90,11 @@
 					class="max-w-[20ch]"
 				/>
 			</div>
-			<Dialog.Footer>
-				<Button type="submit" disabled={submitted}>
+			<Dialog.Footer class="gap-y-2">
 				{#if submitted}
-						<LucideLoaderCircle class="size-4 mr-2 animate-spin" />
+					<LucideLoaderCircle class="size-4 animate-spin place-self-center" />
 				{/if}
+				<Button type="submit" disabled={submitted} class="">
 					Add
 				</Button>
 			</Dialog.Footer>

src/routes/devices/[id]/+page.server.ts

@@ -0,0 +1,23 @@
+import { error, redirect } from '@sveltejs/kit';
+import { deleteDevice } from '$lib/server/devices/delete';
+import type { Actions } from './$types';
+
+export const actions = {
+	delete: async (event) => {
+		if (!event.locals.user) return error(401, 'Unauthorized');
+
+		const deviceId = Number.parseInt(event.params.id);
+		if (Number.isNaN(deviceId)) return error(400, 'Invalid device id');
+
+		const res = await deleteDevice(event.locals.user.id, deviceId);
+		switch (res._tag) {
+			case 'ok': {
+				return redirect(303, '/devices');
+			}
+			case 'err': {
+				const [status, message] = res.error;
+				return error(status, message);
+			}
+		}
+	},
+} satisfies Actions;

src/routes/devices/[id]/+page.svelte

@@ -3,6 +3,7 @@
 	import QRCode from 'qrcode-svg';
 	import { CodeSnippet } from '$lib/components/app/code-snippet';
 	import { WireguardGuide } from '$lib/components/app/wireguard-guide';
+	import DeleteDevice from '../delete-device.svelte';
 
 	const { data }: { data: PageData } = $props();
 
@@ -25,7 +26,10 @@
 	<title>{data.device.name}</title>
 </svelte:head>
 
-<h1 class="w-fit rounded-lg bg-accent p-2 text-lg">{data.device.name}</h1>
+<div class="flex justify-between">
+	<h1 class="w-fit rounded-lg bg-accent p-2 text-lg">{data.device.name}</h1>
+	<DeleteDevice device={data.device} />
+</div>
 
 <section id="device-configuration" class="flex flex-wrap items-center justify-center gap-4">
 	<CodeSnippet data={data.config} filename={deviceWgCleanedName} copy download />

src/routes/devices/delete-device.svelte

@@ -0,0 +1,37 @@
+<script>
+	import { Button, buttonVariants } from '$lib/components/ui/button';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { LucideLoaderCircle, LucideTrash } from 'lucide-svelte';
+
+	const { device } = $props();
+	let submitted = $state(false);
+</script>
+
+<Dialog.Root>
+	<Dialog.Trigger class={buttonVariants({ variant: 'destructive', size: 'sm', class: 'bg-accent hover:bg-destructive' })}>
+		<LucideTrash />
+	</Dialog.Trigger>
+	<Dialog.Content>
+		<form class="contents" method="post" action="/devices/{device.id}?/delete"
+					onsubmit={() => submitted = true}
+		>
+			<Dialog.Header>
+				Are you sure you want to permanently delete "{device.name}"?
+			</Dialog.Header>
+			You will no longer be able to connect from this device.
+			<Dialog.Footer class="gap-y-2">
+				{#if submitted}
+					<LucideLoaderCircle class="size-4 animate-spin place-self-center" />
+				{/if}
+				<Button type="submit" variant="destructive" disabled={submitted}>
+					Delete
+				</Button>
+				<Dialog.Close asChild let:builder>
+					<button class={buttonVariants()} disabled={submitted} use:builder.action {...builder}>
+						Cancel
+					</button>
+				</Dialog.Close>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

src/routes/invite/[id]/+layout.server.ts

@@ -0,0 +1,7 @@
+import type { LayoutServerLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+import { isValidInviteToken } from '$lib/server/auth';
+
+export const load: LayoutServerLoad = ({ params }) => {
+	if (!isValidInviteToken(params.id)) redirect(307, '/')
+};

src/routes/invite/[id]/+page.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AuthForm } from '$lib/components/app/auth-form';
+	import { page } from '$app/state';
+
+	let inviteToken = page.params.id;
+</script>
+
+<svelte:head>
+	<title>You are Invited to VPGen</title>
+</svelte:head>
+
+<h1 class="mb-2 scroll-m-20 text-center text-3xl font-extrabold tracking-tight lg:text-4xl">
+	Welcome to VPGen
+</h1>
+
+<AuthForm inviteToken={inviteToken} />