Custom Provider for TikTok Error - access_token not present in TokenSet

[thomasefbland]

Provider type

Custom provider

Environment

System:
OS: macOS 12.6
CPU: (10) arm64 Apple M1 Pro
Memory: 221.34 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.10.0 - /opt/homebrew/bin/node
npm: 8.19.2 - /opt/homebrew/bin/npm
Browsers:
Brave Browser: 105.1.43.89
Safari: 16.0
npmPackages:
next: 12.3.1 => 12.3.1
next-auth: ^4.13.0 => 4.13.0
react: 18.2.0 => 18.2.0

Describe the issue

To start off, troubleshooting this is a bit of a nightmare to be frank. TikTok does not allow localhost as a redirect url, so I've been testing this portion of functionality purely on the vercel deployment. The problem presents when logging in through TikTok, where after redirecting from the authorization portion it appears to fail. That is at least my presumption, as the url is /api/auth/signin?error=OAuthCallback

This is the nextauth.ts file

import NextAuth from "next-auth/next";

export const authOptions: NextAuthOptions = {
  providers: [
    {
      id: "tiktok",
      name: "TikTok",
      type: "oauth",
      version: "2.0",
      clientId: process.env.TIKTOK_CLIENT_KEY,
      clientSecret: process.env.TIKTOK_CLIENT_SECRET,
      authorization: {
        url: "https://www.tiktok.com/auth/authorize/",
        params: {
          scope: "user.info.basic,video.list,video.upload",
          response_type: "code",
          client_key: process.env.TIKTOK_CLIENT_KEY,
        },
      },
      token: {
        url: "https://open-api.tiktok.com/oauth/access_token/",
        params: {
          client_key: process.env.TIKTOK_CLIENT_KEY,
          client_secret: process.env.TIKTOK_CLIENT_SECRET,
          grant_type: "authorization_code",
        },
      },
      userinfo: "https://open-api.tiktok.com/user/info/",
      profile(profile) {
        return {
          profile: profile,
          id: profile.open_id,
        };
      },
      checks: ["state"],
    },
  ],

  secret: process.env.NEXTAUTH_SECRET,

  debug: true,
};

export default NextAuth(authOptions);

And this is the relevant function log from the vercel deployment. Again, I cannot test this with localhost

2022-10-27T22:53:57.340Z	1ebc03af-1359-4072-8f72-278d36f43ff2	ERROR	[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error access_token not present in TokenSet {
  error: TypeError: access_token not present in TokenSet
      at Client.requestResource (/var/task/node_modules/.pnpm/[email protected]/node_modules/openid-client/lib/client.js:1115:15)
      at Client.userinfo (/var/task/node_modules/.pnpm/[email protected]/node_modules/openid-client/lib/client.js:1233:33)
      at oAuthCallback (/var/task/node_modules/.pnpm/[email protected]_azq6kxkn3od7qdylwkyksrwopy/node_modules/next-auth/core/lib/oauth/callback.js:149:30)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at async Object.callback (/var/task/node_modules/.pnpm/[email protected]_azq6kxkn3od7qdylwkyksrwopy/node_modules/next-auth/core/routes/callback.js:52:11)
      at async NextAuthHandler (/var/task/node_modules/.pnpm/[email protected]_azq6kxkn3od7qdylwkyksrwopy/node_modules/next-auth/core/index.js:201:28)
      at async NextAuthNextHandler (/var/task/node_modules/.pnpm/[email protected]_azq6kxkn3od7qdylwkyksrwopy/node_modules/next-auth/next/index.js:23:19)
      at async /var/task/node_modules/.pnpm/[email protected]_azq6kxkn3od7qdylwkyksrwopy/node_modules/next-auth/next/index.js:59:32
      at async Object.apiResolver (/var/task/node_modules/.pnpm/[email protected]_2mygebwfgdyopr3fy2qddu2eli/node_modules/next/dist/server/api-utils/node.js:366:9)
      at async NextNodeServer.runApi (/var/task/node_modules/.pnpm/[email protected]_2mygebwfgdyopr3fy2qddu2eli/node_modules/next/dist/server/next-server.js:481:9) {
    name: 'OAuthCallbackError',
    code: undefined
  },
  providerId: 'tiktok',
  message: 'access_token not present in TokenSet'

How to reproduce

Clone the repo and deploy on vercel. Admittedly, this may be a challenge to test, as acquiring a tiktok developer key is quite a process. If you are able to do this, simply navigate to the homepage and press login.
I also have the relevant environment variables set on Vercel, so that is not the cause of the issue.

Expected behavior

My expectation would be that, at the minimum, it would fail on the userinfo stage of the process. Perhaps it is and I am misdiagnosing the problem. The tiktok api is a bit bare and strange, but I did expect to be able to get past the requesting access and refresh token stage. Of course ideally, it would function all the way to completion of a sign-in.

[ThangHuuVu]

Normally this issue would come up if you have SECRET and callback URL settings incorrectly. See similar issue: #4266 (comment)

[thomasefbland]

I do not believe this is the problem. The redirect domain on the TikTok for Developers page is correctly set to creatorstudio.vercel.app. On vercel, the deployment is in production mode. I cleared both NEXTAUTH_URL and NEXTAUTH_SECRET to double check both have no hidden spaces. NEXTAUTH_URL is set to https://creatorstudio.vercel.app/ Should I not have the secret property defined in the authOptions?

[ThangHuuVu]

Should I not have the secret property defined in the authOptions?

Yes, as that bit shouldn't be necessary. NextAuth.js will pick up the secret for you. But I'm not sure if it will fix your error 🤔 Could you dig a bit further? Specifically, see what this line use as params

next-auth/packages/next-auth/src/core/lib/oauth/callback.ts

Line 114 in 30ad639

tokens = await client.callback(provider.callbackUrl, params, checks)

BTW you should set debug to something like: process.env.NODE_ENV !== 'production'

[thomasefbland]

How ought I see what that line uses as params? I can only get any callback at all from tiktok if its on the production url, so on the vercel deployment.

[amingomezd]

i had the same problem some months ago, when i was developing a client for tiktok loginkit, it's a nightmare to develop on localhost. The only solution to this to make it work on localhost was using a chrome extension: Requestly . The extension acts as a "middleware" and redirects the domain to localhost.

[thomasefbland]

Were you able to resolve the issue? Anything you know that might help me resolve mine? I'll look into Requestly to make the process less hellish.

[toddjudd]

Were y'all able to get this working? I'm currently stuck on just getting the redirect_uri set correctly. Would love to discuss what you were able to accomplish.

[muhaimincs]

Looking forward for absolute way for integrate tiktok with nextauth

[DewinU]

#6546

[DewinU]

#12168