VScode full stack debugging issue with Chrome and Google Authentication

[giodas]

Summary

When debugging an application in Visual Studio code, I can't login with Google into my Web Application as I get the error "this browser or app may not be secure.".
Below the content of the .vscode/launch.json file, taken from the official documentation at this link https://nextjs.org/docs/app/building-your-application/configuring/debugging.
If I try running "Next.js: debug full stack" and logging with Google into my app, I get the error above.

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Next.js: debug server-side",
        "type": "node-terminal",
        "request": "launch",
        "command": "npm run dev"
      },
      {
        "name": "Next.js: debug client-side",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000"
      },
      {
        "name": "Next.js: debug full stack",
        "type": "node",
        "request": "launch",
        "program": "${workspaceFolder}/node_modules/.bin/next",
        "runtimeArgs": ["--inspect"],
        "skipFiles": ["<node_internals>/**"],
        "serverReadyAction": {
          "action": "debugWithChrome",
          "killOnServerStop": true,
          "pattern": "- Local:.+(https?://.+)",
          "uriFormat": "%s",
          "webRoot": "${workspaceFolder}"
        }
      }
    ]
}

Additional information

No response

Example

No response

[giodas]

[zacuke]

The browser or app may not be secure message seems to be related to this bug https://issues.chromium.org/issues/40746300 and the port option seems to be required for this scenario. Some vscode debugger configurations such as"action": "debugWithChrome" don't seem to support the port option.

Please try this launch.json - you will have to manually update url to match your application

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Node",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "node",
      "runtimeArgs": ["--inspect", "./node_modules/next/dist/bin/next"],
      "cwd": "${workspaceFolder}",
      "skipFiles": ["<node_internals>/**"], 
      
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "port": 9222
    }

   
  ],  
  "compounds": [
    {
      "name": "Debug Full Stack",
      "configurations": ["Launch Node", "Launch Chrome"],
      "stopAll": true
    }
  ]
}

[mkf62]

For anyone using a backend that's not NextJS related (but your front-end is) and needing to use startDebugging as part of your serverReadyAction, here's a guide of how to use a Chrome profile with extensions installed in it, and still have your breakpoints work. It's based on NextJS 14 and a Flask backend, although I think my launch.json examples would probably be workable for other cases. It took me forever to figure this out since everyone seems to be using debugWithChrome variations which doesn't allow for Chrome profiles with extensions to be loaded. I do not know if this solution will work reliably with turbopack or not, haven't tested it.