Authorization for VS Code integration does not do anything

[fabiangfd]

Hi,

I am running Nuxt 3.5.3 with Devtools 0.6.0.
here are my devtool settings:

devtools: {
        enabled: true,
        vscode: {
            startOnBoot: true,
            enabled: true,
            mode: "local-serve",
        },
},

When visiting the VS Code Tab in the Devtools UI, I get the "Permission Required" message. In my terminal I get, the message

 Permission Request 
│                                                                                                     
│   A browser is requesting permissions of writing files and running commands from the DevTools UI.   
│   undefined                                                                                         
│                                                                                                     
│   Please open the following URL in the browser:                                                     
│   http://localhost:3003/__nuxt_devtools__/auth?token=DtH2VoXvXaVZ0rrplKjjRmsccd3Zo4Sw               
│                                                                                                    │

When I open the URL I get the message "Authorized! You can close this window now".
However, going back to my Nuxt App, the Devtools still show "waiting for authorization".

I have tested with the latest Chrome and Firefox. Same behavior.

Any help would be appreciated.

[HenrijsS]

I'm on Safari (Version 16.5 (18615.2.9.11.4)) and it just insta-closes the window that I open from the link and doesn't do anything.

When I go back to the devtools, it shows that auth failed.

Afterwards it shows the button to create routes and I get this error when I click it:

 ERROR  [nuxt-devtools] RPC error on executing "runWizard": wizard[name] is not a function                                              8:44:50 PM

  at Proxy.runWizard (node_modules/@nuxt/devtools/dist/chunks/module-main.mjs:722:26)
  at node_modules/birpc/dist/index.mjs:59:29
  at WebSocket.<anonymous> (node_modules/@nuxt/devtools/dist/chunks/module-main.mjs:7075:19)
  at WebSocket.emit (node:events:525:35)
  at WebSocket.emit (node:domain:489:12)                                                                                                8:44:45 PM
  at Receiver.receiverOnMessage (node_modules/vite/dist/node/chunks/dep-e8f070e8.js:58179:22)
  at Receiver.emit (node:events:513:28)
  at Receiver.emit (node:domain:489:12)
  at Receiver.dataMessage (node_modules/vite/dist/node/chunks/dep-e8f070e8.js:55944:14)
  at Receiver.getData (node_modules/vite/dist/node/chunks/dep-e8f070e8.js:55862:17)

Reproducing it from Edge (Latest) I get the splash screen that says "Authorised" but the errors persist and the DevTools themselves don't register that I granted access.

[antfu]

Can you help check if there is __nuxt_dev_token__ in your localStorage? Does the port match with your app?

[antfu]

@HenrijsS for runWizard it was a bug, thanks!

[HenrijsS]

@HenrijsS for runWizard it was a bug, thanks!

@antfu Tried the edge you published, all is working :)

But...
Ran the Enable Pages and it generated the Folder and index.vue

ℹ Nuxt DevTools: Running wizard enablePages...
✔ Routing creation wizard completed

<NuxtPage> was already in my app.vue, so it should've worked automatically, but it shows me:
Create a Vue component in the pages/ directory to enable <NuxtPage>

I believe this is an error on Nuxt's itselfs part as it's not scanning for directory changes. It also didn't detect any tailwind.config.js changes automatically.
Is this an issue I should maybe bring up in Nuxt or is it intended like that?

(Running the latest stable Nuxt@3 release)

[antfu]

@HenrijsS That's another bug that I haven't fixed yet. Since it's not related to this issue, can you create another for us to track on? Thanks

[sandros94]

I noticed that the permission page in the vscode tab goes away only if I'm on localhost:<nodePort>. If I try to open teh vscode tab via hostname.local<nodePort> it warns me with the permission message regardeless if I open up the auth link or not. The need for this is because sometimes I would like to access it from the tablet connected to a custom vpn.
Since there is limited documentation on this how should we proceed?

More over: is it possible to use the vscode tunnel instead of setting up a new code-server? Lets say I'm working on the laptop, instead of tabbing back and forward between it and the browser, I would just open up the tunnel and access it in the devtools. Is it possible to do it or it works only via code-servers?

I saw this reply in #38, but then I don't understand why there is a tunnel option in the devtools configs.

[antfu]

The auth token is stored in the localStorage, which means if you are using a different domain, you will need to change the localhost domain to your custom one to make it work.

For VS Code tunneling, it's not working properly because vscode.dev has a CORS rule to forbid being embedded in iframe. I think there is nothing we could do to workaround it

[sandros94]

The auth token is stored in the localStorage, which means if you are using a different domain, you will need to change the localhost domain to your custom one to make it work.

I've been trying to do it by myself, but I have to admit that I didn't understand where should I configure the domain. Are we talking about the baseURL for the nuxt project?

[antfu]

It should be improved in the latest version to provide the correct domain for auth. Feel free to bring it back if it still persists.