Prettier format pending files
This commit is contained in:
Builder.io
parent
3d3c9bb911
commit
51cddfdefa
4 changed files with 91 additions and 19 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -36,7 +36,9 @@ export default function Activity() {
|
|||
<p className="text-gray-300 mb-8 text-sm">{error}</p>
|
||||
|
||||
<div className="bg-gray-800 border border-gray-700 rounded-lg p-4 mb-6 text-left">
|
||||
<h3 className="text-white font-semibold mb-3">Troubleshooting Steps:</h3>
|
||||
<h3 className="text-white font-semibold mb-3">
|
||||
Troubleshooting Steps:
|
||||
</h3>
|
||||
<ol className="text-gray-400 text-sm space-y-2 list-decimal list-inside">
|
||||
<li>Clear your browser cache (Ctrl+Shift+Delete)</li>
|
||||
<li>Close Discord completely</li>
|
||||
|
|
@ -47,7 +49,10 @@ export default function Activity() {
|
|||
|
||||
<div className="bg-blue-900/20 border border-blue-700 rounded-lg p-3 mb-6">
|
||||
<p className="text-blue-300 text-xs">
|
||||
💡 Open browser console (F12) and look for messages starting with <code className="bg-blue-950 px-1 rounded">[Discord Activity]</code>
|
||||
💡 Open browser console (F12) and look for messages starting with{" "}
|
||||
<code className="bg-blue-950 px-1 rounded">
|
||||
[Discord Activity]
|
||||
</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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: <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
|
||||
|
|
|
|||
Loading…
Reference in a new issue