feat: self-service user signup (#672)

Co-authored-by: Elias Schneider <login@eliasschneider.com>
2026-02-04 15:04:43 +00:00 · 2025-06-27 15:01:10 -05:00
parent 1fdb058386
commit dcd1ae96e0
49 changed files with 7366 additions and 5729 deletions
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -65,7 +65,7 @@
 	"do_you_want_to_sign_out_of_pocketid_with_the_account": "Do you want to sign out of {appName} with the account <b>{username}</b>?",
 	"sign_in_to_appname": "Sign in to {appName}",
 	"please_try_to_sign_in_again": "Please try to sign in again.",
-	"authenticate_yourself_with_your_passkey_to_access_the_admin_panel": "Authenticate yourself with your passkey to access the admin panel.",
+	"authenticate_with_passkey_to_access_account": "Authenticate yourself with your passkey to access your account.",
 	"authenticate": "Authenticate",
 	"appname_setup": "{appName} Setup",
 	"please_try_again": "Please try again.",
@@ -379,5 +379,43 @@
 	"custom_accent_color": "Custom Accent Color",
 	"custom_accent_color_description": "Enter a custom color using valid CSS color formats (e.g., hex, rgb, hsl).",
 	"color_value": "Color Value",
-	"apply": "Apply"
+	"apply": "Apply",
+	"signup_token": "Signup Token",
+	"create_a_signup_token_to_allow_new_user_registration": "Create a signup token to allow new user registration.",
+	"usage_limit": "Usage Limit",
+	"number_of_times_token_can_be_used": "Number of times the signup token can be used.",
+	"expires": "Expires",
+	"signup": "Sign Up",
+	"signup_requires_valid_token": "A valid signup token is required to create an account.",
+	"validating_signup_token": "Validating signup token",
+	"go_to_login": "Go to login",
+	"signup_to_appname": "Sign Up to {appName}",
+	"create_your_account_to_get_started": "Create your account to get started.",
+	"setup_your_passkey": "Set up your passkey",
+	"create_a_passkey_to_securely_access_your_account": "Create a passkey to securely access your account. This will be your primary way to sign in.",
+	"skip_for_now": "Skip for now",
+	"account_created": "Account Created",
+	"enable_user_signups": "Enable User Signups",
+	"enable_user_signups_description": "Whether the User Signup functionality should be enabled.",
+	"user_signups_are_disabled": "User signups are currently disabled.",
+	"create_signup_token": "Create Signup Token",
+	"view_active_signup_tokens": "View Active Signup Tokens",
+	"manage_signup_tokens": "Manage Signup Tokens",
+	"view_and_manage_active_signup_tokens": "View and manage active signup tokens.",
+	"signup_token_deleted_successfully": "Signup token deleted successfully.",
+	"expired": "Expired",
+	"used_up": "Used Up",
+	"active": "Active",
+	"usage": "Usage",
+	"created": "Created",
+	"token": "Token",
+	"loading": "Loading",
+	"delete_signup_token": "Delete Signup Token",
+	"are_you_sure_you_want_to_delete_this_signup_token": "Are you sure you want to delete this signup token? This action cannot be undone.",
+	"signup_disabled_description": "User signups are completely disabled. Only administrators can create new user accounts.",
+	"signup_with_token": "Signup with token",
+	"signup_with_token_description": "Users can only sign up using a valid signup token created by an administrator.",
+	"signup_open": "Open Signup",
+	"signup_open_description": "Anyone can create a new account without restrictions.",
+	"of": "of"
 }
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,60 +1,60 @@
 {
-  "name": "pocket-id-frontend",
-  "version": "1.4.1",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite dev --port 3000",
-    "build": "vite build",
-    "preview": "vite preview --port 3000",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write ."
-  },
-  "dependencies": {
-    "@simplewebauthn/browser": "^13.1.0",
-    "@tailwindcss/vite": "^4.1.7",
-    "axios": "^1.8.2",
-    "clsx": "^2.1.1",
-    "jose": "^5.9.6",
-    "qrcode": "^1.5.4",
-    "sveltekit-superforms": "^2.23.1",
-    "tailwind-merge": "^3.3.0",
-    "zod": "^3.25.55"
-  },
-  "devDependencies": {
-    "@inlang/paraglide-js": "^2.0.13",
-    "@inlang/plugin-m-function-matcher": "^2.0.10",
-    "@inlang/plugin-message-format": "^4.0.0",
-    "@internationalized/date": "^3.8.2",
-    "@lucide/svelte": "^0.513.0",
-    "@playwright/test": "^1.50.0",
-    "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.20.7",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@types/eslint": "^9.6.1",
-    "@types/node": "^22.10.10",
-    "@types/qrcode": "^1.5.5",
-    "bits-ui": "^2.5.0",
-    "eslint": "^9.19.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-svelte": "^2.46.1",
-    "formsnap": "^2.0.1",
-    "globals": "^15.14.0",
-    "mode-watcher": "^1.0.7",
-    "prettier": "^3.4.2",
-    "prettier-plugin-svelte": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "svelte": "^5.31.1",
-    "svelte-check": "^4.1.4",
-    "svelte-sonner": "^1.0.1",
-    "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.1.7",
-    "tslib": "^2.8.1",
-    "tw-animate-css": "^1.3.0",
-    "typescript": "^5.7.3",
-    "typescript-eslint": "^8.21.0",
-    "vite": "^6.3.4"
-  }
+	"name": "pocket-id-frontend",
+	"version": "1.4.1",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev --port 3000",
+		"build": "vite build",
+		"preview": "vite preview --port 3000",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"dependencies": {
+		"@simplewebauthn/browser": "^13.1.0",
+		"@tailwindcss/vite": "^4.1.7",
+		"axios": "^1.8.2",
+		"clsx": "^2.1.1",
+		"jose": "^5.9.6",
+		"qrcode": "^1.5.4",
+		"sveltekit-superforms": "^2.23.1",
+		"tailwind-merge": "^3.3.0",
+		"zod": "^3.25.55"
+	},
+	"devDependencies": {
+		"@inlang/paraglide-js": "^2.0.13",
+		"@inlang/plugin-m-function-matcher": "^2.0.10",
+		"@inlang/plugin-message-format": "^4.0.0",
+		"@internationalized/date": "^3.8.2",
+		"@lucide/svelte": "^0.522.0",
+		"@playwright/test": "^1.50.0",
+		"@sveltejs/adapter-static": "^3.0.8",
+		"@sveltejs/kit": "^2.20.7",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@types/eslint": "^9.6.1",
+		"@types/node": "^22.10.10",
+		"@types/qrcode": "^1.5.5",
+		"bits-ui": "^2.8.8",
+		"eslint": "^9.19.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^2.46.1",
+		"formsnap": "^2.0.1",
+		"globals": "^15.14.0",
+		"mode-watcher": "^1.0.7",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"svelte": "^5.31.1",
+		"svelte-check": "^4.1.4",
+		"svelte-sonner": "^1.0.1",
+		"tailwind-variants": "^1.0.0",
+		"tailwindcss": "^4.1.7",
+		"tslib": "^2.8.1",
+		"tw-animate-css": "^1.3.0",
+		"typescript": "^5.7.3",
+		"typescript-eslint": "^8.21.0",
+		"vite": "^6.3.4"
+	}
 }
