TikTok Provider: OperationProcessingError: "response" is not a conform Token Endpoint response

[LogicalOgbonna]

Provider type

Tiktok

Environment

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1
    Memory: 50.50 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.2.0 - ~/.nvm/versions/node/v22.2.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v22.2.0/bin/yarn
    npm: 10.8.0 - ~/.nvm/versions/node/v22.2.0/bin/npm
    pnpm: 9.1.2 - ~/.nvm/versions/node/v22.2.0/bin/pnpm
  Browsers:
    Chrome: 127.0.6533.72
    Safari: 17.0
  npmPackages:
    @auth/prisma-adapter: ^1.5.1 => 1.6.0 
    next: 14.1.3 => 14.1.3 
    next-auth: 5.0.0-beta.17 => 5.0.0-beta.17 
    react: ^18 => 18.3.1 

Reproduction URL

https://github.com/LogicalOgbonna/tiktok-provider-error

Describe the issue

[auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror
[auth][cause]: OperationProcessingError: "response" is not a conform Token Endpoint response
    at processGenericAccessTokenResponse (webpack-internal:///(rsc)/./node_modules/oauth4webapi/build/index.js:1006:15)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Module.processAuthorizationCodeOAuth2Response (webpack-internal:///(rsc)/./node_modules/oauth4webapi/build/index.js:1192:20)
    at async handleOAuth (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/actions/callback/oauth/callback.js:100:18)
    at async Module.callback (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/actions/callback/index.js:32:41)
    at async AuthInternal (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/index.js:39:24)
    at async Auth (webpack-internal:///(rsc)/./node_modules/@auth/core/index.js:126:34)
[auth][details]: {
  "provider": "tiktok"
}

How to reproduce

Build and run code in this repo, click on Login with TikTok
https://github.com/LogicalOgbonna/tiktok-provider-error

Expected behavior

It should return the user's profile as documented

[DewinU]

Hey @LogicalOgbonna , they already merge a fix of this issue, but it is not on a release yet, if you still need the Tiktok Provider on your application, you can set it up as a custom provider

const CustomTiktok: OAuth2Config<any> & Provider =
{
  async [customFetch](...args) {
    const url = new URL(args[0] instanceof Request ? args[0].url : args[0])
    if (url.pathname.endsWith("/token/")) {
      const [url, request] = args

      const customHeaders = {
        ...request?.headers,
        "content-type": "application/x-www-form-urlencoded",
      }

      const customBody = new URLSearchParams(request?.body as string)
      customBody.append("client_key", process.env.AUTH_TIKTOK_ID!)
      const response = await fetch(url, {
        ...request,
        headers: customHeaders,
        body: customBody.toString(),
      })
      const json = await response.json()
      return Response.json({ ...json })
    }
    return fetch(...args)
  },
  id: "tiktok",
  name: "TikTok",
  type: "oauth",
  client: {
    token_endpoint_auth_method: "client_secret_post",
  },
  authorization: {
    url: "https://www.tiktok.com/v2/auth/authorize",
    params: {
      client_key: process.env.AUTH_TIKTOK_ID,
      scope: "user.info.profile",
    },
  },

  token: "https://open.tiktokapis.com/v2/oauth/token/",
  userinfo:
    "https://open.tiktokapis.com/v2/user/info/?fields=open_id,avatar_url,display_name,username",

  profile(profile) {
    return {
      id: profile.data.user.open_id,
      name: profile.data.user.display_name,
      image: profile.data.user.avatar_url,
      email: profile.data.user.email || profile.data.user.username || null,
    }
  },
}

and then add it to your list of providers

export const { handlers, auth } = NextAuth({ providers: [ GitHub, CustomTiktok ] })

Please do let me know if this workaround works for you so they can close this issue

[ThangHuuVu]

Think the fix was released, so I'm closing this, feel free to open a new issue if needed later. 🙏