feat(self-inspect): add auth tokens management tab

- Unify wording: clientAuthPasswords → clientAuthTokens, "password" → "token" in UI
- Add revokeAuthToken() utility that removes token from storage and notifies
  all connected clients using that token via auth:revoked broadcast event
- One token can be used by multiple clients; revoking disconnects all of them
- Client-side handler in rpc-ws.ts listens for auth:revoked and shows auth notice
- Self-inspect revoke RPC now uses the shared revokeAuthToken utility

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: antfu

packages/core/src/client/webcomponents/components/views-builtin/ViewBuiltinClientAuthNotice.vue

@@ -7,10 +7,10 @@ defineProps<{
   context: DocksContext
 }>()
 
-const passwordInput = ref('')
+const tokenInput = ref('')
 
-function submitPassword() {
-  const value = passwordInput.value.trim()
+function submitToken() {
+  const value = tokenInput.value.trim()
   if (!value)
     return
   localStorage.setItem('__VITE_DEVTOOLS_CONNECTION_AUTH_ID__', value)
@@ -37,17 +37,17 @@ function submitPassword() {
       <div class="mt6 op50">
         or
       </div>
-      <form class="mt2 flex items-center gap-2" @submit.prevent="submitPassword">
+      <form class="mt2 flex items-center gap-2" @submit.prevent="submitToken">
         <input
-          v-model="passwordInput"
+          v-model="tokenInput"
           type="text"
-          placeholder="Enter auth password"
+          placeholder="Enter auth token"
           class="px3 py1.5 rounded border border-base bg-transparent text-sm outline-none focus:border-violet"
         >
         <button
           type="submit"
           class="px3 py1.5 rounded bg-violet text-white text-sm hover:op80 disabled:op40"
-          :disabled="!passwordInput.trim()"
+          :disabled="!tokenInput.trim()"
         >
           Authorize
         </button>

packages/core/src/index.ts

@@ -1,3 +1,4 @@
+export { revokeAuthToken } from './node/auth-revoke'
 export { createDevToolsContext } from './node/context'
 export { getInternalContext } from './node/context-internal'
 export type { DevToolsInternalContext, InternalAnonymousAuthStorage } from './node/context-internal'

packages/core/src/node/auth-revoke.ts

@@ -0,0 +1,41 @@
+import type { DevToolsNodeContext } from '@vitejs/devtools-kit'
+import type { RpcFunctionsHost } from './host-functions'
+import { getInternalContext } from './context-internal'
+
+/**
+ * Revoke an auth token: remove from storage and notify all connected clients
+ * using this token that they are no longer trusted.
+ */
+export async function revokeAuthToken(context: DevToolsNodeContext, token: string): Promise<void> {
+  const internal = getInternalContext(context)
+  const storage = internal.storage.auth
+
+  // Remove from persistent storage
+  storage.mutate((state) => {
+    delete state.trusted[token]
+  })
+
+  const rpcHost = context.rpc as unknown as RpcFunctionsHost
+  if (!rpcHost._rpcGroup)
+    return
+
+  // Collect affected session IDs before modifying meta
+  const affectedSessionIds = new Set<string>()
+  for (const client of rpcHost._rpcGroup.clients) {
+    if (client.$meta.clientAuthId === token) {
+      affectedSessionIds.add(client.$meta.id)
+      client.$meta.isTrusted = false
+      client.$meta.clientAuthId = undefined!
+    }
+  }
+
+  if (affectedSessionIds.size === 0)
+    return
+
+  // Notify affected clients
+  await rpcHost.broadcast({
+    method: 'devtoolskit:internal:auth:revoked',
+    args: [],
+    filter: client => affectedSessionIds.has(client.$meta.id),
+  })
+}

packages/core/src/node/config.ts

@@ -14,12 +14,12 @@ export interface DevToolsConfig extends Partial<StartOptions> {
    */
   clientAuth?: boolean
   /**
-   * Pre-configured auth passwords that are automatically trusted.
+   * Pre-configured auth tokens that are automatically trusted.
    *
-   * Clients connecting with an auth ID matching one of these passwords
+   * Clients connecting with an auth token matching one of these
    * will be auto-approved without a terminal prompt.
    */
-  clientAuthPasswords?: string[]
+  clientAuthTokens?: string[]
 }
 
 export interface ResolvedDevToolsConfig {
@@ -36,7 +36,7 @@ export function normalizeDevToolsConfig(
     config: {
       ...(isObject(config) ? config : {}),
       clientAuth: isObject(config) ? (config.clientAuth ?? true) : true,
-      clientAuthPasswords: isObject(config) ? (config.clientAuthPasswords ?? []) : [],
+      clientAuthTokens: isObject(config) ? (config.clientAuthTokens ?? []) : [],
       host: isObject(config) ? (config.host ?? host) : host,
     },
   }

packages/core/src/node/rpc/anonymous/auth.ts

@@ -38,9 +38,9 @@ export const anonymousAuth = defineRpcFunction({
           }
         }
 
-        // Auto-approve if authId matches a configured password
-        const passwords = (context.viteConfig.devtools?.config as any)?.clientAuthPasswords as string[] ?? []
-        if (passwords.includes(query.authId)) {
+        // Auto-approve if authId matches a configured auth token
+        const tokens = (context.viteConfig.devtools?.config as any)?.clientAuthTokens as string[] ?? []
+        if (tokens.includes(query.authId)) {
           storage.mutate((state) => {
             state.trusted[query.authId] = {
               authId: query.authId,

packages/core/src/node/rpc/index.ts

@@ -65,7 +65,7 @@ declare module '@vitejs/devtools-kit' {
 
   // @keep-sorted
   export interface DevToolsRpcClientFunctions {
-
+    'devtoolskit:internal:auth:revoked': () => Promise<void>
     'devtoolskit:internal:logs:updated': () => Promise<void>
     'devtoolskit:internal:rpc:client-state:patch': (key: string, patches: SharedStatePatch[], syncId: string) => Promise<void>
     'devtoolskit:internal:rpc:client-state:updated': (key: string, fullState: any, syncId: string) => Promise<void>

packages/core/src/node/ws.ts

@@ -54,7 +54,7 @@ export async function createWsServer(options: CreateWsServerOptions) {
         meta.isTrusted = true
         meta.clientAuthId = authId
       }
-      else if (authId && ((context.viteConfig.devtools?.config as any)?.clientAuthPasswords ?? []).includes(authId)) {
+      else if (authId && ((context.viteConfig.devtools?.config as any)?.clientAuthTokens ?? []).includes(authId)) {
         meta.isTrusted = true
         meta.clientAuthId = authId
       }

packages/kit/src/client/rpc-ws.ts

@@ -51,6 +51,16 @@ export function createWsRpcClientMode(
     },
   )
 
+  // Handle server-initiated auth revocation
+  clientRpc.register({
+    name: 'devtoolskit:internal:auth:revoked',
+    type: 'event',
+    handler: () => {
+      isTrusted = false
+      events.emit('rpc:is-trusted:updated', false)
+    },
+  })
+
   async function requestTrust() {
     if (isTrusted)
       return true

packages/self-inspect/src/app/components/AuthTokensList.vue

@@ -35,7 +35,7 @@ function formatDate(timestamp: number): string {
       <thead>
         <tr border="b base" text-left>
           <th px2 py1 font-medium op60 text-xs>
-            Auth ID
+            Auth Token
           </th>
           <th px2 py1 font-medium op60 text-xs>
             User Agent

packages/self-inspect/src/node/rpc/functions/revoke-auth-token.ts

@@ -1,17 +1,13 @@
-import { getInternalContext } from '@vitejs/devtools'
+import { revokeAuthToken } from '@vitejs/devtools'
 import { defineRpcFunction } from '@vitejs/devtools-kit'
 
-export const revokeAuthToken = defineRpcFunction({
+export const revokeAuthTokenRpc = defineRpcFunction({
   name: 'devtoolskit:self-inspect:revoke-auth-token',
   type: 'action',
   setup: (context) => {
-    const internal = getInternalContext(context)
-    const storage = internal.storage.auth
     return {
       handler: async (authId: string) => {
-        storage.mutate((state) => {
-          delete state.trusted[authId]
-        })
+        await revokeAuthToken(context, authId)
       },
     }
   },