--- a/frontend/src/lib/components/form/form-input.svelte
+++ b/frontend/src/lib/components/form/form-input.svelte
@@ -72,7 +72,7 @@
 			{/if}
 		{/if}
 		{#if input?.error}
-			<p class="text-destructive mt-1 text-xs">{input.error}</p>
+			<p class="text-destructive mt-1 text-xs text-start">{input.error}</p>
 		{/if}
 	</div>
 </div>
--- a/frontend/src/lib/components/header/header.svelte
+++ b/frontend/src/lib/components/header/header.svelte
@@ -5,7 +5,13 @@
 	import Logo from '../logo.svelte';
 	import HeaderAvatar from './header-avatar.svelte';

-	const authUrls = [/^\/authorize$/, /^\/device$/, /^\/login(?:\/.*)?$/, /^\/logout$/];
+	const authUrls = [
+		/^\/authorize$/,
+		/^\/device$/,
+		/^\/login(?:\/.*)?$/,
+		/^\/logout$/,
+		/^\/signup(?:\/.*)?$/
+	];

 	let isAuthPage = $derived(
 		!page.error && authUrls.some((pattern) => pattern.test(page.url.pathname))
--- a/frontend/src/lib/components/signup/signup-form.svelte
+++ b/frontend/src/lib/components/signup/signup-form.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import FormInput from '$lib/components/form/form-input.svelte';
+	import { m } from '$lib/paraglide/messages';
+	import type { UserSignUp } from '$lib/types/user.type';
+	import { preventDefault } from '$lib/utils/event-util';
+	import { createForm } from '$lib/utils/form-util';
+	import { tryCatch } from '$lib/utils/try-catch-util';
+	import { z } from 'zod/v4';
+
+	let {
+		callback,
+		isLoading
+	}: {
+		callback: (user: UserSignUp) => Promise<boolean>;
+		isLoading: boolean;
+	} = $props();
+
+	const initialData: UserSignUp = {
+		firstName: '',
+		lastName: '',
+		email: '',
+		username: ''
+	};
+
+	const formSchema = z.object({
+		firstName: z.string().min(1).max(50),
+		lastName: z.string().max(50).optional(),
+		username: z
+			.string()
+			.min(2)
+			.max(30)
+			.regex(/^[a-z0-9_@.-]+$/, m.username_can_only_contain()),
+		email: z.email()
+	});
+	type FormSchema = typeof formSchema;
+
+	const { inputs, ...form } = createForm<FormSchema>(formSchema, initialData);
+
+	let userData: UserSignUp | null = $state(null);
+
+	async function onSubmit() {
+		const data = form.validate();
+		if (!data) return;
+
+		isLoading = true;
+		const result = await tryCatch(callback(data));
+		if (result.data) {
+			userData = data;
+			isLoading = false;
+		}
+	}
+</script>
+
+<form id="sign-up-form" onsubmit={preventDefault(onSubmit)} class="w-full">
+	<div class="mt-7 space-y-4">
+		<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+			<FormInput label={m.first_name()} bind:input={$inputs.firstName} />
+			<FormInput label={m.last_name()} bind:input={$inputs.lastName} />
+		</div>
+
+		<FormInput label={m.username()} bind:input={$inputs.username} />
+		<FormInput label={m.email()} bind:input={$inputs.email} type="email" />
+	</div>
+</form>
--- a/frontend/src/lib/components/signup/signup-token-list-modal.svelte
+++ b/frontend/src/lib/components/signup/signup-token-list-modal.svelte
@@ -0,0 +1,185 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import AdvancedTable from '$lib/components/advanced-table.svelte';
+	import { openConfirmDialog } from '$lib/components/confirm-dialog/';
+	import { Badge, type BadgeVariant } from '$lib/components/ui/badge';
+	import { Button, buttonVariants } from '$lib/components/ui/button';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import * as Table from '$lib/components/ui/table';
+	import { m } from '$lib/paraglide/messages';
+	import UserService from '$lib/services/user-service';
+	import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
+	import type { SignupTokenDto } from '$lib/types/signup-token.type';
+	import { axiosErrorToast } from '$lib/utils/error-util';
+	import { Copy, Ellipsis, Trash2 } from '@lucide/svelte';
+	import { toast } from 'svelte-sonner';
+
+	let {
+		open = $bindable(),
+		signupTokens = $bindable(),
+		signupTokensRequestOptions,
+		onTokenDeleted
+	}: {
+		open: boolean;
+		signupTokens: Paginated<SignupTokenDto>;
+		signupTokensRequestOptions: SearchPaginationSortRequest;
+		onTokenDeleted?: () => Promise<void>;
+	} = $props();
+
+	const userService = new UserService();
+
+	function formatDate(dateStr: string | undefined) {
+		if (!dateStr) return m.never();
+		return new Date(dateStr).toLocaleString();
+	}
+
+	async function deleteToken(token: SignupTokenDto) {
+		openConfirmDialog({
+			title: m.delete_signup_token(),
+			message: m.are_you_sure_you_want_to_delete_this_signup_token(),
+			confirm: {
+				label: m.delete(),
+				destructive: true,
+				action: async () => {
+					try {
+						await userService.deleteSignupToken(token.id);
+						toast.success(m.signup_token_deleted_successfully());
+
+						// Refresh the tokens
+						if (onTokenDeleted) {
+							await onTokenDeleted();
+						}
+					} catch (e) {
+						axiosErrorToast(e);
+					}
+				}
+			}
+		});
+	}
+
+	function onOpenChange(isOpen: boolean) {
+		open = isOpen;
+	}
+
+	function isTokenExpired(expiresAt: string) {
+		return new Date(expiresAt) < new Date();
+	}
+
+	function isTokenUsedUp(token: SignupTokenDto) {
+		return token.usageCount >= token.usageLimit;
+	}
+
+	function getTokenStatus(token: SignupTokenDto) {
+		if (isTokenExpired(token.expiresAt)) return 'expired';
+		if (isTokenUsedUp(token)) return 'used-up';
+		return 'active';
+	}
+
+	function getStatusBadge(status: string): { variant: BadgeVariant; text: string } {
+		switch (status) {
+			case 'expired':
+				return { variant: 'destructive', text: m.expired() };
+			case 'used-up':
+				return { variant: 'secondary', text: m.used_up() };
+			default:
+				return { variant: 'default', text: m.active() };
+		}
+	}
+
+	function copySignupLink(token: SignupTokenDto) {
+		const signupLink = `${$page.url.origin}/st/${token.token}`;
+		navigator.clipboard
+			.writeText(signupLink)
+			.then(() => {
+				toast.success(m.copied());
+			})
+			.catch((err) => {
+				axiosErrorToast(err);
+			});
+	}
+</script>
+
+<Dialog.Root {open} {onOpenChange}>
+	<Dialog.Content class="sm-min-w[500px] max-h-[90vh] min-w-[90vw] overflow-auto lg:min-w-[1000px]">
+		<Dialog.Header>
+			<Dialog.Title>{m.manage_signup_tokens()}</Dialog.Title>
+			<Dialog.Description>
+				{m.view_and_manage_active_signup_tokens()}
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="flex-1 overflow-hidden">
+			<AdvancedTable
+				items={signupTokens}
+				requestOptions={signupTokensRequestOptions}
+				withoutSearch={true}
+				onRefresh={async (options) => {
+					const result = await userService.listSignupTokens(options);
+					signupTokens = result;
+					return result;
+				}}
+				columns={[
+					{ label: m.token() },
+					{ label: m.status() },
+					{ label: m.usage(), sortColumn: 'usageCount' },
+					{ label: m.expires(), sortColumn: 'expiresAt' },
+					{ label: m.created(), sortColumn: 'createdAt' },
+					{ label: m.actions(), hidden: true }
+				]}
+			>
+				{#snippet rows({ item })}
+					<Table.Cell class="font-mono text-xs">
+						{item.token.substring(0, 2)}...{item.token.substring(item.token.length - 4)}
+					</Table.Cell>
+					<Table.Cell>
+						{@const status = getTokenStatus(item)}
+						{@const statusBadge = getStatusBadge(status)}
+						<Badge class="rounded-full" variant={statusBadge.variant}>
+							{statusBadge.text}
+						</Badge>
+					</Table.Cell>
+					<Table.Cell>
+						<div class="flex items-center gap-1">
+							{`${item.usageCount} ${m.of()} ${item.usageLimit}`}
+						</div>
+					</Table.Cell>
+					<Table.Cell class="text-sm">
+						<div class="flex items-center gap-1">
+							{formatDate(item.expiresAt)}
+						</div>
+					</Table.Cell>
+					<Table.Cell class="text-sm">
+						{formatDate(item.createdAt)}
+					</Table.Cell>
+					<Table.Cell>
+						<DropdownMenu.Root>
+							<DropdownMenu.Trigger class={buttonVariants({ variant: 'ghost', size: 'icon' })}>
+								<Ellipsis class="size-4" />
+								<span class="sr-only">{m.toggle_menu()}</span>
+							</DropdownMenu.Trigger>
+							<DropdownMenu.Content align="end">
+								<DropdownMenu.Item onclick={() => copySignupLink(item)}>
+									<Copy class="mr-2 size-4" />
+									{m.copy()}
+								</DropdownMenu.Item>
+								<DropdownMenu.Item
+									class="text-red-500 focus:!text-red-700"
+									onclick={() => deleteToken(item)}
+								>
+									<Trash2 class="mr-2 size-4" />
+									{m.delete()}
+								</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu.Root>
+					</Table.Cell>
+				{/snippet}
+			</AdvancedTable>
+		</div>
+		<Dialog.Footer class="mt-3">
+			<Button onclick={() => (open = false)}>
+				{m.close()}
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
--- a/frontend/src/lib/components/signup/signup-token-modal.svelte
+++ b/frontend/src/lib/components/signup/signup-token-modal.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import CopyToClipboard from '$lib/components/copy-to-clipboard.svelte';
+	import Qrcode from '$lib/components/qrcode/qrcode.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Input } from '$lib/components/ui/input';
+	import Label from '$lib/components/ui/label/label.svelte';
+	import * as Select from '$lib/components/ui/select/index.js';
+	import { m } from '$lib/paraglide/messages';
+	import UserService from '$lib/services/user-service';
+	import { axiosErrorToast } from '$lib/utils/error-util';
+	import { mode } from 'mode-watcher';
+
+	let {
+		open = $bindable(),
+		onTokenCreated
+	}: {
+		open: boolean;
+		onTokenCreated?: () => Promise<void>;
+	} = $props();
+
+	const userService = new UserService();
+
+	let signupToken: string | null = $state(null);
+	let signupLink: string | null = $state(null);
+	let selectedExpiration: keyof typeof availableExpirations = $state(m.one_day());
+	let usageLimit: number = $state(1);
+
+	let availableExpirations = {
+		[m.one_hour()]: 60 * 60,
+		[m.twelve_hours()]: 60 * 60 * 12,
+		[m.one_day()]: 60 * 60 * 24,
+		[m.one_week()]: 60 * 60 * 24 * 7,
+		[m.one_month()]: 60 * 60 * 24 * 30
+	};
+
+	async function createSignupToken() {
+		try {
+			const expiration = new Date(Date.now() + availableExpirations[selectedExpiration] * 1000);
+			signupToken = await userService.createSignupToken(expiration, usageLimit);
+			signupLink = `${page.url.origin}/st/${signupToken}`;
+
+			if (onTokenCreated) {
+				await onTokenCreated();
+			}
+		} catch (e) {
+			axiosErrorToast(e);
+		}
+	}
+
+	function onOpenChange(isOpen: boolean) {
+		open = isOpen;
+		if (!isOpen) {
+			signupToken = null;
+			signupLink = null;
+			selectedExpiration = m.one_day();
+			usageLimit = 1;
+		}
+	}
+</script>
+
+<Dialog.Root {open} {onOpenChange}>
+	<Dialog.Content class="max-w-md">
+		<Dialog.Header>
+			<Dialog.Title>{m.signup_token()}</Dialog.Title>
+			<Dialog.Description
+				>{m.create_a_signup_token_to_allow_new_user_registration()}</Dialog.Description
+			>
+		</Dialog.Header>
+
+		{#if signupToken === null}
+			<div class="space-y-4">
+				<div>
+					<Label for="expiration">{m.expiration()}</Label>
+					<Select.Root
+						type="single"
+						value={Object.keys(availableExpirations)[0]}
+						onValueChange={(v) => (selectedExpiration = v! as keyof typeof availableExpirations)}
+					>
+						<Select.Trigger id="expiration" class="h-9 w-full">
+							{selectedExpiration}
+						</Select.Trigger>
+						<Select.Content>
+							{#each Object.keys(availableExpirations) as key}
+								<Select.Item value={key}>{key}</Select.Item>
+							{/each}
+						</Select.Content>
+					</Select.Root>
+				</div>
+
+				<div>
+					<Label class="mb-0" for="usage-limit">{m.usage_limit()}</Label>
+					<p class="text-muted-foreground mt-1 mb-2 text-xs">
+						{m.number_of_times_token_can_be_used()}
+					</p>
+					<Input
+						id="usage-limit"
+						type="number"
+						min="1"
+						max="100"
+						bind:value={usageLimit}
+						class="h-9"
+					/>
+				</div>
+			</div>
+
+			<Dialog.Footer class="mt-4">
+				<Button
+					onclick={() => createSignupToken()}
+					disabled={!selectedExpiration || usageLimit < 1}
+				>
+					{m.create()}
+				</Button>
+			</Dialog.Footer>
+		{:else}
+			<div class="flex flex-col items-center gap-2">
+				<Qrcode
+					class="mb-2"
+					value={signupLink}
+					size={180}
+					color={mode.current === 'dark' ? '#FFFFFF' : '#000000'}
+					backgroundColor={mode.current === 'dark' ? '#000000' : '#FFFFFF'}
+				/>
+				<CopyToClipboard value={signupLink!}>
+					<p data-testId="signup-token-link" class="px-2 text-center text-sm break-all">
+						{signupLink!}
+					</p>
+				</CopyToClipboard>
+
+				<div class="text-muted-foreground mt-2 text-center text-sm">
+					<p>{m.usage_limit()}: {usageLimit}</p>
+					<p>{m.expiration()}: {selectedExpiration}</p>
+				</div>
+			</div>
+		{/if}
+	</Dialog.Content>
+</Dialog.Root>
--- a/frontend/src/lib/components/ui/dropdown-button/dropdown-button-content.svelte
+++ b/frontend/src/lib/components/ui/dropdown-button/dropdown-button-content.svelte
@@ -0,0 +1,34 @@
+<script lang="ts" module>
+	import { cn } from '$lib/utils/style.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	export type DropdownButtonContentProps = DropdownMenuPrimitive.ContentProps;
+</script>
+
+<script lang="ts">
+	let {
+		ref = $bindable(null),
+		sideOffset = 4,
+		portalProps,
+		class: className,
+		children,
+		...restProps
+	}: DropdownMenuPrimitive.ContentProps & {
+		portalProps?: DropdownMenuPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...portalProps}>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		{sideOffset}
+		class={cn(
+			'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md outline-none',
+			className
+		)}
+		{...restProps}
+	>
+		<DropdownMenuPrimitive.Arrow />
+		{@render children?.()}
+	</DropdownMenuPrimitive.Content>
+</DropdownMenuPrimitive.Portal>
--- a/frontend/src/lib/components/ui/dropdown-button/dropdown-button-item.svelte
+++ b/frontend/src/lib/components/ui/dropdown-button/dropdown-button-item.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/style.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.ItemProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+	bind:ref
+	class={cn(
+		'data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+		className
+	)}
+	{...restProps}
+/>
--- a/frontend/src/lib/components/ui/dropdown-button/dropdown-button-main.svelte
+++ b/frontend/src/lib/components/ui/dropdown-button/dropdown-button-main.svelte
@@ -0,0 +1,38 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize
+	} from '$lib/components/ui/button/button.svelte';
+
+	export type DropdownButtonMainProps = WithElementRef<HTMLButtonAttributes> & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		ref = $bindable(null),
+		type = 'button',
+		disabled,
+		children,
+		...restProps
+	}: DropdownButtonMainProps = $props();
+</script>
+
+<button
+	bind:this={ref}
+	data-slot="dropdown-button-main"
+	class={cn(buttonVariants({ variant, size }), 'rounded-r-none border-r-0', className)}
+	{type}
+	{disabled}
+	{...restProps}
+>
+	{@render children?.()}
+</button>
--- a/frontend/src/lib/components/ui/dropdown-button/dropdown-button-separator.svelte
+++ b/frontend/src/lib/components/ui/dropdown-button/dropdown-button-separator.svelte
@@ -0,0 +1,21 @@
+<script lang="ts" module>
+	import { cn } from '$lib/utils/style.js';
+
+	export type DropdownButtonSeparatorProps = DropdownMenuPrimitive.SeparatorProps;
+</script>
+
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+	bind:ref
+	class={cn('bg-muted -mx-1 my-1 h-px', className)}
+	{...restProps}
+/>
--- a/frontend/src/lib/components/ui/dropdown-button/dropdown-button-trigger.svelte
+++ b/frontend/src/lib/components/ui/dropdown-button/dropdown-button-trigger.svelte
@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize
+	} from '$lib/components/ui/button/button.svelte';
+
+	export type DropdownButtonTriggerProps = WithElementRef<HTMLButtonAttributes> & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		builders?: any[];
+	};
+</script>
+
+<script lang="ts">
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		ref = $bindable(null),
+		type = 'button',
+		disabled,
+		builders = [],
+		children,
+		...restProps
+	}: DropdownButtonTriggerProps = $props();
+</script>
+
+<button
+	bind:this={ref}
+	use:builders[0]
+	data-slot="dropdown-button-trigger"
+	class={cn(
+		buttonVariants({ variant, size }),
+		'border-l-background/20 rounded-l-none border-l px-2',
+		className
+	)}
+	{type}
+	{disabled}
+	{...restProps}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<ChevronDown class="size-4" />
+	{/if}
+</button>
--- a/frontend/src/lib/components/ui/dropdown-button/dropdown-button.svelte
+++ b/frontend/src/lib/components/ui/dropdown-button/dropdown-button.svelte
@@ -0,0 +1,19 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type DropdownButtonProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: DropdownButtonProps = $props();
+</script>
+
+<div bind:this={ref} data-slot="dropdown-button" class={cn('flex', className)} {...restProps}>
+	{@render children?.()}
+</div>
--- a/frontend/src/lib/components/ui/dropdown-button/index.ts
+++ b/frontend/src/lib/components/ui/dropdown-button/index.ts
@@ -0,0 +1,30 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+import Root from './dropdown-button.svelte';
+import Main from './dropdown-button-main.svelte';
+import Trigger from './dropdown-button-trigger.svelte';
+import Content from './dropdown-button-content.svelte';
+import Item from './dropdown-button-item.svelte';
+import Separator from './dropdown-button-separator.svelte';
+
+const DropdownRoot = DropdownMenuPrimitive.Root;
+const DropdownTrigger = DropdownMenuPrimitive.Trigger;
+
+export {
+	Root,
+	Main,
+	Trigger,
+	Content,
+	Item,
+	Separator,
+	DropdownRoot,
+	DropdownTrigger,
+	//
+	Root as DropdownButton,
+	Main as DropdownButtonMain,
+	Trigger as DropdownButtonTrigger,
+	Content as DropdownButtonContent,
+	Item as DropdownButtonItem,
+	Separator as DropdownButtonSeparator,
+	DropdownRoot as DropdownButtonRoot,
+	DropdownTrigger as DropdownButtonPrimitiveTrigger
+};
--- a/frontend/src/lib/services/user-service.ts
+++ b/frontend/src/lib/services/user-service.ts
@@ -1,7 +1,8 @@
 import userStore from '$lib/stores/user-store';
 import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
