From 4b09fdd04f475483ad09d627ad6abc5c0f18b5f7 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Wed, 25 Feb 2026 14:48:16 +0100
Subject: [PATCH 1/3] feat: new API keys

---
 components/User/AdminUserProfilePage.vue | 107 +++--------------------
 components/User/ApiTokensSection.vue     | 102 +++++++++++++++++++++
 components/User/CreateApiTokenModal.vue  |  92 +++++++++++++++++++
 datagouv-components/src/types/users.ts   |   1 -
 types/api-tokens.ts                      |  15 ++++
 utils/auth.ts                            |   1 -
 6 files changed, 220 insertions(+), 98 deletions(-)
 create mode 100644 components/User/ApiTokensSection.vue
 create mode 100644 components/User/CreateApiTokenModal.vue
 create mode 100644 types/api-tokens.ts

diff --git a/components/User/AdminUserProfilePage.vue b/components/User/AdminUserProfilePage.vue
index 69cae6497..9383183c8 100644
--- a/components/User/AdminUserProfilePage.vue
+++ b/components/User/AdminUserProfilePage.vue
@@ -75,73 +75,6 @@
           {{ $t('Sauvegarder') }}
         </BrandedButton>
       </div>
-      <div
-        v-if="user.id === me.id"
-        class="fr-input-group"
-      >
-        <label
-          class="fr-label"
-          :for="apiKeyId"
-        >
-          {{ $t(`Clé d'API`) }}
-          <span
-            v-if="user.apikey"
-            class="fr-hint-text"
-          >
-            {{ $t(`Attention: Si vous supprimez votre clé d'API vous risquez de perdre l'accès aux services de {site}`, { site: config.public.title }) }}
-          </span>
-        </label>
-        <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
-          <div class="fr-col-12 fr-col-sm">
-            <div class="relative">
-              <input
-                :id="apiKeyId"
-                :value="user.apikey"
-                type="password"
-                class="fr-input !pr-8"
-                disabled
-              >
-              <div class="absolute right-1 top-1 !mt-0.5 !mr-0.5">
-                <CopyButton
-                  v-if="user.apikey"
-                  :label="$t(`Copier la clé d'API`)"
-                  :copied-label="$t('Clé API copiée')"
-                  :text="user.apikey"
-                  reverse
-                />
-              </div>
-            </div>
-          </div>
-          <div class="fr-col-auto flex gap-4">
-            <div class="flex-none">
-              <BrandedButton
-                color="secondary"
-                size="xs"
-                :disabled="loading"
-                :icon="RiRecycleLine"
-                @click="regenerateApiKey"
-              >
-                <span v-if="user.apikey">{{ $t('Regénérer') }}</span>
-                <span v-else>{{ $t('Générer') }}</span>
-              </BrandedButton>
-            </div>
-            <div
-              v-if="user.apikey"
-              class="flex-none"
-            >
-              <BrandedButton
-                color="danger"
-                size="xs"
-                :disabled="loading"
-                :icon="RiDeleteBin6Line"
-                @click="deleteApiKey"
-              >
-                {{ $t('Supprimer') }}
-              </BrandedButton>
-            </div>
-          </div>
-        </div>
-      </div>
       <div
         v-if="user.id === me.id"
         class="fr-input-group"
@@ -245,17 +178,26 @@
         </template>
       </BannerAction>
     </PaddedContainer>
+    <template v-if="user.id === me.id">
+      <h2 class="uppercase !text-sm !my-5">
+        {{ $t("Clés d'API") }}
+      </h2>
+      <PaddedContainer class="!p-5">
+        <ApiTokensSection />
+      </PaddedContainer>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { BannerAction, BrandedButton, CopyButton, PaddedContainer, toast, SearchableSelect } from '@datagouv/components-next'
+import { BannerAction, BrandedButton, PaddedContainer, toast, SearchableSelect } from '@datagouv/components-next'
 import type { User } from '@datagouv/components-next'
