TikTok OAuth Minimal Implementation
A minimal TikTok OAuth implementation built on Val Town using Hono.
- ✅ Complete OAuth 2.0 flow for TikTok
- ✅ Clean, responsive UI with TikTok-inspired styling
- ✅ Error handling for common OAuth scenarios
- ✅ User profile information display
- ✅ Environment variable configuration
- ✅ Production-ready redirect handling
1. Create TikTok Developer App
- Go to TikTok Developers
- Create a new app
- Note down your Client ID and Client Secret
In your Val Town project settings, add these environment variables:
TIKTOK_CLIENT_ID - Your TikTok app's Client ID
TIKTOK_CLIENT_SECRET - Your TikTok app's Client Secret
In your TikTok app settings, set the redirect URI to:
https://dcm31--[your-val-id].web.val.run/callback
The exact URL will be displayed when you first visit the app.
/ - Home page with login button
/auth - Initiates OAuth flow (redirects to TikTok)
/callback - Handles OAuth callback from TikTok
- User clicks "Login with TikTok" on the home page
- User is redirected to TikTok's authorization page
- User grants permissions to the app
- TikTok redirects back to
/callback with authorization code
- App exchanges code for access token
- App retrieves user profile information
- Success page displays user info and token data
user.info.basic - Basic user information
user.info.profile - User profile information (display name, avatar)
- Uses secure HTTPS redirects
- State parameter included for CSRF protection (currently static for demo)
- Sensitive credentials stored as environment variables
- Error handling prevents information leakage
The app is designed to be minimal but can be extended with:
- Database storage for user sessions
- Additional TikTok API scopes
- Proper state management with random tokens
- Session handling and logout functionality
Visit the deployed app at: https://dcm31--00d3ac66955511f0afa60224a6c84d84.web.val.run