+import type { SignupTokenDto } from '$lib/types/signup-token.type';
 import type { UserGroup } from '$lib/types/user-group.type';
-import type { User, UserCreate } from '$lib/types/user.type';
+import type { User, UserCreate, UserSignUp } from '$lib/types/user.type';
 import { cachedProfilePicture } from '$lib/utils/cached-image-util';
 import { get } from 'svelte/store';
 import APIService from './api-service';
@@ -82,6 +83,14 @@ export default class UserService extends APIService {
 		return res.data.token;
 	}

+	async createSignupToken(expiresAt: Date, usageLimit: number) {
+		const res = await this.api.post(`/signup-tokens`, {
+			expiresAt,
+			usageLimit
+		});
+		return res.data.token;
+	}
+
 	async exchangeOneTimeAccessToken(token: string) {
 		const res = await this.api.post(`/one-time-access-token/${token}`);
 		return res.data as User;
@@ -99,4 +108,20 @@ export default class UserService extends APIService {
 		const res = await this.api.put(`/users/${id}/user-groups`, { userGroupIds });
 		return res.data as User;
 	}
+
+	async signup(data: UserSignUp) {
+		const res = await this.api.post(`/signup`, data);
+		return res.data as User;
+	}
+
+	async listSignupTokens(options?: SearchPaginationSortRequest) {
+		const res = await this.api.get('/signup-tokens', {
+			params: options
+		});
+		return res.data as Paginated<SignupTokenDto>;
+	}
+
+	async deleteSignupToken(tokenId: string) {
+		await this.api.delete(`/signup-tokens/${tokenId}`);
+	}
 }