-import { RiDeleteBin6Line, RiEditLine, RiRecycleLine, RiSaveLine } from '@remixicon/vue'
+import { RiEditLine, RiSaveLine } from '@remixicon/vue'
 import DeleteUserModal from './DeleteUserModal.vue'
 import ChangePasswordModal from './ChangePasswordModal.vue'
 import ChangeEmailModal from './ChangeEmailModal.vue'
 import TwoFactorSetupModal from './TwoFactorSetupModal.vue'
+import ApiTokensSection from './ApiTokensSection.vue'
 import { uploadProfilePicture } from '~/api/users'
 
 const props = defineProps<{
@@ -271,7 +213,6 @@ const config = useNuxtApp().$config
 const { t } = useTranslation()
 const { $api } = useNuxtApp()
 
-const apiKeyId = useId()
 const emailId = useId()
 const passwordId = useId()
 
@@ -329,30 +270,4 @@ async function updateUser() {
     loading.value = false
   }
 }
-
-async function regenerateApiKey() {
-  loading.value = true
-  try {
-    await $api<{ apikey: string }>('/api/1/me/apikey', {
-      method: 'POST',
-    })
-    loadMe(me)
-  }
-  finally {
-    loading.value = false
-  }
-}
-
-async function deleteApiKey() {
-  loading.value = true
-  try {
-    await $api('/api/1/me/apikey', {
-      method: 'DELETE',
-    })
-    loadMe(me)
-  }
-  finally {
-    loading.value = false
-  }
-}
 </script>
