diff --git a/client/contexts/DiscordActivityContext.tsx b/client/contexts/DiscordActivityContext.tsx index 2de294eb..00118b9e 100644 --- a/client/contexts/DiscordActivityContext.tsx +++ b/client/contexts/DiscordActivityContext.tsx @@ -76,7 +76,10 @@ export const DiscordActivityProvider: React.FC< const clientId = import.meta.env.VITE_DISCORD_CLIENT_ID || "578971245454950421"; - console.log("[Discord Activity] Creating SDK with clientId:", clientId); + console.log( + "[Discord Activity] Creating SDK with clientId:", + clientId, + ); const sdk = new DiscordSDK({ clientId, @@ -91,7 +94,10 @@ export const DiscordActivityProvider: React.FC< // Get the current user from the SDK const currentUser = await sdk.user.getUser(); - console.log("[Discord Activity] Current user:", currentUser ? "exists" : "null"); + console.log( + "[Discord Activity] Current user:", + currentUser ? "exists" : "null", + ); if (!currentUser) { // User not authenticated, authorize them @@ -100,7 +106,9 @@ export const DiscordActivityProvider: React.FC< scopes: ["identify", "guilds"], }); - console.log("[Discord Activity] Got access token, calling activity-auth..."); + console.log( + "[Discord Activity] Got access token, calling activity-auth...", + ); // Exchange access token for user data via our proxy const response = await fetch("/api/discord/activity-auth", { method: "POST", @@ -125,12 +133,17 @@ export const DiscordActivityProvider: React.FC< setUser(data.user); setError(null); } else { - console.error("[Discord Activity] Authentication response invalid:", data); + console.error( + "[Discord Activity] Authentication response invalid:", + data, + ); setError("Authentication failed"); } } else { // User already authenticated, just fetch via our proxy - console.log("[Discord Activity] User already authenticated, fetching user data..."); + console.log( + "[Discord Activity] User already authenticated, fetching user data...", + ); const response = await fetch("/api/discord/activity-auth", { method: "POST", headers: { @@ -156,7 +169,10 @@ export const DiscordActivityProvider: React.FC< setUser(data.user); setError(null); } else { - console.error("[Discord Activity] User data response invalid:", data); + console.error( + "[Discord Activity] User data response invalid:", + data, + ); setError("Failed to load user data"); } } @@ -168,7 +184,7 @@ export const DiscordActivityProvider: React.FC< stack: err?.stack, }); setError( - `${err?.message || "Failed to initialize Discord Activity"}. Check browser console for details.` + `${err?.message || "Failed to initialize Discord Activity"}. Check browser console for details.`, ); } finally { setIsLoading(false); @@ -176,7 +192,7 @@ export const DiscordActivityProvider: React.FC< } else { // Not in a Discord iframe console.log( - "[Discord Activity] Not in Discord Activity context (no frame_id)" + "[Discord Activity] Not in Discord Activity context (no frame_id)", ); setIsActivity(false); setIsLoading(false); diff --git a/client/pages/Activity.tsx b/client/pages/Activity.tsx index 32ada1c2..2b8bb771 100644 --- a/client/pages/Activity.tsx +++ b/client/pages/Activity.tsx @@ -36,7 +36,9 @@ export default function Activity() {

{error}

-

Troubleshooting Steps:

+

+ Troubleshooting Steps: +

  1. Clear your browser cache (Ctrl+Shift+Delete)
  2. Close Discord completely
  3. @@ -47,7 +49,10 @@ export default function Activity() {

    - 💡 Open browser console (F12) and look for messages starting with [Discord Activity] + 💡 Open browser console (F12) and look for messages starting with{" "} + + [Discord Activity] +

    diff --git a/docs/DISCORD-ACTIVITY-TROUBLESHOOTING.md b/docs/DISCORD-ACTIVITY-TROUBLESHOOTING.md index e4156cb1..482a9dee 100644 --- a/docs/DISCORD-ACTIVITY-TROUBLESHOOTING.md +++ b/docs/DISCORD-ACTIVITY-TROUBLESHOOTING.md @@ -3,11 +3,13 @@ ## Error: 403 Forbidden on Directory API + X-Frame-Options Error ### Symptoms + - Discord Activity shows blank screen - Browser console shows: `GET https://discord.com/api/v9/application-directory-static/applications/578971245454950421?locale=en-US 403 (Forbidden)` - Browser console shows: `Refused to display 'https://578971245454950421.discordsays.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'` ### Root Causes + 1. **Activities feature not enabled** in Discord Developer Portal 2. **Activity URL not configured** in Discord Developer Portal 3. **Interactions Endpoint URL not set** or not responding correctly @@ -18,6 +20,7 @@ ## Solution: Step-by-Step Configuration ### Step 1: Enable Activities Feature + 1. Go to **[Discord Developer Portal](https://discord.com/developers/applications)** 2. Click on your app: **AeThex** (ID: `578971245454950421`) 3. Navigate to **General Information** tab @@ -27,6 +30,7 @@ - If Activities is already enabled, proceed to Step 2 ### Step 2: Configure Activity URL + 1. In **Activity Settings**, you should now see: - **Activity URL** field - Set it to: `https://aethex.dev/activity` @@ -38,9 +42,11 @@ 5. **Wait 1-2 minutes** for Discord to process the configuration ### Step 3: Verify Interactions Endpoint + Discord will test your Interactions Endpoint by sending a PING request. **Expected behavior:** + - You should see a green checkmark next to the Interactions Endpoint URL - If it fails, check: 1. Is `https://aethex.dev/api/discord/interactions` responding? @@ -48,6 +54,7 @@ Discord will test your Interactions Endpoint by sending a PING request. 3. Run this to test: `curl -X POST https://aethex.dev/api/discord/interactions -H "Content-Type: application/json" -d '{}'` ### Step 4: Check OAuth2 Settings + 1. Go to **OAuth2** → **General** 2. Verify **Client ID**: `578971245454950421` 3. Ensure **Client Secret** is populated @@ -57,6 +64,7 @@ Discord will test your Interactions Endpoint by sending a PING request. - ✅ `guilds` ### Step 5: Test the Activity + 1. Add your bot to a test Discord server: - Go to **OAuth2** → **URL Generator** - Select scopes: `bot`, `applications.commands` @@ -72,6 +80,7 @@ Discord will test your Interactions Endpoint by sending a PING request. ### Server-Side Checks #### 1. Verify Interactions Endpoint is Responding + ```bash # Test if endpoint is reachable curl -v https://aethex.dev/api/discord/interactions @@ -81,6 +90,7 @@ curl -v https://aethex.dev/api/discord/interactions ``` #### 2. Check DISCORD_PUBLIC_KEY is Set + ```bash # On your server/hosting platform, verify: echo $DISCORD_PUBLIC_KEY @@ -88,6 +98,7 @@ echo $DISCORD_PUBLIC_KEY ``` #### 3. Check X-Frame-Options Headers + ```bash # Verify the server is allowing iframe embedding curl -I https://aethex.dev/api/discord/interactions @@ -98,6 +109,7 @@ curl -I https://aethex.dev/api/discord/interactions ### Client-Side Checks #### 1. Open Browser Console (F12) + - Look for `[Discord Activity]` log messages - They should show: - `Initialization starting...` @@ -106,11 +118,13 @@ curl -I https://aethex.dev/api/discord/interactions - Either `Current user: exists` or `Authorizing user...` #### 2. Check frame_id Parameter + - When inside Discord Activity, the URL should contain `?frame_id=...` - If no `frame_id`, Discord hasn't launched the Activity properly - This usually means the Activity URL is misconfigured #### 3. Check Discord SDK Loading + - The Discord SDK should load from: `https://cdn.discordapp.com/assets/embedded/lazyload.min.js` - If this fails, check your CORS settings or ISP blocks @@ -119,35 +133,43 @@ curl -I https://aethex.dev/api/discord/interactions ## Common Issues & Solutions ### Issue 1: "Not in Discord Activity context (no frame_id)" + **Cause:** Discord is not launching the Activity with the required parameter **Solution:** + 1. Verify Activity URL is set to: `https://aethex.dev/activity` (exactly) 2. Wait 5 minutes for Discord to cache the configuration 3. Try again in Discord ### Issue 2: "Failed to initialize Discord Activity" + **Cause:** Discord SDK failed to initialize or authorize **Solution:** + 1. Check browser console for specific error message 2. Verify `VITE_DISCORD_CLIENT_ID=578971245454950421` is set 3. Ensure `identify` scope is selected in OAuth2 settings 4. Try opening Activity in an incognito window (clear cache) ### Issue 3: "X-Frame-Options: sameorigin" Error + **Cause:** Server is sending restrictive frame headers **Solution:** + 1. Verify `/api/discord/interactions` endpoint exists and is reachable 2. Check that `X-Frame-Options: ALLOWALL` is being set (line 159 of code/server/index.ts) 3. Check that `Access-Control-Allow-Origin: *` is being set 4. Restart the server to apply header changes ### Issue 4: 403 Forbidden on Directory API + **Cause:** Discord can't validate your app configuration **Solution:** + 1. Ensure Activities feature is fully enabled 2. Wait 10 minutes after changing any settings 3. Clear browser cache (Ctrl+Shift+Delete) @@ -159,12 +181,14 @@ curl -I https://aethex.dev/api/discord/interactions ## Testing Activity in Development ### Using Discord's Embedded Test + 1. Go to your app's Activity Settings 2. Click "Test Activity" or "Preview" button 3. Activity should open in a modal window 4. Check console (F12) for errors ### Using a Test Server + 1. Create a private Discord server 2. Add bot to the server 3. Right-click bot name → Apps → Select your activity diff --git a/docs/DISCORD-PORTAL-SETUP.md b/docs/DISCORD-PORTAL-SETUP.md index b7b4f6e2..b796d76c 100644 --- a/docs/DISCORD-PORTAL-SETUP.md +++ b/docs/DISCORD-PORTAL-SETUP.md @@ -1,6 +1,7 @@ # Discord Developer Portal Setup for AeThex Activity ## Quick Overview + This guide walks you through configuring your Discord app for Activities support. Your app ID is: **578971245454950421** --- @@ -8,11 +9,13 @@ This guide walks you through configuring your Discord app for Activities support ## Part 1: Enable Activities Feature ### Step 1.1: Open Discord Developer Portal + 1. Go to: https://discord.com/developers/applications 2. Find and click **"AeThex"** app in your applications list 3. You should be on the **General Information** tab ### Step 1.2: Locate and Enable Activities + 1. Scroll down on the **General Information** tab 2. Look for **"Activity Settings"** section 3. If you see "Enable Activities" button: @@ -21,19 +24,24 @@ This guide walks you through configuring your Discord app for Activities support 4. If Activities is already shown, proceed to Step 2 ### Step 1.3: Initial Configuration + In the Activity Settings section, you'll see these fields: **Activity URL:** + ``` https://aethex.dev/activity ``` -*(Copy and paste exactly)* + +_(Copy and paste exactly)_ **Interactions Endpoint URL:** + ``` https://aethex.dev/api/discord/interactions ``` -*(Copy and paste exactly)* + +_(Copy and paste exactly)_ **Click "Save"** and wait 1-2 minutes for Discord to verify @@ -42,17 +50,21 @@ https://aethex.dev/api/discord/interactions ## Part 2: Configure Interactions Endpoint ### Step 2.1: Wait for Discord Verification + After you save in Step 1.3, Discord will automatically send a test request to your Interactions Endpoint. **Expected result:** Green checkmark appears next to the Interactions Endpoint URL **If you see an error:** + 1. Wait 30 seconds 2. Click "Save" again 3. Discord will retry the verification ### Step 2.2: What Discord is Testing + Discord sends a PING request like this: + ``` POST https://aethex.dev/api/discord/interactions Content-Type: application/json @@ -66,6 +78,7 @@ X-Signature-Timestamp: ``` Your server should respond with: + ```json { "type": 1 @@ -79,18 +92,22 @@ This is already implemented in your `code/server/index.ts` file (lines 57-60). ## Part 3: OAuth2 Configuration ### Step 3.1: Go to OAuth2 Settings + 1. Click **"OAuth2"** in the left sidebar 2. Click **"General"** sub-tab ### Step 3.2: Verify Client Credentials + You should see: **Client ID:** + ``` 578971245454950421 ``` **Client Secret:** + ``` JKlilGzcTWgfmt2wEqiHO8wpCel5VEji ``` @@ -98,6 +115,7 @@ JKlilGzcTWgfmt2wEqiHO8wpCel5VEji If the Client Secret is hidden, click "Reset Secret" (you'll need to update your environment variables after this). ### Step 3.3: Add Redirect URIs + 1. Scroll to **"Redirects"** section 2. Add these redirect URIs: - `https://aethex.dev/callback` @@ -106,6 +124,7 @@ If the Client Secret is hidden, click "Reset Secret" (you'll need to update your 3. Click **"Save Changes"** ### Step 3.4: Configure Scopes + 1. Click **"Scopes"** sub-tab in OAuth2 section 2. For Activities, select at minimum: - ✅ `identify` (read user profile info) @@ -119,6 +138,7 @@ If the Client Secret is hidden, click "Reset Secret" (you'll need to update your ## Part 4: Bot Configuration ### Step 4.1: Go to Bot Settings + 1. Click **"Bot"** in the left sidebar 2. Look for **"TOKEN"** section 3. You should see: @@ -127,6 +147,7 @@ If the Client Secret is hidden, click "Reset Secret" (you'll need to update your ``` ### Step 4.2: Verify Public Key + 1. In the same Bot section, look for **"PUBLIC KEY"** 2. Should be: ``` @@ -134,6 +155,7 @@ If the Client Secret is hidden, click "Reset Secret" (you'll need to update your ``` ### Step 4.3: Ensure Bot Has Required Permissions + 1. Scroll to **"Token Permissions"** or **"Scopes"** 2. Make sure bot has: - ✅ `applications.commands` (for slash commands) @@ -165,6 +187,7 @@ VITE_DISCORD_CLIENT_ID=578971245454950421 ## Part 6: Test the Activity ### Step 6.1: Add Bot to Test Server + 1. Go to **"OAuth2"** → **"URL Generator"** in your app settings 2. Under **"Scopes"**, select: - `bot` @@ -176,17 +199,20 @@ VITE_DISCORD_CLIENT_ID=578971245454950421 5. Select a test Discord server to add the bot to ### Step 6.2: Launch the Activity + 1. Go to your test Discord server 2. Right-click the bot's name (AeThex) 3. Select **"Apps"** → **"AeThex"** (or just "AeThex Activity") 4. The Activity modal should open ### Step 6.3: Debug + 1. Open browser developer console: **F12** 2. Look for messages starting with `[Discord Activity]` 3. These logs will tell you exactly what's happening **Expected log sequence:** + ``` [Discord Activity] Initialization starting... {frameId: "...", isInDiscordActivity: true, ...} [Discord Activity] Creating SDK with clientId: 578971245454950421 @@ -201,13 +227,13 @@ VITE_DISCORD_CLIENT_ID=578971245454950421 ## Troubleshooting Quick Links -| Error | Solution | -|-------|----------| -| 403 Forbidden from Discord API | Activities may not be enabled. See Part 1 Step 1.2 | -| X-Frame-Options: sameorigin | Clear cache and try again. See Part 6 Step 6.3 | -| "Not in Discord Activity context" | Activity URL may be wrong. Check Part 1 Step 1.3 | -| SDK initialization failed | Check VITE_DISCORD_CLIENT_ID in environment. See Part 5 | -| Interactions endpoint failed | Endpoint URL must be exact. Check Part 2 Step 2.1 | +| Error | Solution | +| --------------------------------- | ------------------------------------------------------- | +| 403 Forbidden from Discord API | Activities may not be enabled. See Part 1 Step 1.2 | +| X-Frame-Options: sameorigin | Clear cache and try again. See Part 6 Step 6.3 | +| "Not in Discord Activity context" | Activity URL may be wrong. Check Part 1 Step 1.3 | +| SDK initialization failed | Check VITE_DISCORD_CLIENT_ID in environment. See Part 5 | +| Interactions endpoint failed | Endpoint URL must be exact. Check Part 2 Step 2.1 | --- @@ -239,6 +265,7 @@ Use this before contacting support: ## Support For issues with: + - **Discord API/Portal**: Contact Discord Support (https://support.discord.com) - **AeThex Activity Code**: Check this repo's issues or documentation - **Hosting/Deployment**: Check your hosting platform's documentation