From 877da8de2fac972c1f2d68d900c3ada0fd336032 Mon Sep 17 00:00:00 2001
From: Ricky <n.riquelmebareiro@gmail.com>
Date: Fri, 2 Oct 2026 20:59:33 +0200
Subject: [PATCH 1/2] =?UTF-8?q?feat(security):=20cl=C3=A9s=20d'API=20par?=
 =?UTF-8?q?=20utilisateur=20et=20pour=20soi=20(ADR-0070,=20#665)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Une section par utilisateur (security:*), atteinte depuis sa ligne et sa
page, et « My API keys » dans le menu de session (auth:*), sur un seul
composant. Le jeton n'est montré qu'une fois, dans une fenêtre qui ne se
ferme que par son bouton, et n'est conservé nulle part. Expiration à
90 jours par défaut, avertissement sans expiration, clés expirées
marquées, révocation confirmée. Rien n'est proposé sans droit, à une
session anonyme ni sur un backend v1. 18e spec, apiKeys.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .github/workflows/checks.yml                  |   1 +
 CLAUDE.md                                     |   2 +-
 src/components/ApiKeys/MyApiKeys.vue          |  29 ++
 src/components/Common/Breadcrumb.vue          |   1 +
 src/components/Common/SessionBar.vue          |  19 +-
 .../Security/ApiKeys/ApiKeyList.vue           | 252 ++++++++++++++++++
 .../Security/ApiKeys/CreateApiKeyModal.vue    | 240 +++++++++++++++++
 .../Security/ApiKeys/RevokeApiKeyModal.vue    |  53 ++++
 src/components/Security/Users/ApiKeys.vue     |  45 ++++
 .../Security/Users/CreateOrUpdate.vue         |  25 +-
 src/components/Security/Users/UserItem.vue    |  21 +-
 src/routes/children/security.ts               |  10 +
 src/routes/index.ts                           |   6 +
 src/services/apiKeys.ts                       | 145 ++++++++++
 src/stores/auth.ts                            |  21 ++
 .../single-backend/apiKeys.spec.js            | 185 +++++++++++++
 16 files changed, 1048 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ApiKeys/MyApiKeys.vue
 create mode 100644 src/components/Security/ApiKeys/ApiKeyList.vue
 create mode 100644 src/components/Security/ApiKeys/CreateApiKeyModal.vue
 create mode 100644 src/components/Security/ApiKeys/RevokeApiKeyModal.vue
 create mode 100644 src/components/Security/Users/ApiKeys.vue
 create mode 100644 src/services/apiKeys.ts
 create mode 100644 test/e2e/cypress/integration/single-backend/apiKeys.spec.js

diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index 70caf3aaf..79b387f4a 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -99,6 +99,7 @@ jobs:
         spec:
           - login
           - users
+          - apiKeys
           - roles
           - profiles
           - resetpassword
diff --git a/CLAUDE.md b/CLAUDE.md
index 74bbe819d..e1722a5ba 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -46,7 +46,7 @@ proposer de migrer Vue en premier : `bootstrap-vue` 2 ne tourne pas sous
 
 ## Garde-fou
 
-Les 17 specs Cypress (`test/e2e/cypress/integration/single-backend/`) sont le
+Les 18 specs Cypress (`test/e2e/cypress/integration/single-backend/`) sont le
 seul filet de sécurité du chantier — il n'y a pas de tests unitaires. Toute PR de
 migration doit passer les specs du domaine touché. Ne jamais désactiver une spec
 pour faire passer une migration : c'est le signal que la migration est fausse.
diff --git a/src/components/ApiKeys/MyApiKeys.vue b/src/components/ApiKeys/MyApiKeys.vue
new file mode 100644
index 000000000..54397b940
--- /dev/null
+++ b/src/components/ApiKeys/MyApiKeys.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="MyApiKeys mx-auto w-full max-w-6xl overflow-auto px-4 py-6 pb-12">
+    <Headline>My API keys</Headline>
+
+    <ApiKeyList
+      :can-create="authStore.canCreateOwnApiKey"
+      :can-delete="authStore.canDeleteOwnApiKey"
+      :can-search="authStore.canSearchOwnApiKeys"
+      :owner-label="String(authStore.user?.id ?? '')"
+      :scope="scope"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ApiKeyScope } from '@/services/apiKeys';
+import { useAuthStore } from '@/stores';
+
+import Headline from '@/components/Materialize/Headline.vue';
+import ApiKeyList from '@/components/Security/ApiKeys/ApiKeyList.vue';
+
+/*
+ * Les clés de l'utilisateur connecté, par le contrôleur `auth` (ADR-0070) :
+ * un développeur sans droit sur `security` crée ainsi les siennes.
+ */
+const authStore = useAuthStore();
+
+const scope: ApiKeyScope = { controller: 'auth' };
+</script>
diff --git a/src/components/Common/Breadcrumb.vue b/src/components/Common/Breadcrumb.vue
index 0500aaae2..95513b5ca 100644
--- a/src/components/Common/Breadcrumb.vue
+++ b/src/components/Common/Breadcrumb.vue
@@ -15,6 +15,7 @@
             'SecurityUsersCreate',
             'SecurityUsersUpdate',
             'SecurityUsersEditCustomMapping',
+            'SecurityUsersApiKeys',
           ])
         "
       >
diff --git a/src/components/Common/SessionBar.vue b/src/components/Common/SessionBar.vue
index 0a5a8dc05..7d9d68dd5 100644
--- a/src/components/Common/SessionBar.vue
+++ b/src/components/Common/SessionBar.vue
@@ -66,6 +66,16 @@
           </div>
         </DropdownMenuGroup>
         <DropdownMenuSeparator v-if="profiles.length" />
+        <template v-if="showMyApiKeys">
+          <DropdownMenuItem
+            data-cy="SessionBar-myApiKeys"
+            @select="router.push({ name: 'MyApiKeys' })"
+          >
+            <i aria-hidden="true" class="fas fa-key w-4 text-center" />
+            My API keys
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+        </template>
         <DropdownMenuItem data-cy="SessionBar-logoutBtn" @select="logout">
           <i aria-hidden="true" class="fas fa-power-off w-4 text-center" />
           Log out
@@ -93,9 +103,10 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { type ThemePreference, useTheme } from '@/composables/useTheme';
-import { useAuthStore } from '@/stores';
+import { useAuthStore, useKuzzleStore } from '@/stores';
 
 const authStore = useAuthStore();