diff --git a/components/User/ApiTokensSection.vue b/components/User/ApiTokensSection.vue
new file mode 100644
index 000000000..175601bb4
--- /dev/null
+++ b/components/User/ApiTokensSection.vue
@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <SimpleBanner
+      v-if="newlyCreatedToken"
+      type="warning"
+      class="mb-4"
+    >
+      <div class="font-bold mb-1">
+        {{ $t("Copiez ce token maintenant, il ne sera plus affiché.") }}
+      </div>
+      <div class="flex items-center gap-2">
+        <code class="text-sm break-all">{{ newlyCreatedToken }}</code>
+        <CopyButton
+          :label="$t('Copier le token')"
+          :copied-label="$t('Token copié')"
+          :text="newlyCreatedToken"
+        />
+      </div>
+    </SimpleBanner>
+
+    <div
+      v-if="tokens.length === 0 && !newlyCreatedToken"
+      class="text-sm text-gray-500 mb-4"
+    >
+      {{ $t("Aucun token API. Créez-en un pour accéder à l'API.") }}
+    </div>
+
+    <div
+      v-for="token in tokens"
+      :key="token.id"
+      class="flex items-center justify-between py-3 border-b border-gray-200 last:border-b-0"
+    >
+      <div class="min-w-0">
+        <div class="text-sm truncate">
+          <span class="font-medium">{{ token.name || `${token.token_prefix}…` }}</span>
+          <span
+            v-if="token.name"
+            class="text-gray-400 ml-1"
+          >{{ token.token_prefix }}…</span>
+        </div>
+        <div class="text-xs text-gray-500">
+          <span>{{ $t('Créé {date}', { date: formatRelativeIfRecentDate(token.created_at) }) }}</span>
+          <span v-if="token.last_used_at"> · {{ $t('Utilisé {date}', { date: formatRelativeIfRecentDate(token.last_used_at) }) }}</span>
+          <span v-else> · {{ $t('Jamais utilisé') }}</span>
+        </div>
+      </div>
+      <BrandedButton
+        color="danger"
+        size="xs"
+        :icon="RiDeleteBin6Line"
+        :loading="revoking === token.id"
+        :disabled="!!revoking"
+        icon-only
+        @click="revokeToken(token)"
+      />
+    </div>
+
+    <div class="mt-4">
+      <CreateApiTokenModal @created="onTokenCreated" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { BrandedButton, CopyButton, SimpleBanner, toast, useFormatDate } from '@datagouv/components-next'
+import { RiDeleteBin6Line } from '@remixicon/vue'
+import type { ApiToken, ApiTokenCreated } from '~/types/api-tokens'
+import CreateApiTokenModal from './CreateApiTokenModal.vue'
+
+const { t } = useTranslation()
+const { $api } = useNuxtApp()
+const { formatRelativeIfRecentDate } = useFormatDate()
+
+const tokens = ref<ApiToken[]>([])
+const newlyCreatedToken = ref<string | null>(null)
+const revoking = ref<string | null>(null)
+
+async function fetchTokens() {
+  tokens.value = await $api<ApiToken[]>('/api/1/me/tokens/')
+}
+
+async function onTokenCreated(created: ApiTokenCreated) {
+  newlyCreatedToken.value = created.token
+  await fetchTokens()
+}
+
+async function revokeToken(token: ApiToken) {
+  revoking.value = token.id
+  try {
+    await $api(`/api/1/me/tokens/${token.id}/`, {
+      method: 'DELETE',
+    })
+    toast.success(t('Token révoqué.'))
+    await fetchTokens()
+  }
+  finally {
+    revoking.value = null
+  }
+}
+
+await fetchTokens()
+</script>
diff --git a/components/User/CreateApiTokenModal.vue b/components/User/CreateApiTokenModal.vue
new file mode 100644
index 000000000..ef6eeb25d
--- /dev/null
+++ b/components/User/CreateApiTokenModal.vue
@@ -0,0 +1,92 @@
+<template>
+  <ModalWithButton
+    v-model="isOpen"
+    :title="$t('Créer un token API')"
+    size="lg"
+    form
+    @submit.prevent="(_$el, _close) => submit(_close)"
+  >
+    <template #button="{ attrs, listeners }">
+      <BrandedButton
+        color="secondary"
+        size="xs"
+        :icon="RiAddLine"
+        :disabled="loading"
+        v-bind="attrs"
+        v-on="listeners"
+      >
+        {{ $t('Créer un token') }}
+      </BrandedButton>
+    </template>
+
+    <template #default>
+      <InputGroup
+        v-model="name"
+        :label="$t('Nom (optionnel)')"
+        :hint-text="$t('Un nom pour identifier ce token, par exemple « CI/CD » ou « Mon script »')"
+      />
+    </template>
+
+    <template #footer="{ close: _close }">
+      <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--right">
+        <div class="fr-col-auto">
+          <BrandedButton
+            color="secondary"
+            :disabled="loading"
+            @click="_close"
+          >
+            {{ $t('Annuler') }}
+          </BrandedButton>
+        </div>
+        <div class="fr-col-auto">
+          <BrandedButton
+            type="submit"
+            color="primary"
+            :loading="loading"
+          >
+            {{ $t('Créer') }}
+          </BrandedButton>
+        </div>
+      </div>
+    </template>
+  </ModalWithButton>
+</template>
+
+<script setup lang="ts">
+import { BrandedButton, toast } from '@datagouv/components-next'
+import { RiAddLine } from '@remixicon/vue'
+import type { ApiTokenCreated } from '~/types/api-tokens'
+import InputGroup from '~/components/InputGroup/InputGroup.vue'
+
+const { t } = useTranslation()
+const { $api } = useNuxtApp()
+
+const emit = defineEmits<{
+  created: [token: ApiTokenCreated]
+}>()
+
+const isOpen = ref(false)
+const loading = ref(false)
+const name = ref('')
+
+async function submit(close: () => void) {
+  loading.value = true
+  try {
+    const body: Record<string, string> = {}
+    if (name.value.trim()) {
+      body.name = name.value.trim()
+    }
+    const result = await $api<ApiTokenCreated>('/api/1/me/tokens/', {
+      method: 'POST',
+      body,
+    })
+    toast.success(t('Token créé avec succès.'))
+    name.value = ''
+    close()
+    emit('created', result)
+  }
+  finally {
+    loading.value = false
+  }
+}
+</script>
diff --git a/datagouv-components/src/types/users.ts b/datagouv-components/src/types/users.ts
index 0664c7760..4b9e74a6b 100644
--- a/datagouv-components/src/types/users.ts
+++ b/datagouv-components/src/types/users.ts
@@ -21,7 +21,6 @@ export type User = {
   page: UserReference['page']
   avatar: UserReference['avatar']
   avatar_thumbnail: UserReference['avatar_thumbnail']
-  apikey?: string
   email?: string
   about: string
   website?: string
diff --git a/types/api-tokens.ts b/types/api-tokens.ts
new file mode 100644
index 000000000..73193410b
--- /dev/null
+++ b/types/api-tokens.ts
@@ -0,0 +1,15 @@
+export type ApiToken = {
+  id: string
+  token_prefix: string
+  name: string | null
+  scope: 'admin'
+  kind: 'api_key'
+  created_at: string
+  last_used_at: string | null
+  user_agents: string[]
+  expires_at: string | null
+}
+
+export type ApiTokenCreated = ApiToken & {
+  token: string
+}
diff --git a/utils/auth.ts b/utils/auth.ts
index 554321dfc..e6b8b8de9 100644
--- a/utils/auth.ts
+++ b/utils/auth.ts
@@ -4,7 +4,6 @@ import { usePostApiWithCsrf } from './api'
 export type Me = User & {
   about: string | null
   active: boolean
-  apikey: string | null
   email: string
   metrics: {
     datasets: number

From 2531242fef29ca3d0dd99c2a0d51917f504dc03f Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Wed, 25 Feb 2026 14:54:03 +0100
Subject: [PATCH 2/3] add user agents

---
 components/User/ApiTokensSection.vue | 32 ++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/components/User/ApiTokensSection.vue b/components/User/ApiTokensSection.vue
index 175601bb4..802e74d28 100644
--- a/components/User/ApiTokensSection.vue
+++ b/components/User/ApiTokensSection.vue
@@ -42,6 +42,19 @@
           <span>{{ $t('Créé {date}', { date: formatRelativeIfRecentDate(token.created_at) }) }}</span>
           <span v-if="token.last_used_at"> · {{ $t('Utilisé {date}', { date: formatRelativeIfRecentDate(token.last_used_at) }) }}</span>
           <span v-else> · {{ $t('Jamais utilisé') }}</span>
+          <template v-if="token.user_agents.length === 1">
+            · {{ token.user_agents[0] }}
+          </template>
+          <template v-else-if="token.user_agents.length > 1">
+            ·
+            <button
+              class="underline hover:text-gray-700"
+              type="button"
+              @click="userAgentsModalList = token.user_agents"
+            >
+              {{ $t('{n} user agents', { n: token.user_agents.length }) }}
+            </button>
+          </template>
         </div>
       </div>
       <BrandedButton
@@ -58,6 +71,23 @@
     <div class="mt-4">
       <CreateApiTokenModal @created="onTokenCreated" />
     </div>
+
+    <ModalClient
+      :opened="!!userAgentsModalList"
+      :title="$t('User agents')"
+      size="lg"
+      @close="userAgentsModalList = null"
+    >
+      <ul class="list-disc pl-5 space-y-1">
+        <li
+          v-for="(ua, i) in userAgentsModalList"
+          :key="i"
+          class="text-sm break-all"
+        >
+          {{ ua }}
+        </li>
+      </ul>
+    </ModalClient>
   </div>
 </template>
 
@@ -66,6 +96,7 @@ import { BrandedButton, CopyButton, SimpleBanner, toast, useFormatDate } from '@
 import { RiDeleteBin6Line } from '@remixicon/vue'
 import type { ApiToken, ApiTokenCreated } from '~/types/api-tokens'
 import CreateApiTokenModal from './CreateApiTokenModal.vue'
+import ModalClient from '~/components/Modal/Modal.client.vue'
 
 const { t } = useTranslation()
 const { $api } = useNuxtApp()
@@ -74,6 +105,7 @@ const { formatRelativeIfRecentDate } = useFormatDate()
 const tokens = ref<ApiToken[]>([])
 const newlyCreatedToken = ref<string | null>(null)
 const revoking = ref<string | null>(null)
+const userAgentsModalList = ref<string[] | null>(null)
 
 async function fetchTokens() {
   tokens.value = await $api<ApiToken[]>('/api/1/me/tokens/')

From 1d9e70c2899d5cb88bf3d14fef3aef0ba8b3dbf9 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Wed, 25 Feb 2026 15:02:32 +0100
Subject: [PATCH 3/3] add confirmation modal before deleting token

---
 components/User/ApiTokensSection.vue | 35 +++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/components/User/ApiTokensSection.vue b/components/User/ApiTokensSection.vue
index 802e74d28..ad343a93c 100644
--- a/components/User/ApiTokensSection.vue
+++ b/components/User/ApiTokensSection.vue
@@ -28,7 +28,7 @@
     <div
       v-for="token in tokens"
       :key="token.id"
-      class="flex items-center justify-between py-3 border-b border-gray-200 last:border-b-0"
+      class="flex items-center justify-between gap-4 py-3 border-b border-gray-200 last:border-b-0"
     >
       <div class="min-w-0">
         <div class="text-sm truncate">
@@ -61,10 +61,9 @@
         color="danger"
         size="xs"
         :icon="RiDeleteBin6Line"
-        :loading="revoking === token.id"
         :disabled="!!revoking"
         icon-only
-        @click="revokeToken(token)"
+        @click="tokenToRevoke = token"
       />
     </div>
 
@@ -72,6 +71,34 @@
       <CreateApiTokenModal @created="onTokenCreated" />
     </div>
 
+    <ModalClient
+      :opened="!!tokenToRevoke"
+      :title="$t('Révoquer ce token ?')"
+      size="lg"
+      @close="tokenToRevoke = null"
+    >
+      {{ $t('Le token {name} sera définitivement révoqué. Les applications qui l\'utilisent ne pourront plus accéder à l\'API.', { name: tokenToRevoke?.name || `${tokenToRevoke?.token_prefix}…` }) }}
+      <template #footer>
+        <div class="w-full flex justify-end gap-2">
+          <BrandedButton
+            color="secondary"
+            :disabled="!!revoking"
+            @click="tokenToRevoke = null"
+          >
+            {{ $t('Annuler') }}
+          </BrandedButton>
+          <BrandedButton
+            color="danger"
+            :icon="RiDeleteBin6Line"
+            :loading="!!revoking"
+            @click="revokeToken(tokenToRevoke!)"
+          >
+            {{ $t('Révoquer') }}
+          </BrandedButton>
+        </div>
+      </template>
+    </ModalClient>
+
     <ModalClient
       :opened="!!userAgentsModalList"
       :title="$t('User agents')"
@@ -105,6 +132,7 @@ const { formatRelativeIfRecentDate } = useFormatDate()
 const tokens = ref<ApiToken[]>([])
 const newlyCreatedToken = ref<string | null>(null)
 const revoking = ref<string | null>(null)
+const tokenToRevoke = ref<ApiToken | null>(null)
 const userAgentsModalList = ref<string[] | null>(null)
 
 async function fetchTokens() {
@@ -123,6 +151,7 @@ async function revokeToken(token: ApiToken) {
       method: 'DELETE',
     })
     toast.success(t('Token révoqué.'))
+    tokenToRevoke.value = null
     await fetchTokens()
   }
   finally {