--- a/frontend/src/lib/types/application-configuration.ts
+++ b/frontend/src/lib/types/application-configuration.ts
@@ -1,6 +1,7 @@
 export type AppConfig = {
 	appName: string;
 	allowOwnAccountEdit: boolean;
+	allowUserSignups: 'disabled' | 'withToken' | 'open';
 	emailOneTimeAccessAsUnauthenticatedEnabled: boolean;
 	emailOneTimeAccessAsAdminEnabled: boolean;
 	ldapEnabled: boolean;
--- a/frontend/src/lib/types/signup-token.type.ts
+++ b/frontend/src/lib/types/signup-token.type.ts
@@ -0,0 +1,8 @@
+export interface SignupTokenDto {
+	id: string;
+	token: string;
+	expiresAt: string;
+	usageLimit: number;
+	usageCount: number;
+	createdAt: string;
+}
--- a/frontend/src/lib/types/user.type.ts
+++ b/frontend/src/lib/types/user.type.ts
@@ -17,3 +17,7 @@ export type User = {
 };

 export type UserCreate = Omit<User, 'id' | 'customClaims' | 'ldapId' | 'userGroups'>;
+
+export type UserSignUp = Omit<UserCreate, 'isAdmin' | 'disabled'> & {
+	token?: string;
+};
--- a/frontend/src/lib/utils/redirection-util.ts
+++ b/frontend/src/lib/utils/redirection-util.ts
@@ -7,7 +7,13 @@ export function getAuthRedirectPath(path: string, user: User | null) {
 	const isAdmin = user?.isAdmin;

 	const isUnauthenticatedOnlyPath =
-		path == '/login' || path.startsWith('/login/') || path == '/lc' || path.startsWith('/lc/');
+		path == '/login' ||
+		path.startsWith('/login/') ||
+		path == '/lc' ||
+		path.startsWith('/lc/') ||
+		path == '/signup' ||
+		path.startsWith('/signup/') ||
+		path.startsWith('/st/');
 	const isPublicPath = ['/authorize', '/device', '/health', '/healthz'].includes(path);
 	const isAdminPath = path == '/settings/admin' || path.startsWith('/settings/admin/');

--- a/frontend/src/lib/utils/try-catch-util.ts
+++ b/frontend/src/lib/utils/try-catch-util.ts
@@ -0,0 +1,20 @@
+type Success<T> = {
+	data: T;
+	error: null;
+};
+
+type Failure<E> = {
+	data: null;
+	error: E;
+};
+
+export type Result<T, E = Error> = Success<T> | Failure<E>;
+
+export async function tryCatch<T, E = Error>(promise: Promise<T>): Promise<Result<T, E>> {
+	try {
+		const data = await promise;
+		return { data, error: null };
+	} catch (error) {
+		return { data: null, error: error as E };
+	}
+}
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -2,6 +2,7 @@
 	import { goto } from '$app/navigation';
 	import SignInWrapper from '$lib/components/login-wrapper.svelte';
 	import { Button } from '$lib/components/ui/button';
+	import { m } from '$lib/paraglide/messages';
 	import WebAuthnService from '$lib/services/webauthn-service';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import userStore from '$lib/stores/user-store';
@@ -9,7 +10,6 @@
 	import { startAuthentication } from '@simplewebauthn/browser';
 	import { fade } from 'svelte/transition';
 	import LoginLogoErrorSuccessIndicator from './components/login-logo-error-success-indicator.svelte';
-	import { m } from '$lib/paraglide/messages';
 	const webauthnService = new WebAuthnService();

 	let isLoading = $state(false);
@@ -49,10 +49,17 @@
 		</p>
 	{:else}
 		<p class="text-muted-foreground mt-2" in:fade>
-			{m.authenticate_yourself_with_your_passkey_to_access_the_admin_panel()}
+			{m.authenticate_with_passkey_to_access_account()}
 		</p>
 	{/if}
-	<Button class="mt-10" {isLoading} onclick={authenticate} autofocus={true}>
-		{error ? m.try_again() : m.authenticate()}
-	</Button>
+	<div class="mt-10 flex justify-center gap-3">
+		{#if $appConfigStore.allowUserSignups === 'open'}
+			<Button variant="secondary" href="/signup">
+				{m.signup()}
+			</Button>
+		{/if}
+		<Button {isLoading} onclick={authenticate} autofocus={true}>
+			{error ? m.try_again() : m.authenticate()}
+		</Button>
+	</div>
 </SignInWrapper>
--- a/frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte
+++ b/frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte
@@ -3,6 +3,7 @@
 	import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Label } from '$lib/components/ui/label/index.js';
+	import * as Select from '$lib/components/ui/select';
 	import { m } from '$lib/paraglide/messages';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { AllAppConfig } from '$lib/types/application-configuration';
@@ -22,11 +23,27 @@

 	let isLoading = $state(false);

+	const signupOptions = {
+		disabled: {
+			label: m.disabled(),
+			description: m.signup_disabled_description()
+		},
+		withToken: {
+			label: m.signup_with_token(),
+			description: m.signup_with_token_description()
+		},
+		open: {
+			label: m.signup_open(),
+			description: m.signup_open_description()
+		}
+	};
+
 	const updatedAppConfig = {
 		appName: appConfig.appName,
 		sessionDuration: appConfig.sessionDuration,
 		emailsVerified: appConfig.emailsVerified,
 		allowOwnAccountEdit: appConfig.allowOwnAccountEdit,
+		allowUserSignups: appConfig.allowUserSignups,
 		disableAnimations: appConfig.disableAnimations,
 		accentColor: appConfig.accentColor
 	};
@@ -36,6 +53,7 @@
 		sessionDuration: z.number().min(1).max(43200),
 		emailsVerified: z.boolean(),
 		allowOwnAccountEdit: z.boolean(),
+		allowUserSignups: z.enum(['disabled', 'withToken', 'open']),
 		disableAnimations: z.boolean(),
 		accentColor: z.string()
 	});