+const kuzzleStore = useKuzzleStore();
 const router = useRouter();
 const { preference, setPreference } = useTheme();
 
@@ -133,6 +144,12 @@ const profiles = computed((): string[] => {
   return Array.isArray(profileIds) ? profileIds.filter((id) => typeof id === 'string') : [];
 });
 
+// Une session anonyme n'a pas de clés à elle, ni un backend v1 (ADR-0070).
+const showMyApiKeys = computed(
+  () =>
+    authStore.canSearchOwnApiKeys && (kuzzleStore.currentEnvironment?.backendMajorVersion ?? 0) > 1,
+);
+
 async function logout(): Promise<void> {
   try {
     await authStore.doLogout();
diff --git a/src/components/Security/ApiKeys/ApiKeyList.vue b/src/components/Security/ApiKeys/ApiKeyList.vue
new file mode 100644
index 000000000..f9902547b
--- /dev/null
+++ b/src/components/Security/ApiKeys/ApiKeyList.vue
@@ -0,0 +1,252 @@
+<template>
+  <div class="ApiKeyList flex flex-col gap-4" data-cy="ApiKeyList">
+    <Card v-if="!backendSupportsApiKeys" data-cy="ApiKeyList-unsupported">
+      <CardContent>
+        <CardTitle class="font-heading font-extrabold">API keys require Kuzzle 2</CardTitle>
+        <CardDescription class="mt-2">
+          This connection targets a Kuzzle 1 backend, which has no API keys.
+        </CardDescription>
+      </CardContent>
+    </Card>
+
+    <ListNotAllowed v-else-if="!canSearch" />
+
+    <template v-else>
+      <div class="flex flex-wrap items-center justify-between gap-2">
+        <Input
+          v-model="filter"
+          aria-label="Filter API keys by description"
+          class="max-w-sm"
+          data-cy="ApiKeyList-filter"
+          placeholder="Filter by description"
+          type="search"
+        />
+        <Button
+          data-cy="ApiKeyList-createBtn"
+          :disabled="!canCreate"
+          :title="canCreate ? undefined : 'You are not allowed to create API keys'"
+          @click="creating = true"
+        >
+          Create API key
+        </Button>
+      </div>
+
+      <MainSpinner v-if="loading" class="my-8" />
+
+      <Card v-else-if="keys.length === 0" class="EmptyState" data-cy="ApiKeyList-empty">
+        <CardContent class="flex flex-col items-center text-center">
+          <i class="fas fa-key fa-4x mb-4 text-muted-foreground" aria-hidden="true" />
+          <CardTitle class="font-heading text-headline font-extrabold text-muted-foreground">
+            No API key
+          </CardTitle>
+          <CardDescription v-if="canCreate" class="mt-2">
+            An API key lets an application or a script call Kuzzle as
+            <span class="code">{{ ownerLabel }}</span
+            >, without a password.
+          </CardDescription>
+        </CardContent>
+      </Card>
+
+      <template v-else>
+        <Table data-cy="ApiKeyList-table">
+          <TableHeader>
+            <TableRow>
+              <TableHead>Description</TableHead>
+              <TableHead>Expires</TableHead>
+              <TableHead class="hidden md:table-cell">Fingerprint</TableHead>
+              <TableHead class="w-0"><span class="sr-only">Actions</span></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow
+              v-for="key of filteredKeys"
+              :key="key.id"
+              :data-cy="`ApiKeyList-row--${key.id}`"
+            >
+              <TableCell class="font-medium" data-cy="ApiKeyList-description">
+                {{ key.description }}
+              </TableCell>
+              <TableCell class="whitespace-nowrap" data-cy="ApiKeyList-expiration">
+                <Badge v-if="key.expiresAt === -1" variant="warning">Never</Badge>
+                <span v-else-if="isExpired(key, now)" :title="exactDate(key)">
+                  <Badge variant="destructive">Expired</Badge>
+                  <span class="ms-2 text-muted-foreground">{{
+                    formatRelative(key.expiresAt, now)
+                  }}</span>
+                </span>
+                <span v-else :title="exactDate(key)">{{ formatRelative(key.expiresAt, now) }}</span>
+              </TableCell>
+              <!-- Sous `md`, l'empreinte cède la place : la description et l'échéance d'abord. -->
+              <TableCell class="hidden md:table-cell">
+                <span class="code" :title="key.fingerprint">{{
+                  key.fingerprint.slice(0, 12)
+                }}</span>
+              </TableCell>
+              <TableCell>
+                <Button
+                  :aria-label="`Revoke ${key.description}`"
+                  :data-cy="`ApiKeyList-revoke--${key.id}`"
+                  :disabled="!canDelete"
+                  size="icon"
+                  :title="canDelete ? 'Revoke' : 'You are not allowed to revoke API keys'"
+                  variant="ghost"
+                  @click="revokeCandidate = key"
+                >
+                  <i class="fa fa-trash" aria-hidden="true" />
+                </Button>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+
+        <p
+          v-if="filteredKeys.length === 0"
+          class="text-muted-foreground"
+          data-cy="ApiKeyList-noMatch"
+        >
+          No API key matches this description.
+        </p>
+        <p v-if="total > keys.length" class="text-sm text-muted-foreground">
+          Showing the first {{ keys.length }} of {{ total }} API keys.
+        </p>
+      </template>
+    </template>
+
+    <CreateApiKeyModal
+      v-model:open="creating"
+      :owner-label="ownerLabel"
+      :scope="scope"
+      @created="load"
+    />
+    <RevokeApiKeyModal
+      :api-key="revokeCandidate"
+      :revoking="revoking"
+      @cancel="revokeCandidate = null"
+      @confirm="revoke"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useToast } from '@/composables/useToast';
+import { formatDateTime } from '@/lib/date';
+import { caught } from '@/lib/errors';
+import { logger } from '@/lib/logger';
+import {
+  type ApiKey,
+  type ApiKeyScope,
+  deleteApiKey,
+  formatRelative,
+  isExpired,
+  searchApiKeys,
+} from '@/services/apiKeys';
+import { useKuzzleStore } from '@/stores';
+
+import ListNotAllowed from '@/components/Common/ListNotAllowed.vue';
+import MainSpinner from '@/components/Common/MainSpinner.vue';
+import CreateApiKeyModal from './CreateApiKeyModal.vue';
+import RevokeApiKeyModal from './RevokeApiKeyModal.vue';
+
+/*
+ * Les clés d'API d'une portée (ADR-0070) : celles d'un utilisateur, ou les
+ * siennes. Les droits viennent du site d'appel, qui sait quel contrôleur
+ * s'applique.
+ */
+const props = defineProps<{
+  canCreate: boolean;
+  canDelete: boolean;
+  canSearch: boolean;
+  /** Le titulaire des clés, tel qu'on le nomme dans les textes. */
+  ownerLabel: string;
+  scope: ApiKeyScope;
+}>();
+
+const kuzzleStore = useKuzzleStore();
+const toast = useToast();
+
+const keys = ref<ApiKey[]>([]);
+const total = ref(0);
+const loading = ref(false);
+const filter = ref('');
+const creating = ref(false);
+const revokeCandidate = ref<ApiKey | null>(null);
+const revoking = ref(false);
+/* L'instant de référence des échéances, relevé à chaque chargement : une clé
+   qui expire pendant qu'on regarde la page passe « expirée » au suivant. */
+const now = ref(Date.now());
+
+const backendSupportsApiKeys = computed(
+  () => (kuzzleStore.currentEnvironment?.backendMajorVersion ?? 0) > 1,
+);
+
+const filteredKeys = computed(() => {
+  const text = filter.value.trim().toLowerCase();
+  return text === ''
+    ? keys.value
+    : keys.value.filter((key) => key.description.toLowerCase().includes(text));
+});
+
+function sdk() {
+  const kuzzle = kuzzleStore.$kuzzle;
+  if (!kuzzle) {
+    throw new Error('No Kuzzle SDK for the current environment');
+  }
+  return kuzzle;
+}
+
+function exactDate(key: ApiKey): string {
+  return formatDateTime(new Date(key.expiresAt));
+}
+
+async function load(): Promise<void> {
+  if (!backendSupportsApiKeys.value || !props.canSearch) {
+    return;
+  }
+  loading.value = true;
+  try {
+    const result = await searchApiKeys(sdk(), props.scope);
+    // L'ordre de Kuzzle n'est pas garanti, et il n'y a pas de date de
+    // création : la liste suit les descriptions.
+    keys.value = [...result.hits].sort((a, b) => a.description.localeCompare(b.description));
+    total.value = result.total;
+    now.value = Date.now();
+  } catch (error) {
+    logger.error(error);
+    toast.danger('Unable to load the API keys', caught(error).message);
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function revoke(key: ApiKey): Promise<void> {
+  revoking.value = true;
+  try {
+    await deleteApiKey(sdk(), props.scope, key.id);
+    revokeCandidate.value = null;
+    toast.success('API key revoked', key.description);
+    await load();
+  } catch (error) {
+    logger.error(error);
+    toast.danger('Unable to revoke the API key', caught(error).message);
+  } finally {
+    revoking.value = false;
+  }
+}
+
+onMounted(load);
+watch(() => props.scope, load, { deep: true });
+</script>
diff --git a/src/components/Security/ApiKeys/CreateApiKeyModal.vue b/src/components/Security/ApiKeys/CreateApiKeyModal.vue
new file mode 100644
index 000000000..a38d62faa
--- /dev/null
+++ b/src/components/Security/ApiKeys/CreateApiKeyModal.vue
@@ -0,0 +1,240 @@
+<template>
+  <Dialog :open="open" @update:open="onOpenChange">
+    <!--
+      Une fois le jeton affiché, la fenêtre ne se ferme ni d'un clic à côté,
+      ni d'Échap, ni par la croix : seulement par le bouton qui dit qu'il est
+      copié (ADR-0070). Il ne sera plus jamais affiché.
+    -->
+    <DialogContent
+      data-cy="CreateApiKey"
+      :show-close-button="!token"
+      @escape-key-down="token && $event.preventDefault()"
+      @interact-outside.prevent
+    >
+      <template v-if="!token">
+        <DialogHeader>
+          <DialogTitle>Create an API key</DialogTitle>
+          <DialogDescription>
+            The key authenticates as <span class="code">{{ ownerLabel }}</span
+            >, with the same rights.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form class="flex flex-col gap-4" @submit.prevent="submit">
+          <FormItem>
+            <Label for="api-key-description">Description</Label>
+            <Input
+              id="api-key-description"
+              v-model="description"
+              :aria-describedby="descriptionError ? 'api-key-description-error' : undefined"
+              :aria-invalid="descriptionError ? 'true' : undefined"
+              data-cy="CreateApiKey-description"
+              placeholder="What will use this key?"
+            />
+            <FormMessage v-if="descriptionError" id="api-key-description-error">
+              {{ descriptionError }}
+            </FormMessage>
+          </FormItem>
+
+          <FormItem>
+            <Label id="api-key-expiration-label">Expiration</Label>
+            <Select v-model="expiresIn">
+              <SelectTrigger
+                aria-labelledby="api-key-expiration-label"
+                data-cy="CreateApiKey-expiration"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem
+                  v-for="expiration of EXPIRATIONS"
+                  :key="expiration.value"
+                  :value="expiration.value"
+                >
+                  {{ expiration.label }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </FormItem>
+
+          <Alert
+            v-if="expiresIn === '-1'"
+            data-cy="CreateApiKey-noExpirationWarning"
+            variant="warning"
+          >
+            A key without expiration stays valid until it is revoked. Prefer a key that expires, and
+            create a new one when it does.
+          </Alert>
+        </form>
+
+        <DialogFooter>
+          <Button variant="outline" @click="close">Cancel</Button>
+          <Button data-cy="CreateApiKey-submit" :disabled="submitting" @click="submit">
+            Create
+          </Button>
+        </DialogFooter>
+      </template>
+
+      <template v-else>
+        <DialogHeader>
+          <DialogTitle>Copy your API key</DialogTitle>
+          <DialogDescription>
+            This is the only time the key is shown. Store it somewhere safe: once this window is
+            closed, it cannot be displayed again.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div class="flex items-stretch gap-2">
+          <code
+            class="min-w-0 flex-1 rounded-md border border-border bg-muted px-3 py-2 font-mono text-sm break-all"
+            data-cy="CreateApiKey-token"
+            >{{ token }}</code
+          >
+          <Button
+            :aria-label="copied ? 'Copied' : 'Copy the API key'"
+            data-cy="CreateApiKey-copy"
+            variant="outline"
+            @click="copy"
+          >
+            <i aria-hidden="true" :class="copied ? 'fas fa-check' : 'far fa-copy'" />
+            {{ copied ? 'Copied' : 'Copy' }}
+          </Button>
+        </div>
+
+        <DialogFooter>
+          <Button data-cy="CreateApiKey-done" @click="close">I've copied it</Button>
+        </DialogFooter>
+      </template>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import { Alert } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { FormItem, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useToast } from '@/composables/useToast';
+import { caught } from '@/lib/errors';
+import { logger } from '@/lib/logger';
+import {
+  type ApiKeyScope,
+  createApiKey,
+  DEFAULT_EXPIRATION,
+  EXPIRATIONS,
+  type Expiration,
+} from '@/services/apiKeys';
+import { useKuzzleStore } from '@/stores';
+
+const props = withDefaults(
+  defineProps<{
+    open?: boolean;
+    ownerLabel: string;
+    scope: ApiKeyScope;
+  }>(),
+  { open: false },
+);
+
+const emit = defineEmits<{
+  (e: 'created'): void;
+  (e: 'update:open', open: boolean): void;
+}>();
+
+const kuzzleStore = useKuzzleStore();
+const toast = useToast();
+
+const description = ref('');
+const expiresIn = ref<Expiration>(DEFAULT_EXPIRATION);
+const submitted = ref(false);
+const submitting = ref(false);
+const copied = ref(false);
+/* Le jeton ne vit qu'ici, le temps que la fenêtre est ouverte : ni store, ni
+   `localStorage`, ni toast, ni log. Il est oublié à la fermeture. */
+const token = ref<string | null>(null);
+
+const descriptionError = computed(() =>
+  submitted.value && description.value.trim() === '' ? 'A description is required' : null,
+);
+
+watch(
+  () => props.open,
+  (open) => {
+    if (!open) {
+      description.value = '';
+      expiresIn.value = DEFAULT_EXPIRATION;
+      submitted.value = false;
+      submitting.value = false;
+      copied.value = false;
+      token.value = null;
+    }
+  },
+);
+
+function close(): void {
+  emit('update:open', false);
+}
+
+function onOpenChange(open: boolean): void {
+  // La croix et Échap sont désactivées une fois le jeton affiché ; on ne se
+  // fie pas qu'à elles.
+  if (!open && token.value) {
+    return;
+  }
+  emit('update:open', open);
+}
+
+async function submit(): Promise<void> {
+  submitted.value = true;
+  if (descriptionError.value || submitting.value) {
+    return;
+  }
+
+  submitting.value = true;
+  try {
+    const sdk = kuzzleStore.$kuzzle;
+    if (!sdk) {
+      throw new Error('No Kuzzle SDK for the current environment');
+    }
+    const created = await createApiKey(sdk, props.scope, description.value.trim(), expiresIn.value);
+    token.value = created.token;
+    emit('created');
+  } catch (error) {
+    // L'erreur vient de la requête, qui n'a pas rendu de jeton : elle peut
+    // être journalisée.
+    logger.error(error);
+    toast.danger('Unable to create the API key', caught(error).message);
+  } finally {
+    submitting.value = false;
+  }
+}
+
+async function copy(): Promise<void> {
+  if (!token.value) {
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(token.value);
+    copied.value = true;
+  } catch {
+    toast.warning('Unable to copy the API key', 'Select it and copy it by hand.');
+  }
+}
+</script>
diff --git a/src/components/Security/ApiKeys/RevokeApiKeyModal.vue b/src/components/Security/ApiKeys/RevokeApiKeyModal.vue
new file mode 100644
index 000000000..10dc578e8
--- /dev/null
+++ b/src/components/Security/ApiKeys/RevokeApiKeyModal.vue
@@ -0,0 +1,53 @@
+<template>
+  <Dialog :open="!!apiKey" @update:open="!$event && emit('cancel')">
+    <!-- `@interact-outside.prevent` : une révocation ne se ferme pas sur un clic à côté. -->
+    <DialogContent data-cy="RevokeApiKey" @interact-outside.prevent>
+      <DialogHeader>
+        <DialogTitle>Revoke the API key</DialogTitle>
+        <DialogDescription v-if="apiKey">
+          Revoke <span class="code">{{ apiKey.description }}</span
+          >? Every application that uses this key will stop working. This cannot be undone.
+        </DialogDescription>
+      </DialogHeader>
+
+      <DialogFooter>
+        <Button variant="outline" @click="emit('cancel')">Cancel</Button>
+        <Button
+          data-cy="RevokeApiKey-submit"
+          :disabled="revoking"
+          variant="destructive"
+          @click="apiKey && emit('confirm', apiKey)"
+        >
+          Revoke
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import type { ApiKey } from '@/services/apiKeys';
+
+withDefaults(
+  defineProps<{
+    /** La clé à révoquer ; la fenêtre est ouverte tant qu'il y en a une. */
+    apiKey?: ApiKey | null;
+    revoking?: boolean;
+  }>(),
+  { apiKey: null, revoking: false },
+);
+
+const emit = defineEmits<{
+  (e: 'cancel'): void;
+  (e: 'confirm', apiKey: ApiKey): void;
+}>();
+</script>
diff --git a/src/components/Security/Users/ApiKeys.vue b/src/components/Security/Users/ApiKeys.vue
new file mode 100644
index 000000000..ba5ed273d
--- /dev/null
+++ b/src/components/Security/Users/ApiKeys.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="UserApiKeys mx-auto w-full max-w-6xl px-4 pb-12">
+    <div class="mb-4 flex flex-wrap items-start justify-between gap-4">
+      <Headline>
+        API keys - <span class="code" data-cy="UserApiKeys-kuid">{{ id }}</span>
+      </Headline>
+      <Button
+        :as="RouterLink"
+        data-cy="UserApiKeys-editUser"
+        :to="{ name: 'SecurityUsersUpdate', params: { id } }"
+        variant="outline"
+      >
+        Edit user
+      </Button>
+    </div>
+
+    <ApiKeyList
+      :can-create="authStore.canCreateApiKey"
+      :can-delete="authStore.canDeleteApiKey"
+      :can-search="authStore.canSearchApiKeys"
+      :owner-label="id"
+      :scope="scope"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { RouterLink } from 'vue-router';
+
+import Headline from '../../Materialize/Headline.vue';
+import ApiKeyList from '../ApiKeys/ApiKeyList.vue';
+import { Button } from '@/components/ui/button';
+import type { ApiKeyScope } from '@/services/apiKeys';
+import { useAuthStore } from '@/stores';
+
+// Les clés d'un utilisateur, par le contrôleur `security` (ADR-0070).
+const props = defineProps<{
+  id: string;
+}>();
+
+const authStore = useAuthStore();
+
+const scope = computed((): ApiKeyScope => ({ controller: 'security', userId: props.id }));
+</script>
diff --git a/src/components/Security/Users/CreateOrUpdate.vue b/src/components/Security/Users/CreateOrUpdate.vue
index 66c5adacf..85c51f725 100644
--- a/src/components/Security/Users/CreateOrUpdate.vue
+++ b/src/components/Security/Users/CreateOrUpdate.vue
@@ -1,9 +1,21 @@
 <template>
   <div class="UserUpdate mx-auto w-full max-w-6xl px-4 pb-12">
     <div class="UserUpdate--container">
-      <Headline v-if="!!id">
-        Edit user - <span class="code">{{ route.params.id }}</span>
-      </Headline>
+      <div v-if="!!id" class="flex flex-wrap items-start justify-between gap-4">
+        <Headline>
+          Edit user - <span class="code">{{ route.params.id }}</span>
+        </Headline>
+        <Button
+          v-if="showApiKeys"
+          :as="RouterLink"
+          data-cy="UserUpdate-apiKeys"
+          :to="{ name: 'SecurityUsersApiKeys', params: { id } }"
+          variant="outline"
+        >
+          <i class="fa fa-key" aria-hidden="true" />
+          API keys
+        </Button>
+      </div>
       <Headline v-else> Create a new user </Headline>
 
       <Notice />
@@ -82,7 +94,7 @@
 import { computed, onMounted, reactive, ref } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { helpers, not } from '@vuelidate/validators';
-import { useRoute, useRouter } from 'vue-router';
+import { RouterLink, useRoute, useRouter } from 'vue-router';
 
 import MainSpinner from '../../Common/MainSpinner.vue';
 import Headline from '../../Materialize/Headline.vue';
@@ -128,6 +140,11 @@ const strategies = ref<string[]>([]);
 const credentialsMapping = ref<Record<string, string[]>>({});
 const customContent = ref('{}');
 const customContentMapping = ref<Record<string, unknown>>({});
+// Les clés d'API n'existent qu'à partir de Kuzzle 2 (ADR-0070).
+const showApiKeys = computed(
+  () =>
+    authStore.canSearchApiKeys && (kuzzleStore.currentEnvironment?.backendMajorVersion ?? 0) > 1,
+);
 
 // Les identifiants ne sont pas validés ici : leur forme dépend de la stratégie
 // d'authentification, et c'est Kuzzle qui les refuse à l'enregistrement.
diff --git a/src/components/Security/Users/UserItem.vue b/src/components/Security/Users/UserItem.vue
index 0cbb38119..7fb7c1840 100644
--- a/src/components/Security/Users/UserItem.vue
+++ b/src/components/Security/Users/UserItem.vue
@@ -44,6 +44,18 @@
       </div>
 
       <div class="flex flex-nowrap items-center">
+        <Button
+          v-if="showApiKeys"
+          :as="RouterLink"
+          :aria-label="`API keys of ${document.id}`"
+          :data-cy="`UserListItem-apiKeys--${document.id}`"
+          size="icon"
+          title="API keys"
+          :to="{ name: 'SecurityUsersApiKeys', params: { id: document.id } }"
+          variant="ghost"
+        >
+          <i class="fa fa-key" aria-hidden="true" />
+        </Button>
         <Button
           class="UserListItem-update"
           :data-cy="`UserListItem-update--${document.id}`"
@@ -79,11 +91,12 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
+import { RouterLink } from 'vue-router';
 
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
-import { useAuthStore } from '@/stores';
+import { useAuthStore, useKuzzleStore } from '@/stores';
 import type { UserDocument } from './types';
 
 import JsonTree from '@/components/Common/JsonTree/JsonTree.vue';
@@ -100,6 +113,7 @@ const emit = defineEmits<{
 }>();
 
 const authStore = useAuthStore();
+const kuzzleStore = useKuzzleStore();
 
 const expanded = ref(false);
 const checked = ref(false);
@@ -110,6 +124,11 @@ const profileList = computed(() => {
   }
   return [...props.document.profileIds].sort();
 });
+// Les clés d'API n'existent qu'à partir de Kuzzle 2 (ADR-0070).
+const showApiKeys = computed(
+  () =>
+    authStore.canSearchApiKeys && (kuzzleStore.currentEnvironment?.backendMajorVersion ?? 0) > 1,
+);
 const checkboxId = computed(() => `checkbox-${props.document.id}`);
 const localStrategyUsername = computed(() => {
   const local = props.document.credentials?.local;
diff --git a/src/routes/children/security.ts b/src/routes/children/security.ts
index fdcc26568..e9276d224 100644
--- a/src/routes/children/security.ts
+++ b/src/routes/children/security.ts
@@ -3,6 +3,7 @@ import ProfilesPage from '@/components/Security/Profiles/Page.vue';
 import ProfilesUpdate from '@/components/Security/Profiles/Update.vue';
 import RolesCreateOrUpdate from '@/components/Security/Roles/CreateOrUpdate.vue';
 import RolesPage from '@/components/Security/Roles/Page.vue';
+import UsersApiKeys from '@/components/Security/Users/ApiKeys.vue';
 import UsersCreateOrUpdate from '@/components/Security/Users/CreateOrUpdate.vue';
 import UsersEditCustomMapping from '@/components/Security/Users/EditCustomMapping.vue';
 import UsersPage from '@/components/Security/Users/Page.vue';
@@ -41,6 +42,15 @@ export default [
     component: UsersCreateOrUpdate,
     props: (route) => ({ id: route.params.id }),
   },
+  {
+    path: '/security/users/:id/api-keys',
+    name: 'SecurityUsersApiKeys',
+    meta: {
+      section: 'users',
+    },
+    component: UsersApiKeys,
+    props: (route) => ({ id: route.params.id }),
+  },
   {
     path: '/security/profiles',
     name: 'SecurityProfilesList',
diff --git a/src/routes/index.ts b/src/routes/index.ts
index 2f95d6cdb..4a82e4a03 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -3,6 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 
 import PageNotFound from '../components/404.vue';
 import ApiAction from '../components/ApiAction.vue';
+import MyApiKeys from '../components/ApiKeys/MyApiKeys.vue';
 import CreateEnvironmentPage from '../components/Common/Environments/CreateEnvironmentPage.vue';
 import SelectEnvironmentPage from '../components/Common/Environments/SelectEnvironmentPage.vue';
 import ConnectionAwareContainer from '../components/ConnectionAwareContainer.vue';
@@ -168,6 +169,11 @@ export default function createRoutes(log: Logger) {
                 name: 'ApiAction',
                 component: ApiAction,
               },
+              {
+                path: '/api-keys',
+                name: 'MyApiKeys',
+                component: MyApiKeys,
+              },
             ],
           },
         ],
diff --git a/src/services/apiKeys.ts b/src/services/apiKeys.ts
new file mode 100644
index 000000000..7c739f3b6
--- /dev/null
+++ b/src/services/apiKeys.ts
@@ -0,0 +1,145 @@
+import type { Kuzzle } from 'kuzzle-sdk-v7';
+
+/*
+ * Clés d'API (ADR-0070).
+ *
+ * Deux portées, une seule forme : les clés d'un utilisateur, par le
+ * contrôleur `security`, qui prend son `userId`, et celles de l'utilisateur
+ * connecté, par `auth`. Les appels passent par `query` : les deux contrôleurs
+ * du SDK n'ont pas la même signature, la requête brute si.
+ *
+ * Le jeton n'est renvoyé qu'à la création. `createApiKey` le rend à part de
+ * la clé, pour qu'il ne suive pas la clé dans une liste ou un store.
+ */
+
+export type ApiKeyScope = { controller: 'auth' } | { controller: 'security'; userId: string };
+
+export interface ApiKey {
+  description: string;
+  /** Horodatage en millisecondes, `-1` pour une clé sans expiration. */
+  expiresAt: number;
+  /** SHA-256 du jeton : ce qui relie un jeton à sa clé. */
+  fingerprint: string;
+  id: string;
+  userId: string;
+}
+
+export interface ApiKeySearchResult {
+  hits: ApiKey[];
+  total: number;
+}
+
+/** Les durées proposées à la création, la plus courte d'abord. */
+export const EXPIRATIONS = [
+  { label: '7 days', value: '7d' },
+  { label: '30 days', value: '30d' },
+  { label: '90 days', value: '90d' },
+  { label: '1 year', value: '365d' },
+  { label: 'No expiration', value: '-1' },
+] as const;
+
+export type Expiration = (typeof EXPIRATIONS)[number]['value'];
+
+/** Le choix prudent : une clé créée vite et oubliée finit par s'expirer. */
+export const DEFAULT_EXPIRATION: Expiration = '90d';
+
+/**
+ * Une recherche ramène au plus ce nombre de clés. La liste se filtre côté
+ * console : un utilisateur n'en a jamais autant, et la page le dit sinon.
+ */
+export const SEARCH_SIZE = 1000;
+
+function scopeArgs(scope: ApiKeyScope): Record<string, string> {
+  return scope.controller === 'security' ? { userId: scope.userId } : {};
+}
+
+function asRecord(value: unknown): Record<string, unknown> {
+  return typeof value === 'object' && value !== null ? (value as Record<string, unknown>) : {};
+}
+
+function toApiKey(hit: unknown): ApiKey {
+  const { _id, _source } = asRecord(hit);
+  const source = asRecord(_source);
+
+  return {
+    description: typeof source.description === 'string' ? source.description : '',
+    expiresAt: typeof source.expiresAt === 'number' ? source.expiresAt : -1,
+    fingerprint: typeof source.fingerprint === 'string' ? source.fingerprint : '',
+    id: String(_id),
+    userId: typeof source.userId === 'string' ? source.userId : '',
+  };
+}
+
+export async function searchApiKeys(sdk: Kuzzle, scope: ApiKeyScope): Promise<ApiKeySearchResult> {
+  const { result } = await sdk.query({
+    ...scopeArgs(scope),
+    action: 'searchApiKeys',
+    body: {},
+    controller: scope.controller,
+    size: SEARCH_SIZE,
+  });
+  const { hits, total } = asRecord(result);
+  const keys = Array.isArray(hits) ? hits.map(toApiKey) : [];
+
+  return { hits: keys, total: typeof total === 'number' ? total : keys.length };
+}
+
+export async function createApiKey(
+  sdk: Kuzzle,
+  scope: ApiKeyScope,
+  description: string,
+  expiresIn: Expiration,
+): Promise<{ key: ApiKey; token: string }> {
+  const { result } = await sdk.query({
+    ...scopeArgs(scope),
+    action: 'createApiKey',
+    body: { description },
+    controller: scope.controller,
+    expiresIn: expiresIn === '-1' ? -1 : expiresIn,
+    refresh: 'wait_for',
+  });
+  const token = asRecord(asRecord(result)._source).token;
+
+  if (typeof token !== 'string') {
+    throw new Error('Kuzzle did not return the token of the new API key');
+  }
+
+  return { key: toApiKey(result), token };
+}
+
+export async function deleteApiKey(sdk: Kuzzle, scope: ApiKeyScope, id: string): Promise<void> {
+  await sdk.query({
+    ...scopeArgs(scope),
+    _id: id,
+    action: 'deleteApiKey',
+    controller: scope.controller,
+    refresh: 'wait_for',
+  });
+}
+
+export function isExpired(key: ApiKey, now: number = Date.now()): boolean {
+  return key.expiresAt !== -1 && key.expiresAt <= now;
+}
+
+const relativeTime = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
+
+const UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
+  ['year', 365 * 24 * 3600 * 1000],
+  ['month', 30 * 24 * 3600 * 1000],
+  ['day', 24 * 3600 * 1000],
+  ['hour', 3600 * 1000],
+  ['minute', 60 * 1000],
+];
+
+/** `in 3 months`, `2 days ago` : l'échéance lue d'un coup d'œil. */
+export function formatRelative(timestamp: number, now: number = Date.now()): string {
+  const delta = timestamp - now;
+
+  for (const [unit, size] of UNITS) {
+    if (Math.abs(delta) >= size) {
+      return relativeTime.format(Math.round(delta / size), unit);
+    }
+  }
+
+  return relativeTime.format(Math.round(delta / 1000), 'second');
+}
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index 64794d9c6..4ae4b8e80 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -282,6 +282,27 @@ export const useAuthStore = defineStore('auth', {
         this.canDeleteUser
       );
     },
+
+    // Clés d'API (ADR-0070) : celles d'un utilisateur, par `security`, et les
+    // siennes, par `auth`. Une session anonyme n'a pas de clés à elle.
+    canSearchApiKeys(state): boolean {
+      return isActionAllowed(state.user, 'security', 'searchApiKeys');
+    },
+    canCreateApiKey(state): boolean {
+      return isActionAllowed(state.user, 'security', 'createApiKey');
+    },
+    canDeleteApiKey(state): boolean {
+      return isActionAllowed(state.user, 'security', 'deleteApiKey');
+    },
+    canSearchOwnApiKeys(state): boolean {
+      return state.user?.id !== -1 && isActionAllowed(state.user, 'auth', 'searchApiKeys');
+    },
+    canCreateOwnApiKey(state): boolean {
+      return state.user?.id !== -1 && isActionAllowed(state.user, 'auth', 'createApiKey');
+    },
+    canDeleteOwnApiKey(state): boolean {
+      return state.user?.id !== -1 && isActionAllowed(state.user, 'auth', 'deleteApiKey');
+    },
     hasSecurityRights(): boolean {
       return this.canManageRoles || this.canManageProfiles || this.canManageUsers;
     },
diff --git a/test/e2e/cypress/integration/single-backend/apiKeys.spec.js b/test/e2e/cypress/integration/single-backend/apiKeys.spec.js
new file mode 100644
index 000000000..0a0f3e0ba
--- /dev/null
+++ b/test/e2e/cypress/integration/single-backend/apiKeys.spec.js
@@ -0,0 +1,185 @@
+// Clés d'API (ADR-0070) : celles d'un utilisateur, par `security`, et les
+// siennes, par `auth`. Le jeton n'est montré qu'une fois et ne doit rester
+// nulle part : la spec vérifie aussi qu'il authentifie, puis plus après la
+// révocation.
+describe('API keys', function() {
+  const kuzzleUrl = 'http://localhost:7512'
+  const password = 'test'
+
+  const createUser = (kuid, profileIds = ['default']) =>
+    cy.request('POST', `${kuzzleUrl}/users/${kuid}/_create?refresh=wait_for`, {
+      content: { profileIds },
+      credentials: { local: { username: kuid, password } }
+    })
+
+  const createApiKey = (kuid, description, expiresIn = -1) =>
+    cy
+      .request(
+        'POST',
+        `${kuzzleUrl}/users/${kuid}/api-keys/_create?refresh=wait_for&expiresIn=${expiresIn}`,
+        { description }
+      )
+      .then(({ body }) => body.result)
+
+  const whoAmI = token =>
+    cy.request({
+      url: `${kuzzleUrl}/_me`,
+      headers: { authorization: `Bearer ${token}` },
+      failOnStatusCode: false
+    })
+
+  const loginAs = kuid =>
+    cy
+      .request('POST', `${kuzzleUrl}/_login/local`, { username: kuid, password })
+      .then(({ body }) => cy.initLocalEnv(2, body.result.jwt))
+
+  beforeEach(function() {
+    cy.request('POST', `${kuzzleUrl}/admin/_resetSecurity`)
+    cy.initLocalEnv()
+    cy.setCookie('telemetry', 'false')
+  })
+
+  it('Should create an API key for a user, and show its token only once', () => {
+    createUser('dummy')
+    cy.visit('/#/security/users')
+    cy.get('[data-cy="UserListItem-apiKeys--dummy"]').click()
+    cy.get('[data-cy="UserApiKeys-kuid"]').should('contain', 'dummy')
+    cy.get('[data-cy="ApiKeyList-empty"]').should('be.visible')
+
+    cy.get('[data-cy="ApiKeyList-createBtn"]').click()
+    cy.get('[data-cy="CreateApiKey-expiration"]').should('contain', '90 days')
+    cy.get('[data-cy="CreateApiKey-submit"]').click()
+    cy.invalidFeedback('[data-cy="CreateApiKey"]').should(
+      'contain',
+      'A description is required'
+    )
+    cy.get('[data-cy="CreateApiKey-description"]').type('CI deploy')
+    cy.get('[data-cy="CreateApiKey-submit"]').click()
+
+    cy.get('[data-cy="CreateApiKey-token"]')
+      .invoke('text')
+      .then(text => {
+        const token = text.trim()
+        expect(token).to.match(/^kapikey-/)
+
+        // Ni Échap, ni la croix : le jeton reste à l'écran jusqu'au bouton.
+        cy.get('body').type('{esc}')
+        cy.get('[data-cy="CreateApiKey-token"]').should('be.visible')
+        cy.get('[data-cy="CreateApiKey"] [data-slot="dialog-close"]').should('not.exist')
+        cy.get('[data-cy="CreateApiKey-done"]').click()
+        cy.get('[data-cy="CreateApiKey"]').should('not.exist')
+
+        cy.get('[data-cy="ApiKeyList-table"]')
+          .should('contain', 'CI deploy')
+          .and('contain', 'in 3 months')
+          .and('not.contain', token)
+        cy.window().then(win => {
+          const stored = JSON.stringify({ ...win.localStorage }) + JSON.stringify({ ...win.sessionStorage })
+          expect(stored).not.to.contain(token)
+        })
+
+        whoAmI(token).its('body.result._id').should('equal', 'dummy')
+      })
+  })
+
+  it('Should warn about a key without expiration', () => {
+    createUser('dummy')
+    cy.visit('/#/security/users/dummy/api-keys')
+    cy.get('[data-cy="ApiKeyList-createBtn"]').click()
+    cy.get('[data-cy="CreateApiKey-noExpirationWarning"]').should('not.exist')
+    cy.selectOption('[data-cy="CreateApiKey-expiration"]', 'No expiration')
+    cy.get('[data-cy="CreateApiKey-noExpirationWarning"]').should('be.visible')
+    cy.get('[data-cy="CreateApiKey-description"]').type('forever')
+    cy.get('[data-cy="CreateApiKey-submit"]').click()
+    cy.get('[data-cy="CreateApiKey-done"]').click()
+    cy.get('[data-cy="ApiKeyList-expiration"]').should('contain', 'Never')
+  })
+
+  it('Should list expired keys, and filter by description', () => {
+    createUser('dummy')
+    createApiKey('dummy', 'short-lived', '1s')
+    createApiKey('dummy', 'long-lived', '30d')
+    cy.wait(1500)
+    cy.visit('/#/security/users/dummy/api-keys')
+    cy.contains('[data-cy="ApiKeyList-table"] tr', 'short-lived').should('contain', 'Expired')
+    cy.contains('[data-cy="ApiKeyList-table"] tr', 'long-lived').should('not.contain', 'Expired')
+
+    cy.get('[data-cy="ApiKeyList-filter"]').type('long')
+    cy.get('[data-cy="ApiKeyList-table"]')
+      .should('contain', 'long-lived')
+      .and('not.contain', 'short-lived')
+    cy.get('[data-cy="ApiKeyList-filter"]').clear().type('nothing like this')
+    cy.get('[data-cy="ApiKeyList-noMatch"]').should('be.visible')
+  })
+
+  it('Should revoke an API key', () => {
+    createUser('dummy')
+    createApiKey('dummy', 'to revoke').then(({ _id, _source }) => {
+      whoAmI(_source.token).its('status').should('equal', 200)
+
+      cy.visit('/#/security/users/dummy')
+      cy.get('[data-cy="UserUpdate-apiKeys"]').click()
+      cy.get(`[data-cy="ApiKeyList-revoke--${_id}"]`).click()
+      cy.get('[data-cy="RevokeApiKey"]').should('contain', 'to revoke')
+      cy.get('[data-cy="RevokeApiKey-submit"]').click()
+      cy.get('[data-cy="RevokeApiKey"]').should('not.exist')
+      cy.get('[data-cy="ApiKeyList-empty"]').should('be.visible')
+
+      whoAmI(_source.token).its('status').should('equal', 401)
+    })
+  })
+
+  it('Should manage my own API keys from the session menu', () => {
+    createUser('dummy', ['admin'])
+    loginAs('dummy')
+    cy.visit('/')
+    cy.get('[data-cy="SessionBar-user"]').click()
+    cy.get('[data-cy="SessionBar-myApiKeys"]').click()
+    cy.url().should('contain', '/api-keys')
+
+    cy.get('[data-cy="ApiKeyList-createBtn"]').click()
+    cy.get('[data-cy="CreateApiKey-description"]').type('my script')
+    cy.get('[data-cy="CreateApiKey-submit"]').click()
+    cy.get('[data-cy="CreateApiKey-token"]')
+      .invoke('text')
+      .then(text => {
+        cy.get('[data-cy="CreateApiKey-done"]').click()
+        cy.get('[data-cy="ApiKeyList-table"]').should('contain', 'my script')
+        whoAmI(text.trim()).its('body.result._id').should('equal', 'dummy')
+      })
+  })
+
+  it('Should not offer API keys to a user who is not allowed to manage them', () => {
+    cy.request('PUT', `${kuzzleUrl}/roles/apiKeysLess?refresh=wait_for`, {
+      controllers: {
+        auth: { actions: { '*': true, createApiKey: false, searchApiKeys: false, deleteApiKey: false } },
+        server: { actions: { '*': true } },
+        index: { actions: { list: true } },
+        security: { actions: { searchUsers: true, getUser: true, getUserMapping: true } }
+      }
+    })
+    cy.request('PUT', `${kuzzleUrl}/profiles/apiKeysLess?refresh=wait_for`, {
+      policies: [{ roleId: 'apiKeysLess' }]
+    })
+    createUser('limited', ['apiKeysLess'])
+    loginAs('limited')
+
+    cy.visit('/#/security/users')
+    cy.get('[data-cy="UserList-items"]').should('contain', 'limited')
+    cy.get('[data-cy="UserListItem-apiKeys--limited"]').should('not.exist')
+    cy.get('[data-cy="SessionBar-user"]').click()
+    cy.get('[data-cy="SessionBar-logoutBtn"]').should('be.visible')
+    cy.get('[data-cy="SessionBar-myApiKeys"]').should('not.exist')
+    cy.get('body').type('{esc}')
+
+    cy.visit('/#/security/users/limited/api-keys')
+    cy.contains('You are not allowed to access this list')
+  })
+
+  it('Should not offer my API keys to an anonymous session', () => {
+    cy.visit('/')
+    cy.get('[data-cy="SessionBar-user"]').click()
+    cy.get('[data-cy="SessionBar-logoutBtn"]').should('be.visible')
+    cy.get('[data-cy="SessionBar-myApiKeys"]').should('not.exist')
+  })
+})

From 20261749afd72441d5f22da88ada32531a4a6998 Mon Sep 17 00:00:00 2001
From: Ricky <n.riquelmebareiro@gmail.com>
Date: Fri, 2 Oct 2026 21:02:52 +0200
Subject: [PATCH 2/2] test(api-keys): l'expiration par cy.clock, pas par
 cy.wait (ADR-0006)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 test/e2e/cypress/integration/single-backend/apiKeys.spec.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/test/e2e/cypress/integration/single-backend/apiKeys.spec.js b/test/e2e/cypress/integration/single-backend/apiKeys.spec.js
index 0a0f3e0ba..e54d2ed87 100644
--- a/test/e2e/cypress/integration/single-backend/apiKeys.spec.js
+++ b/test/e2e/cypress/integration/single-backend/apiKeys.spec.js
@@ -97,9 +97,11 @@ describe('API keys', function() {
 
   it('Should list expired keys, and filter by description', () => {
     createUser('dummy')
-    createApiKey('dummy', 'short-lived', '1s')
+    createApiKey('dummy', 'short-lived', '1h')
     createApiKey('dummy', 'long-lived', '30d')
-    cy.wait(1500)
+    // La page lit l'échéance avec `Date.now()` : deux heures plus tard, la
+    // première clé est expirée, sans attendre qu'elle le soit vraiment.
+    cy.clock(Date.now() + 2 * 3600 * 1000, ['Date'])
     cy.visit('/#/security/users/dummy/api-keys')
     cy.contains('[data-cy="ApiKeyList-table"] tr', 'short-lived').should('contain', 'Expired')
     cy.contains('[data-cy="ApiKeyList-table"] tr', 'long-lived').should('not.contain', 'Expired')