TikTok Provider usage for Sandbox Environment

[DevinLeamy]

Hi. I'm setting up TikTok authentication in my application using the TikTok provider.

  providers: [
    TikTok({
    authorization: {
      url: "https://www.tiktok.com/v2/auth/authorize",
      params: {
        client_key: env.AUTH_TIKTOK_ID,
        scope: "user.info.basic,video.publish,video.upload,user.info.profile",
        response_type: "code",
        redirect_uri: "https://mydomain.com/api/auth/callback/tiktok/",
      },
    },
  })],

My application has not been approved by TikTok, so I'm using TikTok's Sandbox environment.

I've setup a callback URL https://mydomain.com/api/auth/callback/tiktok/, scopes, and a test user.

The TikTok provider failed to work. After the user approves the requested scopes, there's a server-side error:

�[31m[auth][cause]�[0m: nx: "response" body "access_token" property must be a non-empty string
    at io (/var/task/.next/server/chunks/76.js:379:16295)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async iv (/var/task/.next/server/chunks/76.js:379:20250)
    at async iz (/var/task/.next/server/chunks/76.js:379:31160)
    at async i4 (/var/task/.next/server/chunks/76.js:379:36906)
    at async ar (/var/task/.next/server/chunks/76.js:379:48224)
    at async as (/var/task/.next/server/chunks/76.js:379:52977)
    at async /var/task/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:36957
    at async eC.execute (/var/task/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:27552)
    at async eC.handle (/var/task/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:38291)

(though an auth code is returned)

�[90m[auth][debug]:�[0m callback route error details {
  "method": "GET",
  "query": {
    "code": "bGAr0o93Hq9gIRVhAhkLmi4yvgBy5EfM[...]",
    "scopes": "user.info.basic,video.upload,user.info.profile,video.publish"
  }
}

The PR introducing the TikTok provider #8131 says

"please note that in order for you to test this need an approved Tiktok App with the correct redirect_uri, domain and permissions/scope approved, the app status must be "Live in Production"

Which would suggest that it's not applicable to my use case. That said, I've seen no indication from the TikTok documentation that it should not work. Wondering if anyone else encountered this failure while using the TikTok provider in development?

[DewinU]

Hey @DevinLeamy , they already merge a fix of this issue #12168 , 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 or if you have any questions :)