@@ -62,13 +80,60 @@
 				description={m.the_duration_of_a_session_in_minutes_before_the_user_has_to_sign_in_again()}
 				bind:input={$inputs.sessionDuration}
 			/>
-
+			<div class="grid gap-2">
+				<Label class="mb-0" for="enable-user-signup">{m.enable_user_signups()}</Label>
+				<p class="text-muted-foreground text-[0.8rem]">
+					{m.enable_user_signups_description()}
+				</p>
+				<Select.Root
+					disabled={$appConfigStore.uiConfigDisabled}
+					type="single"
+					value={$inputs.allowUserSignups.value}
+					onValueChange={(v) =>
+						($inputs.allowUserSignups.value = v as typeof $inputs.allowUserSignups.value)}
+				>
+					<Select.Trigger
+						class="w-full"
+						aria-label={m.enable_user_signups()}
+						placeholder={m.enable_user_signups()}
+					>
+						{signupOptions[$inputs.allowUserSignups.value]?.label}
+					</Select.Trigger>
+					<Select.Content>
+						<Select.Item value="disabled">
+							<div class="flex flex-col items-start gap-1">
+								<span class="font-medium">{signupOptions.disabled.label}</span>
+								<span class="text-muted-foreground text-xs">
+									{signupOptions.disabled.description}
+								</span>
+							</div>
+						</Select.Item>
+						<Select.Item value="withToken">
+							<div class="flex flex-col items-start gap-1">
+								<span class="font-medium">{signupOptions.withToken.label}</span>
+								<span class="text-muted-foreground text-xs">
+									{signupOptions.withToken.description}
+								</span>
+							</div>
+						</Select.Item>
+						<Select.Item value="open">
+							<div class="flex flex-col items-start gap-1">
+								<span class="font-medium">{signupOptions.open.label}</span>
+								<span class="text-muted-foreground text-xs">
+									{signupOptions.open.description}
+								</span>
+							</div>
+						</Select.Item>
+					</Select.Content>
+				</Select.Root>
+			</div>
 			<SwitchWithLabel
 				id="self-account-editing"
 				label={m.enable_self_account_editing()}
 				description={m.whether_the_users_should_be_able_to_edit_their_own_account_details()}
 				bind:checked={$inputs.allowOwnAccountEdit.value}
 			/>
