Tiktok error: "The request parameters are malformed."

[eidriahn]

Environment

Local

Reproduction URL

https://github.com/eidriahn/next-auth-example

Describe the issue

When trying to login with the TikTok provider, during the code/token exchange an error is thrown resulting in a failed login and a "Configuration" error.

How to reproduce

• Clone the "Reproduction URL" repository.
• Modify the /etc/hosts file with ``` 127.0.0.0 local.bountiez.co ````, this will allow you to test this locally.
• Setup a sandbox app for tiktok in the 'tiktok for developers' dashboard:
• Add "https://local.bountiez.co:3000/auth/callback/tiktok" as a redirect uri in the tiktok app.
• Set up your .env file with AUTH_SECRET , AUTH_TIKTOK_ID , AUTH_TIKTOK_SECRET
• Try to log in and see the server logs.

Expected behavior

Instead of throwing an error and re-routing to the error screen the user should be logged in/ created.

[eidriahn]

I can take this one, but a nudge in the right direction would be helpfull.

[ThangHuuVu]

Could you add more details on the error? Also see this issue if it helps: #11468

[eidriahn]

Sure, after some debugging I got to the issue.

Note: I am using version 5.0.0-beta.25

During the oAuth flow after the user has done the login with an external provider they need to "Fetch an access token using an authorization code", usually this means a post request to an endpoint with the code, grant_type, redirect_uri and code_verifier, once done it will return an access token.
The issue is that TikTok, unlike most, also requires the client_key and client_secret of the tiktok app used for the process.

In terms of code this means that in the callback.ts file this piece of code:

additionalParameters: {
       client_key: options.provider.clientId,
       client_secret: options.provider.clientSecret ?? ""
     }

needs to be added to the options parameter of the authorizationCodeGrantRequest function call.

This would be the final code:

let codeGrantResponse = await o.authorizationCodeGrantRequest(
    as,
    client,
    clientAuth,
    codeGrantParams,
    redirect_uri,
    codeVerifier ?? "decoy",
    {
      // TODO: move away from allowing insecure HTTP requests
      [o.allowInsecureRequests]: true,
      [o.customFetch]: (...args) => {
        if (!provider.checks.includes("pkce")) {
          args[1].body.delete("code_verifier")
        }
        return (provider[customFetch] ?? fetch)(...args)
      },
      additionalParameters: {
        client_key: options.provider.clientId,
        client_secret: options.provider.clientSecret ?? ""
      }
    }
  )

although I am not sure you would want to add this code just to fix TikTok, maybe add an additional field to all providers ?

Hopefully it's a bit clearer now, please let me know if you want me to fix this issue and if so what's the best approach.

[and-oli]

I'm facing the same issue but only when overriding any of the TikTokProvider config options. In my case I'm overriding the authorization option to use a less restrictive scope. I do see that manually adding the client key and secret to the value of additionalParameters: at handleOAuth() fixes the issue.

[olivierlesnicki]

For some reason, this workaround also work:
#11468 (comment)

[DewinU]

Do you still have the error?, There were some fixes added to the provider, it works as of now video reference and also you could add it as a custom provider