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",[98],"permalink","https://www.val.town/x/dcm31/tiktok_oauth_minimal/code/index.ts","extension","actionData","errors"]