+
 			<SwitchWithLabel
 				id="emails-verified"
 				label={m.emails_verified()}
--- a/frontend/src/routes/settings/admin/users/+page.svelte
+++ b/frontend/src/routes/settings/admin/users/+page.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
+	import SignupTokenListModal from '$lib/components/signup/signup-token-list-modal.svelte';
+	import SignupTokenModal from '$lib/components/signup/signup-token-modal.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
+	import * as DropdownButton from '$lib/components/ui/dropdown-button';
 	import { m } from '$lib/paraglide/messages';
 	import UserService from '$lib/services/user-service';
 	import appConfigStore from '$lib/stores/application-configuration-store';
@@ -15,8 +18,13 @@
 	let { data } = $props();
 	let users = $state(data.users);
 	let usersRequestOptions = $state(data.usersRequestOptions);
+	let signupTokens = $state(data.signupTokens);
+	let signupTokensRequestOptions = $state(data.signupTokensRequestOptions);

+	let selectedCreateOptions = $state('Add User');
 	let expandAddUser = $state(false);
+	let signupTokenModalOpen = $state(false);
+	let signupTokenListModalOpen = $state(false);

 	const userService = new UserService();

@@ -33,6 +41,10 @@
 		users = await userService.list(usersRequestOptions);
 		return success;
 	}
