Unable to Authenticate Wrangler in any Remote Development Environment

[Grunet]

https://developers.cloudflare.com/workers/wrangler/commands/#using-wrangler-login-on-a-remote-machine outlines how to authenticate the Wrangler CLI when using a remote development environment (e.g. Codespaces).

However it doesn't seem to work. The original shell always puts out this error message at the end

Received query string parameter doesn't match the one sent! Possible malicious activity somewhere.

I've seen this on Gitpod, Codespaces, Stackblitz, and Codesandbox so far so I don't think it's specific to any of them.

Is there an alternative form of authentication that could be used in the meantime? I haven't gotten api key-based authentication to work either

[Grunet]

My assumption is this has something to do with either Proof of Key Code Exchange (PKCE) and/or state for Cross Site Request Forgery (CSRF) protection, where after I authenticate via the UI, my local browser has something that running curl on the remote machine doesn't

[Grunet]

Yeah it's state https://github.com/cloudflare/workers-sdk/blob/main/packages/wrangler/src/user/user.ts#L636

[Grunet]

Afaict the state is always a query parameter on the redirect URL from the Identity Provider (Cloudflare) and it matches what was sent initially by wrangler (the Referring Provider)

[Grunet]

Not sure what I did differently this time but following this code https://github.com/cloudflare/workers-sdk/blob/main/packages/wrangler/src/user/auth-variables.ts#L14 I was able to do

export CLOUDFLARE_API_TOKEN="API token generated from the Edit Workers template"
npx wrangler whoami

And that appears to have worked

Still not clear to me why the OAuth2 flow isn't working

[Grunet]

*Oh sorry I split this off of an issue comment and Github didn't give me the template. Lmk if I should fix that up

[penalosa]

It sounds like you've got this working with API tokens? That's what we'd recommend for environments like Stackblitz and Codespaces. The remote machine authentication flow should work though (or should be removed from the docs), and so I'll leave this open to track investigating that.

[Grunet]

It sounds like you've got this working with API tokens?

Correct yeah, I think I found a comment on a closed issue that clued me in to trying that, and it's worked so far

[mishra-saksham]

@Grunet
Thank you for writing this issue,
I also was having the same issue until I found a simple way to communicate between the remote development environment and the local in browser account page of cloudflare

So how it works is basically you are doing the same steps no change in that,

1. wrangler login
2. https://dash.cloudflare.com/oauth2/auth?response_type=code&client_id=<Your-Client-Code>&state=<Your-State-Token>&code_challenge=<Your-Challenge-Token>&code_challenge_method=S256&redirect_uri=http%3A%2F%2Flocalhost%3A8976%2Foauth%2Fcallback&scope=account%3Aread+user%3Aread+workers%3Awrite+workers_kv%3Awrite+workers_routes%3Awrite+workers_scripts%3Awrite+workers_tail%3Aread+zone%3Aread+offline_access
3. You open the secure link in the browser where you have cloudflare account logged in.
4. Note : Cloudflare Auth after successful authorization will redirect you to the following query string redirect_uri=http%3A%2F%2Flocalhost%3A8976%2Foauth%2Fcallback&scope=account%3Aread+user%3Aread+workers%3Awrite+workers_kv%3Awrite+workers_routes%3Awrite+workers_scripts%3Awrite+workers_tail%3Aread+zone%3Aread+offline_access
5. After a successful you will have be redirected to the page http://localhost:8976/oauth/callback?code=<Your-Auth-Code>&scope=account%3Aread%20user%3Aread%20workers%3Awrite%20workers_kv%3Awrite%20workers_routes%3Awrite%20workers_scripts%3Awrite%20workers_tail%3Aread%20zone%3Aread%20offline_access&state=<Your-State-Token>
6. Well, to no surprise this page will not work in your current browser window as the origin is the remote development environment which is not accessible as localhost.
7. What can be done next is pretty the main stream principle of using curl internally for testing APIs in development servers.
8. So change the localhost to 127.0.0.1 or what ever your *inet* is there before subnet mask. [To get the details of internal networking use command ip addr, usually it is 127.0.0.1 if nothing is changed from defaults]
9. Now your callback url should look like http://127.0.0.1:8976/oauth/callback?code=<Your-Auth-Code>&scope=account%3Aread%20user%3Aread%20workers%3Awrite%20workers_kv%3Awrite%20workers_routes%3Awrite%20workers_scripts%3Awrite%20workers_tail%3Aread%20zone%3Aread%20offline_access&state=<Your-State-Token>
10. Now open a new bash terminal or powershell or Terminal(macOS terminal) and use the command curl "<your-callback-url>" the callback url is the one we made in the 10th point.
11. Voila! you are now logged in.
    Remember to fill in the details in the boilerplate url schema

[lrapoport-cf]

hi @Grunet :) sounds like you've got things working and that @mishra-saksham is able to get the the remote machine authentication flow (https://developers.cloudflare.com/workers/wrangler/commands/#use-wrangler-login-on-a-remote-machine) going (thanks for the write up!). given this, i will close the issue now, thanks both!

[newsve]

Thanks for sharing, I tried and curl could connect and send its GET request:

*   Trying 127.0.0.1:8976...
* connect to 127.0.0.1 port 8976 failed: Connection refused
*   Trying ::1:8976...
* Connected to localhost (::1) port 8976 (#0)
> GET /oauth/callback?code=[redacted]
> Host: localhost:8976
> User-Agent: curl/7.81.0
> Accept: */*

but wrangler login replied with:

▲ [WARNING] Received query string parameter doesn't match the one sent! Possible malicious activity somewhere.

when I ran curl with the url in quotes I got:

/home/[redacted]/node_modules/wrangler/wrangler-dist/cli.js:29573
            throw a;
            ^

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (/home/[redacted]/node_modules/wrangler/wrangler-dist/cli.js:5121:19)
    at successSteps (/home/[redacted]node_modules/wrangler/wrangler-dist/cli.js:5092:27)
    at fullyReadBody (/home/[redacted]/node_modules/wrangler/wrangler-dist/cli.js:3590:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async specConsumeBody (/home/[redacted]/node_modules/wrangler/wrangler-dist/cli.js:5101:7)
    at async exchangeAuthCodeForAccessToken (/home/[redacted]/node_modules/wrangler/wrangler-dist/cli.js:120821:31)
    at async Server.<anonymous> (/home/[redacted]/node_modules/wrangler/wrangler-dist/cli.js:120983:30)

Node.js v20.12.1

wrangler version: ⛅️ wrangler 3.51.2