TikTok OAuth - Setup Required

\n Configuration Missing: TIKTOK_CLIENT_ID environment variable is not set.\n

Setup Instructions:

Go to TikTok Developers
Create a new app and get your Client ID and Client Secret
Set these environment variables in Val Town:\n
- TIKTOK_CLIENT_ID
- TIKTOK_CLIENT_SECRET
\n
Set your redirect URI in TikTok app settings to: ${c.req.url}callback

\n \n \n `);\n }\n\n return c.html(`\n \n \n TikTok OAuth Demo\n \n \n \n

🎵 TikTok OAuth Demo

Connect your TikTok account to get started

\n \n

\n \n \n `);\n});\n\n// Start OAuth flow\napp.get(\"/auth\", (c) => {\n if (!TIKTOK_CLIENT_ID) {\n return c.text(\"TIKTOK_CLIENT_ID not configured\", 400);\n }\n\n const baseUrl = getBaseUrl(c.req.raw);\n const redirectUri = `${baseUrl}/callback`;\n \n // TikTok OAuth URL with required parameters\n const authUrl = new URL(\"https://www.tiktok.com/v2/auth/authorize/\");\n authUrl.searchParams.set(\"client_key\", TIKTOK_CLIENT_ID);\n authUrl.searchParams.set(\"scope\", \"user.info.basic,user.info.profile\");\n authUrl.searchParams.set(\"response_type\", \"code\");\n authUrl.searchParams.set(\"redirect_uri\", redirectUri);\n authUrl.searchParams.set(\"state\", \"random_state_123\"); // In production, use a secure random state\n \n return new Response(null, {\n status: 302,\n headers: { Location: authUrl.toString() }\n });\n});\n\n// Handle OAuth callback\napp.get(\"/callback\", async (c) => {\n const code = c.req.query(\"code\");\n const state = c.req.query(\"state\");\n const error = c.req.query(\"error\");\n\n if (error) {\n return c.html(`\n \n \n TikTok OAuth Error\n \n \n \n

OAuth Error

\n Error: ${error}
\n Description: ${c.req.query(\"error_description\") || \"No description provided\"}\n

\n ← Back to Home\n \n \n `);\n }\n\n if (!code) {\n return c.text(\"No authorization code received\", 400);\n }\n\n if (!TIKTOK_CLIENT_SECRET) {\n return c.text(\"TIKTOK_CLIENT_SECRET not configured\", 500);\n }\n\n try {\n // Exchange code for access token\n const baseUrl = getBaseUrl(c.req.raw);\n const redirectUri = `${baseUrl}/callback`;\n \n const tokenResponse = await fetch(\"https://open-api.tiktok.com/oauth/access_token/\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/x-www-form-urlencoded\",\n \"Cache-Control\": \"no-cache\"\n },\n body: new URLSearchParams({\n client_key: TIKTOK_CLIENT_ID!,\n client_secret: TIKTOK_CLIENT_SECRET,\n code: code,\n grant_type: \"authorization_code\",\n redirect_uri: redirectUri\n })\n });\n\n const tokenData = await tokenResponse.json();\n\n if (!tokenResponse.ok || tokenData.error) {\n throw new Error(`Token exchange failed: ${JSON.stringify(tokenData)}`);\n }\n\n // Get user info\n const userResponse = await fetch(`https://open-api.tiktok.com/user/info/?fields=open_id,union_id,avatar_url,display_name`, {\n headers: {\n \"Authorization\": `Bearer ${tokenData.access_token}`\n }\n });\n\n const userData = await userResponse.json();\n\n return c.html(`\n \n \n TikTok OAuth Success\n \n \n \n

🎉 TikTok OAuth Success!

\n ✅ Authentication Successful
\n Your TikTok account has been successfully connected!\n

\n \n ${userData.data ? `\n

👤 User Information

\n ${userData.data.avatar_url ? ` $\"Avatar\"$ ` : ''}\n

Display Name: ${userData.data.display_name || 'N/A'}

Open ID: ${userData.data.open_id || 'N/A'}

\n ` : ''}\n \n

📋 Raw Response Data

${JSON.stringify({ tokenData, userData }, null, 2)}

\n \n ← Back to Home\n

\n \n \n `);\n\n } catch (error) {\n return c.html(`\n \n \n TikTok OAuth Error\n \n \n \n

OAuth Processing Error

\n Error: ${error.message}\n

\n ← Back to Home\n \n \n `);\n }\n});\n\n// Error handling\napp.onError((err, c) => {\n console.error(\"Error:\", err);\n throw err;\n});\n\n// 404 handler\napp.all(\"*\", (c) => {\n return c.text(`Not found: ${c.req.path}`, 404);\n});\n\nexport default app.fetch;","deleted","label","children",[],[152],"files",[150],"counts",{"_174":32,"_175":100,"_176":32,"_177":178},"pulls","branches","forks","envVars",{"_179":32,"_180":32},"count","emptyCount","contents",[183],{"_103":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":100,"_158":159,"_105":184,"_99":32,"_161":162,"_163":164,"_165":22,"_166":-5,"_98":185},["D",1758285276670],[152],"file","upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_99":100,"_98":72,"_101":195,"_148":200,"_170":204,"_186":-7,"_181":205,"_208":-5,"_209":-5,"_210":-5,"_211":-5,"_212":213},{"_103":104,"_95":96,"_105":196,"_107":-5,"_108":22,"_109":110,"_111":112,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":197,"_132":198,"_135":199,"_147":22},["D",1758285237427],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_99":137,"_95":43,"_103":138,"_139":104,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[201],{"_103":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":100,"_158":159,"_105":160,"_99":32,"_161":162,"_163":164,"_165":22,"_166":-5,"_167":202,"_98":203},[],[152],[201],[206],{"_103":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":100,"_158":159,"_105":184,"_99":32,"_161":162,"_163":164,"_165":22,"_166":-5,"_98":207},[152],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

dcm31

tiktok_oauth_minimal