+
+	async function refreshSignupTokens() {
+		signupTokens = await userService.listSignupTokens(signupTokensRequestOptions);
+	}
 </script>

 <svelte:head>
@@ -55,7 +67,30 @@
 					>
 				</div>
 				{#if !expandAddUser}
-					<Button onclick={() => (expandAddUser = true)}>{m.add_user()}</Button>
+					{#if $appConfigStore.allowUserSignups !== 'disabled'}
+						<DropdownButton.DropdownRoot>
+							<DropdownButton.Root>
+								<DropdownButton.Main disabled={false} onclick={() => (expandAddUser = true)}>
+									{selectedCreateOptions}
+								</DropdownButton.Main>
+
+								<DropdownButton.DropdownTrigger>
+									<DropdownButton.Trigger class="border-l" />
+								</DropdownButton.DropdownTrigger>
+							</DropdownButton.Root>
+
+							<DropdownButton.Content align="end">
+								<DropdownButton.Item onclick={() => (signupTokenModalOpen = true)}>
+									{m.create_signup_token()}
+								</DropdownButton.Item>
+								<DropdownButton.Item onclick={() => (signupTokenListModalOpen = true)}>
+									{m.view_active_signup_tokens()}
+								</DropdownButton.Item>
+							</DropdownButton.Content>
+						</DropdownButton.DropdownRoot>
+					{:else}
+						<Button onclick={() => (expandAddUser = true)}>{m.add_user()}</Button>
+					{/if}
 				{:else}
 					<Button class="h-8 p-3" variant="ghost" onclick={() => (expandAddUser = false)}>
 						<LucideMinus class="size-5" />
@@ -86,3 +121,11 @@
 		</Card.Content>
 	</Card.Root>
 </div>
+
+<SignupTokenModal bind:open={signupTokenModalOpen} onTokenCreated={refreshSignupTokens} />
+<SignupTokenListModal
+	bind:open={signupTokenListModalOpen}
+	bind:signupTokens
+	{signupTokensRequestOptions}
+	onTokenDeleted={refreshSignupTokens}
+/>
--- a/frontend/src/routes/settings/admin/users/+page.ts
+++ b/frontend/src/routes/settings/admin/users/+page.ts
@@ -12,6 +12,22 @@ export const load: PageLoad = async () => {
 		}
 	};

-	const users = await userService.list(usersRequestOptions);
-	return { users, usersRequestOptions };
+	const signupTokensRequestOptions: SearchPaginationSortRequest = {
+		sort: {
+			column: 'createdAt',
+			direction: 'desc'
+		}
+	};
+
+	const [users, signupTokens] = await Promise.all([
+		userService.list(usersRequestOptions),
+		userService.listSignupTokens(signupTokensRequestOptions)
+	]);
+
+	return {
+		users,
+		usersRequestOptions,
+		signupTokens,
+		signupTokensRequestOptions
+	};
 };
--- a/frontend/src/routes/settings/audit-log/global/+page.svelte
+++ b/frontend/src/routes/settings/audit-log/global/+page.svelte
@@ -31,7 +31,8 @@
 		SIGN_IN: m.sign_in(),
 		TOKEN_SIGN_IN: m.token_sign_in(),
 		CLIENT_AUTHORIZATION: m.client_authorization(),
