refactor(tiktok): Update TikTok provider configuration with custom Fetch

[DewinU]

☕️ Reasoning

• Refactor Tiktok Provider default configuration to use the new customFetch feature feat(oauth): expose custom fetch #11975
• Added more documentation on how to setup this provider using de default configuration and also as a custom provider on your own.

🧢 Checklist

• Documentation
• Tests
• Ready to be merged

🎫 Affected issues

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

📌 Resources

• Security guidelines
• Contributing guidelines
• Code of conduct
• Contributing to Open Source

Video Demostration

https://youtu.be/M-PCU-e8IGI?si=uunGbOxhNXIRlnXT

Custom Provider

You dont really need to wait for this PR to be merged, if you already 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 at your list of providers

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

Any feedback will be greatly appreciated.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
auth-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 4, 2024 9:45am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
next-auth-docs	⬜️ Ignored (Inspect)	Visit Preview		Nov 4, 2024 9:45am

[vercel]

@DewinU is attempting to deploy a commit to the authjs Team on Vercel.

A member of the Team first needs to authorize it.

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 97 lines in your changes missing coverage. Please review.

Please upload report for BASE (main@c5a70d3). Learn more about missing BASE report.

Files with missing lines	Patch %	Lines
packages/core/src/providers/tiktok.ts	0.00%	97 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #12168   +/-   ##
=======================================
  Coverage        ?   39.15%           
=======================================
  Files           ?      191           
  Lines           ?    29979           
  Branches        ?     1297           
=======================================
  Hits            ?    11738           
  Misses          ?    18241           
  Partials        ?        0           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[mattstrick]

Looking forward to this update!

[balazsorban44]

This is huge! 🤯 Finally!

[balazsorban44]

Amazing, thank you @DewinU!