7.1 KiB
Discord Activity SPA Compliance Checklist
This checklist ensures your Discord Activity meets Discord's Single-Page Application (SPA) requirements.
✅ Code Compliance
Activity Component (code/client/pages/Activity.tsx)
-
No React Router Navigation
- No
useNavigate()hook - No
navigate()calls - No
<Link to="...">components
- No
-
No Internal Page Navigation
- All internal navigation removed
- Routes like
/creators,/opportunities,/settingsdon't exist in Activity - If accessing main app features, use
window.open(url, "_blank")
-
Proper Error Handling
- Graceful error state display
- Loading state handled properly
- "Not in Discord" state shows helpful message instead of crashing
-
PostMessage Communication
- Activity uses Discord SDK (DiscordActivityContext)
- SDK handles all Discord communication
- No direct iframe communication attempted
Manifest Configuration (code/public/discord-manifest.json)
-
Discord Proxy Domain Only
rpc_originscontains ONLY:"https://578971245454950421.discordsays.com"- No external domains listed
- No
aethex.devin rpc_origins
-
Valid JSON Structure
idmatches Discord app ID:"578971245454950421"versionis set:"1"namedescribes the Activitydescriptionexplains Activity purpose
-
No External Interactions Configured
- If
interactionspresent, URL points to Discord proxy domain - No external API endpoints in manifest
- If
Context/SDK Setup (code/client/contexts/DiscordActivityContext.tsx)
-
Proper SDK Initialization
- SDK imported:
@discord/embedded-app-sdk DiscordSDKinstantiated with client IDsdk.ready()awaited before using SDKsdk.authenticate()called after ready
- SDK imported:
-
Correct OAuth Flow
- Uses
sdk.commands.authorize()for OAuth - Exchanges code for token via
/api/discord/activity-auth - Token used to authenticate with SDK
- User data fetched after authentication
- Uses
-
Proper Error Handling
- Errors logged with
[Discord Activity]prefix - User-friendly error messages displayed
- No silent failures
- Console logs helpful for debugging
- Errors logged with
✅ Navigation Compliance
Link Handling
-
All External Links Use window.open()
// ✅ CORRECT <button onClick={() => window.open(url, "_blank")}> // ❌ WRONG <a href={url}> <Link to={url}> navigate(url) -
All Buttons Have Clear Intent
- "View Profile" → Opens profile in new window
- "Browse Creators" → Opens main app in new window
- "Settings" → Opens settings in new window
-
No Hidden Navigation
- No
useEffectthat navigates - No programmatic routing
- No redirects outside Activity
- No
✅ Data Handling
User Data
-
Data Fetched from Backend
- Uses
/api/discord/activity-authendpoint - Passes access token from SDK
- Displays cached/static data, not real-time
- Handles missing data gracefully
- Uses
-
No Data Mutations in Activity
- Profile updates happen in main app
- Settings changes happen in main app
- Activity is read-only display layer
✅ Deployment & Testing
Pre-Deployment
-
Build Succeeds
npm run build # Should produce no errors about Activity -
Dev Server Works
npm run dev # Activity loads without console errors -
No External Resource Issues
- All images load correctly
- No "blocked by CSP" errors
- No CORS errors in console
Post-Deployment
-
Manifest Served Correctly
https://aethex.dev/discord-manifest.jsonreturns valid JSON- Content-Type is
application/json - No 404 errors
-
Activity Loads in Discord
- Can launch from Discord
- No loading stuck state
- User profile displays
- Buttons work correctly
-
Console Logs Clear
- No errors prefixed with
[Discord Activity] - Helpful debug logs present
- No React warnings about navigation
- No errors prefixed with
✅ Advanced Compliance
URL Mappings (If Needed)
- External Resources Have Mappings
- Add to manifest if using external APIs
- Format:
"/api/external": "https://api.example.com" - Test that requests go through Discord proxy
Cookie Handling (If Needed)
- Cookies Use Correct Domain
- Domain:
578971245454950421.discordsays.com SameSite=Noneflag setPartitionedflag set (if supporting third-party cookies)
- Domain:
Security
- No Sensitive Data in Activity
- Don't store auth tokens in Activity
- Don't expose API keys
- Use backend proxy for secure operations
🔍 Verification Steps
Step 1: Code Review
# Check Activity component
grep -n "navigate\|useNavigate\|<Link\|href=" code/client/pages/Activity.tsx
# Check for router imports
grep -n "react-router" code/client/pages/Activity.tsx
# Result: Should find NO matches (except in comments)
Step 2: Manifest Validation
# Check manifest domains
cat code/public/discord-manifest.json
# Should only show Discord proxy domain in rpc_origins
Step 3: Runtime Testing
- Launch Activity in Discord
- Open DevTools (F12)
- Check console for
[Discord Activity]logs - Verify no errors about navigation/routing
- Click buttons and verify they open in new windows
- Reload Activity - should re-initialize properly
Step 4: Cross-Origin Testing
- In Discord DevTools:
- Go to Console tab
- Look for CORS errors
- Should see ZERO CORS errors
- If errors found:
- Check manifest rpc_origins
- Verify API endpoints are accessed through Discord proxy
Common Issues & Fixes
| Issue | Cause | Fix |
|---|---|---|
| Activity won't load | Missing frame_id in URL | Check you're in Discord iframe |
| "Cannot find module 'react-router'" | Router still imported | Remove router imports |
| Links navigate within Activity | Using href or navigate() |
Change to window.open(..., "_blank") |
| User data doesn't load | /api/discord/activity-auth failing |
Check SDK authentication success |
| CORS errors in console | External domains in rpc_origins | Remove from manifest, use Discord proxy |
| Manifest 404 error | File not in public directory | Move to code/public/discord-manifest.json |
Certification Summary
When all items are checked, your Activity is:
✅ Discord SPA Compliant - Follows all official Discord Activity requirements ✅ Properly Isolated - Runs in sandbox without breaking iframe ✅ Correctly Configured - Manifest and SDK setup are proper ✅ Ready for Production - Can be deployed safely
References
- Discord Activities Overview: https://discord.com/developers/docs/activities/overview
- SDK Reference: https://discord.com/developers/docs/activities/sdk-reference
- Best Practices: https://discord.com/developers/docs/activities/security