fix: use corrected user ids for submission fields on the api

app/routes/settings/auth-keys/actions.ts

@@ -45,9 +45,9 @@ async function addPreAuthKey(
 	apiKey: string,
 	context: LoadContext,
 ) {
-	const user = formData.get('user')?.toString();
+	const user = formData.get('user_id')?.toString();
 	if (!user) {
-		return data('Missing `user` in the form data.', {
+		return data('Missing `user_id` in the form data.', {
 			status: 400,
 		});
 	}
@@ -83,7 +83,7 @@ async function addPreAuthKey(
 		'v1/preauthkey',
 		apiKey,
 		{
-			user: user,
+			user,
 			ephemeral: ephemeral === 'on',
 			reusable: reusable === 'on',
 			expiration: date.toISOString(),
@@ -106,9 +106,9 @@ async function expirePreAuthKey(
 		});
 	}
 
-	const user = formData.get('user')?.toString();
+	const user = formData.get('user_id')?.toString();
 	if (!user) {
-		return data('Missing `user` in the form data.', {
+		return data('Missing `user_id` in the form data.', {
 			status: 400,
 		});
 	}

app/routes/settings/auth-keys/dialogs/add-auth-key.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { Key, useState } from 'react';
 import { useFetcher } from 'react-router';
 import Dialog from '~/components/Dialog';
 import Link from '~/components/Link';
@@ -15,6 +15,7 @@ interface AddAuthKeyProps {
 export default function AddAuthKey(data: AddAuthKeyProps) {
 	const [reusable, setReusable] = useState(false);
 	const [ephemeral, setEphemeral] = useState(false);
+	const [userId, setUserId] = useState<Key | null>(data.users[0]?.id);
 
 	return (
 		<Dialog>
@@ -22,6 +23,7 @@ export default function AddAuthKey(data: AddAuthKeyProps) {
 			<Dialog.Panel>
 				<Dialog.Title>Generate auth key</Dialog.Title>
 				<input type="hidden" name="action_id" value="add_preauthkey" />
+				<input type="hidden" name="user_id" value={userId?.toString()} />
 				<Select
 					isRequired
 					label="User"
@@ -29,9 +31,12 @@ export default function AddAuthKey(data: AddAuthKeyProps) {
 					placeholder="Select a user"
 					description="This is the user machines will belong to when they authenticate."
 					className="mb-2"
+					onSelectionChange={(value) => {
+						setUserId(value);
+					}}
 				>
 					{data.users.map((user) => (
-						<Select.Item key={user.name}>{user.name}</Select.Item>
+						<Select.Item key={user.id}>{user.name}</Select.Item>
 					))}
 				</Select>
 				<NumberInput

app/routes/settings/auth-keys/dialogs/expire-auth-key.tsx

@@ -13,9 +13,7 @@ export default function ExpireAuthKey({ authKey, user }: ExpireAuthKeyProps) {
 			<Dialog.Panel variant="destructive">
 				<Dialog.Title>Expire auth key?</Dialog.Title>
 				<input type="hidden" name="action_id" value="expire_preauthkey" />
-				{/* TODO: Why is Headscale using email as the user ID here?
-				https://github.com/juanfont/headscale/issues/2520 */}
-				<input type="hidden" name="user" value={user.name} />
+				<input type="hidden" name="user_id" value={user.id} />
 				<input type="hidden" name="key" value={authKey.key} />
 				<Dialog.Text>
 					Expiring this authentication key will immediately prevent it from