authWithOAuth2Code gives 404

[ollema]

hi!

for some reason, the manual OAuth2 flow is not working for me.

this is the call which is not working:

	const { record, meta } = await locals.pb
		.collection('users')
		.authWithOAuth2Code(provider.name, code, provider.codeVerifier, env.AUTH_REDIRECT_URL);

in my SvelteKit logs, I get:

ClientResponseError 404: Not Found.
...
{
  url: 'https://pocketbase.example.com/api/collections/users/auth-with-oauth2',
  status: 404,
  response: { code: 404, message: 'Not Found.', data: {} },
  isAbort: false,
  originalError: {
    url: 'https://pocketbase.example.com/api/collections/users/auth-with-oauth2',
    status: 404,
    data: { code: 404, message: 'Not Found.', data: {} }
  }
}

which seems strange. based on my interactions with the demo site, it seems like a GET request is issued instead of a POST request. I wonder if that is the case and why?

[ollema]

also seems to happen with the demo site?

~
❯ curl https://pocketbase.io/api/collections/users/auth-methods
{"usernamePassword":false,"emailPassword":true,"authProviders":[]}

~
❯ curl https://pocketbase.io/api/collections/users/auth-with-oauth2
{"code":404,"message":"Not Found.","data":{}}

nevermind, with -X POST I at least get something:

❯ curl -X POST https://pocketbase.io/api/collections/users/auth-with-oauth2
{"code":400,"message":"Something went wrong while processing your request.","data":{"code":{"code":"validation_required","message":"Cannot be blank."},"codeVerifier":{"code":"validation_required","message":"Cannot be blank."},"provider":{"code":"validation_required","message":"Cannot be blank."},"redirectUrl":{"code":"validation_required","message":"Cannot be blank."}}}

[ollema]

okay, so I intercepted the call in the debugger and made a curl call instead:

curl -X POST -H 'Content-Type: application/json' -d '{ "provider": "facebook", "code": "redacted", "codeVerifier": "redacted", "redirectUrl": "https://example.com/auth/redirect" }' https://pocketbase.example/com/api/collections/users/auth-with-oauth2

{"meta":{"id":"redacted","name":"FirstName LastName","username":"","email":"redacted@gmail.com","avatarUrl":"redacted","rawUser":{"email":"redacted@gmail.com","id":"redacted","name":"FirstName LastName","picture":{"data":{"height":200,"is_silhouette":false,"url":"redacted","width":200}}},"accessToken":"redacted","refreshToken":"","isNew":true},"record":{"avatar":"","collectionId":"_pb_users_auth_","collectionName":"users","created":"2023-11-12 22:48:09.621Z","email":"redacted@gmail.com","emailVisibility":false,"id":"redacted","name":"","updated":"2023-11-12 22:48:09.621Z","username":"redacted","verified":true},"token":"redacted"}

so not sure why the js-sdk call is using a GET request instead of a POST request 🤔

[ollema]

as seen above, the requests do make it to the pocketbase server but as GET requests instead of POST requests

[ollema]

for me, it's enough to add a +server.ts file with the following content:

// src/routes/auth/demo/+server.ts
export const GET = async ({ locals }) => {
    await locals.pb
        .collection('users')
        .authWithOAuth2Code('not-a-real-provider', 'abc123', 'test123', 'example.com');

    return new Response('ok');
};

to trigger this:

ClientResponseError 404: Not Found.
    at file:///Users/demo/node_modules/.pnpm/pocketbase@0.19.0/node_modules/pocketbase/dist/pocketbase.es.mjs:1:31144
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async GET (/Users/demo/src/routes/auth/demo/+server.ts:2:2)
    at async Module.render_endpoint (/Users/demo/node_modules/.pnpm/@sveltejs+kit@1.27.5_svelte@4.2.3_vite@4.5.0/node_modules/@sveltejs/kit/src/runtime/server/endpoint.js:43:18)
    at async resolve (/Users/demo/node_modules/.pnpm/@sveltejs+kit@1.27.5_svelte@4.2.3_vite@4.5.0/node_modules/@sveltejs/kit/src/runtime/server/respond.js:404:17)
    at async Object.handle (/Users/demo/src/hooks.server.ts:22:19)
    at async Module.respond (/Users/demo/node_modules/.pnpm/@sveltejs+kit@1.27.5_svelte@4.2.3_vite@4.5.0/node_modules/@sveltejs/kit/src/runtime/server/respond.js:274:20)
    at async file:///Users/demo/node_modules/.pnpm/@sveltejs+kit@1.27.5_svelte@4.2.3_vite@4.5.0/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:510:22 {
  url: 'https://pocketbase.example.com/api/collections/users/auth-with-oauth2',
  status: 404,
  response: { code: 404, message: 'Not Found.', data: {} },
  isAbort: false,
  originalError: {
    url: 'https://pocketbase.example.com/api/collections/users/auth-with-oauth2',
    status: 404,
    data: { code: 404, message: 'Not Found.', data: {} }
  }
}

not sure what's going on!

[ganigeorgiev]

Do you have a reverse proxy (nginx, apache, caddy, etc.) that could interfere with the request? Since it works when sending the request with curl I doubt that this is the case here.

Does using the "Manual code exchange" example with the static html files in pb_public work?

[ganigeorgiev]

I've tested locally the above static html example with JS SDK v0.19.0 and PocketBase v0.19.4 and I'm not able to reproduce it. It is possible to be something with the node fetch implementation (some frontend frameworks comes with their own custom version and/or use a polyfill), I'm not really sure.
If you are still not able to resolve it, please provide more details about your environment and ideally create a minimal reproducible repo and I'll try to investigate it.

[ollema]

I do have a reverse proxy setup, the app is deployed with caprover which comes with it's own nginx setup. as you pointed out, it does work with curl. however, maybe you are on the right track:

85.230.110.234 - - [13/Nov/2023:09:40:51 +0000] "pocketbase.example.com" "POST /api/collections/users/auth-with-oauth2/ HTTP/1.1" 302 138 "-" "node" "-"
85.230.110.234 - - [13/Nov/2023:09:40:51 +0000] "pocketbase.example.com" "GET /api/collections/users/auth-with-oauth2/ HTTP/1.1" 404 46 "-" "node" "-"

it seems like the POST request is redirected and rewritten as a GET request somehow... I wonder why!

[ganigeorgiev]

Hm, I'm not sure why the above logs are happening. The closest I could find was this old issue caprover/caprover#167, where the users mention that it could be due to http->https redirect. To rule it out, if not already, try to use https url scheme when initializing the JS SDK.

[ollema]

it was this setting in caprover:

I disabled this and it's working now! 🎉