-		NEW_CLIENT_AUTHORIZATION: m.new_client_authorization()
+		NEW_CLIENT_AUTHORIZATION: m.new_client_authorization(),
+		ACCOUNT_CREATED: m.account_created()
 	});

 	$effect(() => {
--- a/frontend/src/routes/signup/+page.svelte
+++ b/frontend/src/routes/signup/+page.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import SignInWrapper from '$lib/components/login-wrapper.svelte';
+	import SignupForm from '$lib/components/signup/signup-form.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { m } from '$lib/paraglide/messages';
+	import UserService from '$lib/services/user-service';
+	import appConfigStore from '$lib/stores/application-configuration-store';
+	import userStore from '$lib/stores/user-store';
+	import type { UserSignUp } from '$lib/types/user.type';
+	import { getAxiosErrorMessage } from '$lib/utils/error-util';
+	import { tryCatch } from '$lib/utils/try-catch-util';
+	import { LucideChevronLeft } from '@lucide/svelte';
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import LoginLogoErrorSuccessIndicator from '../login/components/login-logo-error-success-indicator.svelte';
+
+	let { data } = $props();
+	const userService = new UserService();
+
+	let isLoading = $state(false);
+	let error: string | undefined = $state();
+
+	async function handleSignup(userData: UserSignUp) {
+		isLoading = true;
+
+		const result = await tryCatch(userService.signup({ ...userData, token: data.token }));
+
+		if (result.error) {
+			error = getAxiosErrorMessage(result.error);
+			isLoading = false;
+			return false;
+		}
+
+		userStore.setUser(result.data);
+		isLoading = false;
+
+		goto('/signup/add-passkey');
+		return true;
+	}
+
+	onMount(() => {
+		if (!$appConfigStore.allowUserSignups || $appConfigStore.allowUserSignups === 'disabled') {
+			error = m.user_signups_are_disabled();
+			return;
+		}
+
+		// For token-based signups, check if we have a valid token
+		if ($appConfigStore.allowUserSignups === 'withToken' && !data.token) {
+			error = m.signup_requires_valid_token();
+		}
+	});
+</script>
+
+<svelte:head>
+	<title>{m.signup()}</title>
+</svelte:head>
+
+<SignInWrapper animate={!$appConfigStore.disableAnimations}>
+	<div class="flex justify-center">
+		<LoginLogoErrorSuccessIndicator error={!!error} />
+	</div>
+
+	<h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl">
+		{m.signup_to_appname({ appName: $appConfigStore.appName })}
+	</h1>
+
+	{#if !error}
+		<p class="text-muted-foreground mt-2" in:fade>
+			{m.create_your_account_to_get_started()}
+		</p>
+	{:else}
+		<p class="text-muted-foreground mt-2" in:fade>
+			{error}.
+		</p>
+	{/if}
+	{#if $appConfigStore.allowUserSignups === 'open' || data.token}
+		<SignupForm callback={handleSignup} {isLoading} />
+		<div class="mt-10 flex w-full items-center justify-between gap-2">
+			<a class="text-muted-foreground mt-5 flex text-sm" href="/login"
+				><LucideChevronLeft class="size-5" /> {m.back()}</a
+			>
+			<Button type="submit" form="sign-up-form" onclick={() => (error = undefined)}
+				>{m.signup()}</Button
+			>
+		</div>
+	{:else}
+		<Button class="mt-10" href="/login">{m.go_to_login()}</Button>
+	{/if}
+</SignInWrapper>
--- a/frontend/src/routes/signup/+page.ts
+++ b/frontend/src/routes/signup/+page.ts
@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ url }) => {
+	return {
+		token: url.searchParams.get('token') || undefined
+	};
+};
--- a/frontend/src/routes/signup/add-passkey/+page.svelte
+++ b/frontend/src/routes/signup/add-passkey/+page.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import SignInWrapper from '$lib/components/login-wrapper.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { m } from '$lib/paraglide/messages';
+	import WebAuthnService from '$lib/services/webauthn-service';
+	import appConfigStore from '$lib/stores/application-configuration-store';
+	import { getWebauthnErrorMessage } from '$lib/utils/error-util';
+	import { tryCatch } from '$lib/utils/try-catch-util';
+	import { startRegistration } from '@simplewebauthn/browser';
+	import { fade } from 'svelte/transition';
+	import LoginLogoErrorSuccessIndicator from '../../login/components/login-logo-error-success-indicator.svelte';
+
+	const webauthnService = new WebAuthnService();
+
+	let isLoading = $state(false);
+	let error: string | undefined = $state();
+
+	async function createPasskeyAndContinue() {
+		isLoading = true;
+		error = undefined;
+
+		const optsResult = await tryCatch(webauthnService.getRegistrationOptions());
+		if (optsResult.error) {
+			error = getWebauthnErrorMessage(optsResult.error);
+			isLoading = false;
+			return;
+		}
+
+		const attRespResult = await tryCatch(startRegistration({ optionsJSON: optsResult.data }));
+		if (attRespResult.error) {
+			error = getWebauthnErrorMessage(attRespResult.error);
+			isLoading = false;
+			return;
+		}
+
+		const finishResult = await tryCatch(webauthnService.finishRegistration(attRespResult.data));
+		if (finishResult.error) {
+			error = getWebauthnErrorMessage(finishResult.error);
+			isLoading = false;
+			return;
+		}
+
+		goto('/settings/account');
+		isLoading = false;
+	}
+</script>
+
+<svelte:head>
+	<title>{m.add_passkey()}</title>
+</svelte:head>
+
+<SignInWrapper animate={!$appConfigStore.disableAnimations}>
+	<div class="w-full text-center">
+		<div class="flex justify-center">
+			<LoginLogoErrorSuccessIndicator error={!!error} />
+		</div>
+		<h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl">
+			{m.setup_your_passkey()}
+		</h1>
+		<p class="text-muted-foreground mt-2" in:fade>
+			{#if !error}
+				{m.create_a_passkey_to_securely_access_your_account()}
+			{:else}
+				{error}. {m.please_try_again()}
+			{/if}
+		</p>
+		<div class="mt-10 flex w-full justify-between gap-2">
+			<Button
+				variant="secondary"
+				onclick={() => goto('/settings/account')}
+				disabled={isLoading}
+				class="flex-1"
+			>
+				{m.skip_for_now()}
+			</Button>
+			<Button onclick={createPasskeyAndContinue} {isLoading} class="flex-1">
+				{m.add_passkey()}
+			</Button>
+		</div>
+	</div>
+</SignInWrapper>
--- a/frontend/src/routes/st/[token]/+page.ts
+++ b/frontend/src/routes/st/[token]/+page.ts
@@ -0,0 +1,16 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+// Alias for /signup?token=...
+export const load: PageLoad = async ({ url, params }) => {
+	const targetPath = '/signup';
+
+	const searchParams = new URLSearchParams();
+	searchParams.set('token', params.token);
+
+	if (url.searchParams.has('redirect')) {
+		searchParams.set('redirect', url.searchParams.get('redirect')!);
+	}
+
+	return redirect(307, `${targetPath}?${searchParams.toString()}`);
+};