fix(providers): update TikTok provider configuration with custom Fetch (

#12168) * refactor(tiktok): Update TikTok provider configuration - Added custom fetch * fix format --------- Co-authored-by: Balázs Orbán <[email protected]>
nextauthjs · Nov 4, 2024 · 2e78fa2 · 2e78fa2
1 parent 39b7d9a
commit 2e78fa2
Showing 1 changed file with 97 additions and 47 deletions.
diff --git a/packages/core/src/providers/tiktok.ts b/packages/core/src/providers/tiktok.ts
@@ -8,13 +8,13 @@
  *
  * @module providers/tiktok
  */
-import { TokenSet } from "../types.js"
+import { customFetch } from "../lib/symbols.js"
 import type { OAuthConfig, OAuthUserConfig } from "./index.js"
 
 /**
  * [More info](https://developers.tiktok.com/doc/tiktok-api-v2-get-user-info/)
  */
-export interface TiktokProfile extends Record<string, any> {
+export interface TiktokProfile {
   data: {
     user: {
       /**
@@ -137,14 +137,16 @@ export interface TiktokProfile extends Record<string, any> {
  * ```
  *
  * #### Configuration
+ * You can omit the client and secret if you have set the `AUTH_TIKTOK_ID` and `AUTH_TIKTOK_SECRET` environment variables.
+ * Remeber that the AUTH_TIKTOK_ID is the Client Key in the TikTok Application
  *```ts
  * import { Auth } from "@auth/core"
  * import TikTok from "@auth/core/providers/tiktok"
  *
  * const request = new Request(origin)
  * const response = await Auth(request, {
  *   providers: [
- *     TikTok({ clientId: TIKTOK_CLIENT_KEY, clientSecret: TIKTOK_CLIENT_SECRET }),
+ *     TikTok({ clientId: AUTH_TIKTOK_ID, clientSecret: AUTH_TIKTOK_SECRET }),
  *   ],
  * })
  * ```
@@ -153,13 +155,15 @@ export interface TiktokProfile extends Record<string, any> {
  *  - [TikTok app console](https://developers.tiktok.com/)
  *  - [TikTok login kit documentation](https://developers.tiktok.com/doc/login-kit-web/)
  *  - [Avaliable Scopes](https://developers.tiktok.com/doc/tiktok-api-scopes/)
+ *  - [Sandbox for testing](https://developers.tiktok.com/blog/introducing-sandbox)
  *
  *
  * ### Notes
  *
  * :::tip
  *
  * Production applications cannot use localhost URLs to sign in with TikTok. You need add the domain and Callback/Redirect url's to your TikTok app and have them review and approved by the TikTok Team.
+ * If you need to test your implementation, you can use the sandbox feature and ngrok for testing in localhost.
  *
  * :::
  *
@@ -171,7 +175,7 @@ export interface TiktokProfile extends Record<string, any> {
  *
  * :::tip
  *
- * Client_ID will be the Client Key in the TikTok Application
+ * AUTH_TIKTOK_ID will be the Client Key in the TikTok Application
  *
  * :::
  *
@@ -183,6 +187,64 @@ export interface TiktokProfile extends Record<string, any> {
  * The TikTok provider comes with a [default configuration](https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/tiktok.ts).
  * To override the defaults for your use case, check out [customizing a built-in OAuth provider](https://authjs.dev/guides/configuring-oauth-providers).
  *
+ * If You Need to Customize the TikTok Provider, You Can Use the Following Configuration as a custom provider
+ *
+ * ```ts
+ * {
+ *   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: options.clientId,
+ *       scope: "user.info.profile", //Add scopes you need eg(user.info.profile,user.info.stats,video.list)
+ *     },
+ *   },
+ *
+ *   token: "https://open.tiktokapis.com/v2/oauth/token/",
+ *
+ *   userinfo: "https://open.tiktokapis.com/v2/user/info/?fields=open_id,avatar_url,display_name,username", //Add fields you need eg(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,
+ *     };
+ *   },
+ * }
+ *
+ * ```
+ *
  * :::
  *
  * :::info **Disclaimer**
@@ -195,62 +257,50 @@ export interface TiktokProfile extends Record<string, any> {
  *
  * :::
  */
-export default function TikTok<P extends TiktokProfile>(
-  options: OAuthUserConfig<P>
-): OAuthConfig<P> {
+export default function TikTok(
+  options: OAuthUserConfig<TiktokProfile>
+): OAuthConfig<TiktokProfile> {
   return {
+    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", options.clientId!)
+        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: options.clientId,
         scope: "user.info.profile",
-        response_type: "code",
       },
     },
 
-    token: {
-      url: "https://open.tiktokapis.com/v2/oauth/token/",
-      async request({ params, provider }) {
-        const res = await fetch(provider.token?.url as unknown as string, {
-          method: "POST",
-          headers: {
-            "Cache-Control": "no-cache",
-            "Content-Type": "application/x-www-form-urlencoded",
-          },
-          body: new URLSearchParams({
-            client_key: provider.clientId!,
-            client_secret: provider.clientSecret!,
-            code: params.code!,
-            grant_type: "authorization_code",
-            redirect_uri: provider.callbackUrl!,
-          }),
-        }).then((res) => res.json())
+    token: "https://open.tiktokapis.com/v2/oauth/token/",
+    userinfo:
+      "https://open.tiktokapis.com/v2/user/info/?fields=open_id,avatar_url,display_name,username",
 
-        const tokens: TokenSet = {
-          access_token: res.access_token,
-          expires_at: res.expires_in,
-          refresh_token: res.refresh_token,
-          scope: res.scope,
-          id_token: res.open_id,
-          token_type: res.token_type,
-          session_state: res.open_id,
-        }
-        return {
-          tokens,
-        }
-      },
-    },
-    userinfo: {
-      url: "https://open.tiktokapis.com/v2/user/info/?fields=open_id,avatar_url,display_name,username",
-      async request({ tokens, provider }) {
-        return await fetch(provider.userinfo?.url as URL, {
-          headers: { Authorization: `Bearer ${tokens.access_token}` },
-        }).then(async (res) => await res.json())
-      },
-    },
     profile(profile) {
       return {
         id: profile.data.user.open_id,