feat: add multiple auth modes (#229)

Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: antfu

alias.ts

@@ -16,10 +16,12 @@ export const alias = {
   '@vitejs/devtools-kit/constants': r('kit/src/constants.ts'),
   '@vitejs/devtools-kit/utils/events': r('kit/src/utils/events.ts'),
   '@vitejs/devtools-kit/utils/nanoid': r('kit/src/utils/nanoid.ts'),
+  '@vitejs/devtools-kit/utils/human-id': r('kit/src/utils/human-id.ts'),
   '@vitejs/devtools-kit/utils/shared-state': r('kit/src/utils/shared-state.ts'),
   '@vitejs/devtools-kit': r('kit/src/index.ts'),
   '@vitejs/devtools-rolldown': r('rolldown/src/index.ts'),
   '@vitejs/devtools-self-inspect': r('self-inspect/src/index.ts'),
+  '@vitejs/devtools/internal': r('core/src/internal.ts'),
   '@vitejs/devtools/client/inject': r('core/src/client/inject/index.ts'),
   '@vitejs/devtools/client/webcomponents': r('core/src/client/webcomponents/index.ts'),
   '@vitejs/devtools': r('core/src/index.ts'),

packages/core/package.json

@@ -27,6 +27,7 @@
     "./client/webcomponents": "./dist/client/webcomponents.js",
     "./config": "./dist/config.js",
     "./dirs": "./dist/dirs.js",
+    "./internal": "./dist/internal.js",
     "./package.json": "./package.json"
   },
   "types": "./dist/index.d.ts",
@@ -59,7 +60,7 @@
     "birpc": "catalog:deps",
     "cac": "catalog:deps",
     "h3": "catalog:deps",
-    "immer": "catalog:deps",
+    "immer": "catalog:inlined",
     "launch-editor": "catalog:deps",
     "mlly": "catalog:deps",
     "obug": "catalog:deps",
@@ -77,6 +78,7 @@
     "@xterm/addon-fit": "catalog:frontend",
     "@xterm/xterm": "catalog:frontend",
     "dompurify": "catalog:frontend",
+    "human-id": "catalog:inlined",
     "tsdown": "catalog:build",
     "typescript": "catalog:devtools",
     "unplugin-vue": "catalog:build",

packages/core/src/client/webcomponents/.generated/css.ts

@@ -70,8 +70,14 @@ function onPointerDown(e: PointerEvent) {
 const isRpcTrusted = ref(context.rpc.isTrusted)
 context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
   isRpcTrusted.value = isTrusted
-  if (isTrusted && context.docks.selected?.id === BUILTIN_ENTRY_CLIENT_AUTH_NOTICE.id)
+  if (isTrusted && context.docks.selected?.id === BUILTIN_ENTRY_CLIENT_AUTH_NOTICE.id) {
     context.docks.switchEntry(null)
+  }
+  else if (!isTrusted) {
+    // On revocation: close current tab and panel
+    context.docks.switchEntry(null)
+    context.panel.store.open = false
+  }
 })
 
 const groupedEntries = computed(() => context.docks.groupedEntries)

packages/core/src/client/webcomponents/components/dock/Dock.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { useEventListener } from '@vueuse/core'
-import { onUnmounted } from 'vue'
+import { onUnmounted, ref } from 'vue'
 import { sharedStateToRef } from '../../state/docks'
 import { closeDockPopup, useIsDockPopupOpen } from '../../state/popup'
 import ToastOverlay from '../display/ToastOverlay.vue'
@@ -17,6 +17,12 @@ const props = defineProps<{
 const isDockPopupOpen = useIsDockPopupOpen()
 const settings = sharedStateToRef(props.context.docks.settings)
 
+// Force float mode when unauthorized, regardless of store setting
+const isRpcTrusted = ref(props.context.rpc.isTrusted)
+props.context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
+  isRpcTrusted.value = isTrusted
+})
+
 // Close the dock when clicking outside of it
 useEventListener(window, 'mousedown', (e: MouseEvent) => {
   if (!settings.value.closeOnOutsideClick)
@@ -44,7 +50,7 @@ onUnmounted(() => {
 
 <template>
   <template v-if="!isDockPopupOpen">
-    <template v-if="context.panel.store.mode === 'edge'">
+    <template v-if="isRpcTrusted && context.panel.store.mode === 'edge'">
       <DockEdge :context />
     </template>
     <template v-else>

packages/core/src/client/webcomponents/components/dock/DockEmbedded.vue

@@ -20,6 +20,9 @@ const persistedDoms = markRaw(new PersistedDomViewsManager(viewsContainer))
 const isRpcTrusted = ref(context.rpc.isTrusted)
 context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
   isRpcTrusted.value = isTrusted
+  if (!isTrusted) {
+    context.docks.switchEntry(null)
+  }
 })
 
 watch(

packages/core/src/client/webcomponents/components/dock/DockStandalone.vue

@@ -1,18 +1,28 @@
 <script setup lang="ts">
 import type { DocksContext } from '@vitejs/devtools-kit/client'
+import { ref } from 'vue'
 import VitePlus from '../icons/VitePlus.vue'
 
-defineProps<{
+const props = defineProps<{
   context: DocksContext
 }>()
+
+const tokenInput = ref('')
+
+function submitToken() {
+  const value = tokenInput.value.trim()
+  if (!value)
+    return
+  props.context.rpc.requestTrustWithToken(value)
+}
 </script>
 
 <template>
   <div class="w-full h-full flex flex-col items-center justify-center p20">
     <div class="max-w-150 flex flex-col items-center justify-center gap-2">
       <VitePlus class="w-20 h-20" />
       <h1 class="text-2xl font-bold text-violet mb2">
-        Vite DevTools is Unauthorized
+        Vite DevTools needs Authorization
       </h1>
       <p class="op75">
         Vite DevTools offers advanced features that can access your server, view your filesystem, and execute commands.
@@ -23,6 +33,24 @@ defineProps<{
       <p class="font-bold bg-green:5 p1 px3 rounded mt8 text-green">
         Check your terminal for the authorization prompt and come back.
       </p>
+      <div class="mt6 op50">
+        or
+      </div>
+      <form class="mt2 flex items-center gap-2" @submit.prevent="submitToken">
+        <input
+          v-model="tokenInput"
+          type="text"
+          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="!tokenInput.trim()"
+        >
+          Authorize
+        </button>
+      </form>
     </div>
   </div>
 </template>

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

@@ -1,3 +1,4 @@
 export { createDevToolsContext } from './node/context'
+export type { DevToolsInternalContext, InternalAnonymousAuthStorage } from './node/context-internal'
 export { DevTools } from './node/plugins'
 export { createDevToolsMiddleware } from './node/server'

packages/core/src/index.ts

@@ -0,0 +1,2 @@
+export { getInternalContext } from './node/context-internal'
+export type { DevToolsInternalContext, InternalAnonymousAuthStorage } from './node/context-internal'

packages/core/src/internal.ts

@@ -0,0 +1,43 @@
+import type { DevToolsNodeContext } from '@vitejs/devtools-kit'
+import type { SharedState } from '@vitejs/devtools-kit/utils/shared-state'
+import type { InternalAnonymousAuthStorage } from './context-internal'
+import type { RpcFunctionsHost } from './host-functions'
+
+/**
+ * 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,
+  storage: SharedState<InternalAnonymousAuthStorage>,
+  token: string,
+): Promise<void> {
+  // 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.clientAuthToken === token) {
+      affectedSessionIds.add(client.$meta.id)
+      client.$meta.isTrusted = false
+      client.$meta.clientAuthToken = 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),
+  })
+}