Generic OAuth error "invalid_client_metadata"

[Gregoor]

Hi there 👋🏼

Describe the bug

In prod OAuth fails for me with the following (it works in dev):

⨯ Error: OAuth "invalid_client_metadata" error: Failed to fetch client information due to an internal error
    at h.request (/var/task/web/.next/server/chunks/533.js:60:238928)
    at async c.authorize (/var/task/web/.next/server/chunks/533.js:60:227047)
    at async d (/var/task/web/.next/server/app/page.js:1:4328)
    at async (/var/task/web/node_modules/.pnpm/next@15.0.3_react-dom@19.0.0-rc-66855b96-20241106_react@19.0.0-rc-66855b96-20241106__react@19.0.0-rc-66855b96-20241106/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:1299)
    at async rc (/var/task/web/node_modules/.pnpm/next@15.0.3_react-dom@19.0.0-rc-66855b96-20241106_react@19.0.0-rc-66855b96-20241106__react@19.0.0-rc-66855b96-20241106/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:126:11937)
    at async an (/var/task/web/node_modules/.pnpm/next@15.0.3_react-dom@19.0.0-rc-66855b96-20241106_react@19.0.0-rc-66855b96-20241106__react@19.0.0-rc-66855b96-20241106/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:132:1048)
    at async eB (/var/task/web/node_modules/.pnpm/next@15.0.3_react-dom@19.0.0-rc-66855b96-20241106_react@19.0.0-rc-66855b96-20241106__react@19.0.0-rc-66855b96-20241106/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:2871:22612)
    at async el (/var/task/web/node_modules/.pnpm/next@15.0.3_react-dom@19.0.0-rc-66855b96-20241106_react@19.0.0-rc-66855b96-20241106__react@19.0.0-rc-66855b96-20241106/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:2872:1548)
    at async aT.renderToResponseWithComponentsImpl (/var/task/web/node_modules/.pnpm/next@15.0.3_react-dom@19.0.0-rc-66855b96-20241106_react@19.0.0-rc-66855b96-20241106__react@19.0.0-rc-66855b96-20241106/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:2872:1643) {
  response: Response {
    status: 400,
    statusText: 'Bad Request',
    headers: Headers {
      date: 'Mon, 25 Nov 2024 00:39:58 GMT',
      'content-type': 'application/json',
      'transfer-encoding': 'chunked',
      connection: 'keep-alive',
      'x-powered-by': 'Express',
      'access-control-allow-origin': '*',
      'access-control-allow-headers': '*',
      'cache-control': 'no-store',
      pragma: 'no-cache',
      'dpop-nonce': 'Jw-9j3pBbjXCne6NHHT01L4Yq3xGRWheJ45l-blIVMA',
      'access-control-expose-headers': 'DPoP-Nonce',
      vary: 'accept-encoding',
      'content-encoding': 'br'
    },
    body: undefined,
    bodyUsed: true,
    ok: false,
    redirected: false,
    type: 'basic',
    url: 'https://bsky.social/oauth/par'
  },
  payload: [Object],
  error: 'invalid_client_metadata',
  errorDescription: 'Failed to fetch client information due to an internal error',
  digest: '1499086769'
}

To Reproduce

This is my OAuth config:

const IS_DEV = process.env.NODE_ENV == "development";
const ORIGIN = IS_DEV ? "http://127.0.0.1:3000" : "https://skylights.my";

const abs = (s: string) => `${ORIGIN}/${s}`;

const SCOPE = "atproto transition:generic";
const REDIRECT_URI = abs("atproto-oauth-callback");

export const authClient = new NodeOAuthClient({
  clientMetadata: {
    client_id: IS_DEV
      ? `http://localhost?redirect_uri=${enc(REDIRECT_URI)}&scope=${enc(SCOPE)}`
      : `${ORIGIN}/oauth/client-metadata.json`,
    client_name: "Skylights",
    client_uri: ORIGIN,
    tos_uri: abs("tos"),
    policy_uri: abs("policy"),
    redirect_uris: [REDIRECT_URI],
    grant_types: ["authorization_code", "refresh_token"],
    response_types: ["code"],
    application_type: "web",
    scope: SCOPE,
    token_endpoint_auth_method: "none",
    dpop_bound_access_tokens: true,
  },
  ...stores
});

Hope I gave enough info, please let me know if not!

[mikestaub]

I get a 404 when I curl that endpoint, it needs to return the client-metadata.json content and it must match with what is passed to the NodeOAuthClient:

curl -vL https://skylights.my/client-metadata.json

I built a passport strategy you might want to try with your node app, or at least look at the working example: https://github.com/mikestaub/passport-atprotocol

[Gregoor]

Oops, I did a bad job of keeping this example in sync while I was trying things today. The new metadata URL is: https://www.skylights.my/oauth/client-metadata.json (which does go through now, and the problem persists).

Thanks for the library as well, I will give it a read!