feat: allow manually enter the token

Author: antfu

packages/devtools/client/components/AuthRequiredPanel.vue

@@ -10,6 +10,24 @@ onMounted(async () => {
   if (!isDevAuthed.value)
     rpc.requestForAuth()
 })
+
+const authInput = ref('')
+const isFailed = ref(false)
+
+async function input() {
+  const token = authInput.value.trim()
+  isFailed.value = false
+  await rpc.verifyAuthToken(token)
+    .then((result) => {
+      if (result) {
+        isDevAuthed.value = true
+        updateDevAuthToken(token)
+      }
+      else {
+        isFailed.value = true
+      }
+    })
+}
 </script>
 
 <template>
@@ -30,6 +48,15 @@ onMounted(async () => {
           Waiting for authorization...
         </NButton>
       </div>
+      <p>Or you can manually paste the token here:</p>
+      <form flex="~ inline gap-2 items-center" @submit.prevent="input">
+        <NTextInput
+          v-model="authInput" placeholder="Enter token here"
+          :n="isFailed ? 'red' : undefined"
+          @keydown.enter="input"
+        />
+        <NIconButton icon="i-carbon-arrow-right" @click="input" />
+      </form>
     </NCard>
   </NPanelGrids>
   <template v-else>

packages/devtools/client/composables/dev-auth.ts

@@ -9,6 +9,8 @@ const bc = new BroadcastChannel('__nuxt_dev_token__')
 
 bc.addEventListener('message', (e) => {
   if (e.data.event === 'new-token') {
+    if (e.data.data === devAuthToken.value)
+      return
     const token = e.data.data
     rpc.verifyAuthToken(token)
       .then((result) => {
@@ -18,6 +20,13 @@ bc.addEventListener('message', (e) => {
   }
 })
 
+export function updateDevAuthToken(token: string) {
+  devAuthToken.value = token
+  isDevAuthed.value = true
+  localStorage.setItem('__nuxt_dev_token__', token)
+  bc.postMessage({ event: 'new-token', data: token })
+}
+
 export async function ensureDevAuthToken() {
   if (isDevAuthed.value)
     return devAuthToken.value!

packages/devtools/src/server-rpc/general.ts

@@ -159,6 +159,9 @@ export function setupGeneralRPC({ nuxt, options, refresh, openInEditorHooks }: N
         '',
         'Please open the following URL in the browser:',
         c.bold(c.green(`http://localhost:${nuxt.options.devServer.port}${ROUTE_AUTH}?token=${token}`)),
+        '',
+        'Or manually copy and paste the following token:',
+        c.bold(c.cyan(token)),
       ]
 
       // eslint-disable-next-line no-console