Prettier format pending files

This commit is contained in:
Builder.io 2025-11-10 01:17:20 +00:00
parent 5ce8cbf15d
commit 14313a08bf
7 changed files with 173 additions and 64 deletions

View file

@ -84,7 +84,8 @@ export default function Activity() {
🎮 Discord Activity 🎮 Discord Activity
</h1> </h1>
<p className="text-gray-300 mb-8"> <p className="text-gray-300 mb-8">
This page is designed to run as a Discord Activity. Open it within Discord to get started! This page is designed to run as a Discord Activity. Open it within
Discord to get started!
</p> </p>
<p className="text-gray-500 text-sm"> <p className="text-gray-500 text-sm">
Not in Discord? Visit the main app at{" "} Not in Discord? Visit the main app at{" "}
@ -135,7 +136,8 @@ export default function Activity() {
<div className="bg-blue-900/20 border border-blue-700 rounded-lg p-3 mb-6"> <div className="bg-blue-900/20 border border-blue-700 rounded-lg p-3 mb-6">
<p className="text-blue-300 text-xs"> <p className="text-blue-300 text-xs">
💡 Open Discord DevTools (Ctrl+Shift+I) and check the console for messages starting with{" "} 💡 Open Discord DevTools (Ctrl+Shift+I) and check the console for
messages starting with{" "}
<code className="bg-blue-950 px-1 rounded"> <code className="bg-blue-950 px-1 rounded">
[Discord Activity] [Discord Activity]
</code> </code>
@ -204,7 +206,9 @@ export default function Activity() {
realm-specific features. realm-specific features.
</p> </p>
<button <button
onClick={() => window.open(`${appBaseUrl}/profile/settings`, "_blank")} onClick={() =>
window.open(`${appBaseUrl}/profile/settings`, "_blank")
}
className="mt-4 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors" className="mt-4 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors"
> >
Change Realm Change Realm
@ -224,13 +228,17 @@ export default function Activity() {
🎨 Browse Creators 🎨 Browse Creators
</button> </button>
<button <button
onClick={() => window.open(`${appBaseUrl}/opportunities`, "_blank")} onClick={() =>
window.open(`${appBaseUrl}/opportunities`, "_blank")
}
className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors font-medium" className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors font-medium"
> >
💼 Find Opportunities 💼 Find Opportunities
</button> </button>
<button <button
onClick={() => window.open(`${appBaseUrl}/profile/settings`, "_blank")} onClick={() =>
window.open(`${appBaseUrl}/profile/settings`, "_blank")
}
className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors font-medium" className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors font-medium"
> >
Settings Settings
@ -241,9 +249,17 @@ export default function Activity() {
<div className="bg-blue-900/20 border border-blue-700 rounded-lg p-4"> <div className="bg-blue-900/20 border border-blue-700 rounded-lg p-4">
<p className="text-blue-100 text-sm"> <p className="text-blue-100 text-sm">
💡 <strong>Discord Commands:</strong> Use{" "} 💡 <strong>Discord Commands:</strong> Use{" "}
<code className="bg-blue-950 px-2 py-1 rounded text-xs">/profile</code>,{" "} <code className="bg-blue-950 px-2 py-1 rounded text-xs">
<code className="bg-blue-950 px-2 py-1 rounded text-xs">/set-realm</code>, and{" "} /profile
<code className="bg-blue-950 px-2 py-1 rounded text-xs">/verify-role</code>{" "} </code>
,{" "}
<code className="bg-blue-950 px-2 py-1 rounded text-xs">
/set-realm
</code>
, and{" "}
<code className="bg-blue-950 px-2 py-1 rounded text-xs">
/verify-role
</code>{" "}
to manage your account directly in Discord. to manage your account directly in Discord.
</p> </p>
</div> </div>

View file

@ -7,16 +7,19 @@ This checklist ensures your Discord Activity meets Discord's Single-Page Applica
### Activity Component (code/client/pages/Activity.tsx) ### Activity Component (code/client/pages/Activity.tsx)
- [ ] **No React Router Navigation** - [ ] **No React Router Navigation**
- [ ] No `useNavigate()` hook - [ ] No `useNavigate()` hook
- [ ] No `navigate()` calls - [ ] No `navigate()` calls
- [ ] No `<Link to="...">` components - [ ] No `<Link to="...">` components
- [ ] **No Internal Page Navigation** - [ ] **No Internal Page Navigation**
- [ ] All internal navigation removed - [ ] All internal navigation removed
- [ ] Routes like `/creators`, `/opportunities`, `/settings` don't exist in Activity - [ ] Routes like `/creators`, `/opportunities`, `/settings` don't exist in Activity
- [ ] If accessing main app features, use `window.open(url, "_blank")` - [ ] If accessing main app features, use `window.open(url, "_blank")`
- [ ] **Proper Error Handling** - [ ] **Proper Error Handling**
- [ ] Graceful error state display - [ ] Graceful error state display
- [ ] Loading state handled properly - [ ] Loading state handled properly
- [ ] "Not in Discord" state shows helpful message instead of crashing - [ ] "Not in Discord" state shows helpful message instead of crashing
@ -29,11 +32,13 @@ This checklist ensures your Discord Activity meets Discord's Single-Page Applica
### Manifest Configuration (code/public/discord-manifest.json) ### Manifest Configuration (code/public/discord-manifest.json)
- [ ] **Discord Proxy Domain Only** - [ ] **Discord Proxy Domain Only**
- [ ] `rpc_origins` contains ONLY: `"https://578971245454950421.discordsays.com"` - [ ] `rpc_origins` contains ONLY: `"https://578971245454950421.discordsays.com"`
- [ ] No external domains listed - [ ] No external domains listed
- [ ] No `aethex.dev` in rpc_origins - [ ] No `aethex.dev` in rpc_origins
- [ ] **Valid JSON Structure** - [ ] **Valid JSON Structure**
- [ ] `id` matches Discord app ID: `"578971245454950421"` - [ ] `id` matches Discord app ID: `"578971245454950421"`
- [ ] `version` is set: `"1"` - [ ] `version` is set: `"1"`
- [ ] `name` describes the Activity - [ ] `name` describes the Activity
@ -46,12 +51,14 @@ This checklist ensures your Discord Activity meets Discord's Single-Page Applica
### Context/SDK Setup (code/client/contexts/DiscordActivityContext.tsx) ### Context/SDK Setup (code/client/contexts/DiscordActivityContext.tsx)
- [ ] **Proper SDK Initialization** - [ ] **Proper SDK Initialization**
- [ ] SDK imported: `@discord/embedded-app-sdk` - [ ] SDK imported: `@discord/embedded-app-sdk`
- [ ] `DiscordSDK` instantiated with client ID - [ ] `DiscordSDK` instantiated with client ID
- [ ] `sdk.ready()` awaited before using SDK - [ ] `sdk.ready()` awaited before using SDK
- [ ] `sdk.authenticate()` called after ready - [ ] `sdk.authenticate()` called after ready
- [ ] **Correct OAuth Flow** - [ ] **Correct OAuth Flow**
- [ ] Uses `sdk.commands.authorize()` for OAuth - [ ] Uses `sdk.commands.authorize()` for OAuth
- [ ] Exchanges code for token via `/api/discord/activity-auth` - [ ] Exchanges code for token via `/api/discord/activity-auth`
- [ ] Token used to authenticate with SDK - [ ] Token used to authenticate with SDK
@ -68,10 +75,11 @@ This checklist ensures your Discord Activity meets Discord's Single-Page Applica
### Link Handling ### Link Handling
- [ ] **All External Links Use window.open()** - [ ] **All External Links Use window.open()**
```typescript ```typescript
// ✅ CORRECT // ✅ CORRECT
<button onClick={() => window.open(url, "_blank")}> <button onClick={() => window.open(url, "_blank")}>
// ❌ WRONG // ❌ WRONG
<a href={url}> <a href={url}>
<Link to={url}> <Link to={url}>
@ -79,6 +87,7 @@ This checklist ensures your Discord Activity meets Discord's Single-Page Applica
``` ```
- [ ] **All Buttons Have Clear Intent** - [ ] **All Buttons Have Clear Intent**
- [ ] "View Profile" → Opens profile in new window - [ ] "View Profile" → Opens profile in new window
- [ ] "Browse Creators" → Opens main app in new window - [ ] "Browse Creators" → Opens main app in new window
- [ ] "Settings" → Opens settings in new window - [ ] "Settings" → Opens settings in new window
@ -93,6 +102,7 @@ This checklist ensures your Discord Activity meets Discord's Single-Page Applica
### User Data ### User Data
- [ ] **Data Fetched from Backend** - [ ] **Data Fetched from Backend**
- [ ] Uses `/api/discord/activity-auth` endpoint - [ ] Uses `/api/discord/activity-auth` endpoint
- [ ] Passes access token from SDK - [ ] Passes access token from SDK
- [ ] Displays cached/static data, not real-time - [ ] Displays cached/static data, not real-time
@ -108,12 +118,14 @@ This checklist ensures your Discord Activity meets Discord's Single-Page Applica
### Pre-Deployment ### Pre-Deployment
- [ ] **Build Succeeds** - [ ] **Build Succeeds**
```bash ```bash
npm run build npm run build
# Should produce no errors about Activity # Should produce no errors about Activity
``` ```
- [ ] **Dev Server Works** - [ ] **Dev Server Works**
```bash ```bash
npm run dev npm run dev
# Activity loads without console errors # Activity loads without console errors
@ -127,11 +139,13 @@ This checklist ensures your Discord Activity meets Discord's Single-Page Applica
### Post-Deployment ### Post-Deployment
- [ ] **Manifest Served Correctly** - [ ] **Manifest Served Correctly**
- [ ] `https://aethex.dev/discord-manifest.json` returns valid JSON - [ ] `https://aethex.dev/discord-manifest.json` returns valid JSON
- [ ] Content-Type is `application/json` - [ ] Content-Type is `application/json`
- [ ] No 404 errors - [ ] No 404 errors
- [ ] **Activity Loads in Discord** - [ ] **Activity Loads in Discord**
- [ ] Can launch from Discord - [ ] Can launch from Discord
- [ ] No loading stuck state - [ ] No loading stuck state
- [ ] User profile displays - [ ] User profile displays
@ -168,6 +182,7 @@ This checklist ensures your Discord Activity meets Discord's Single-Page Applica
## 🔍 Verification Steps ## 🔍 Verification Steps
### Step 1: Code Review ### Step 1: Code Review
```bash ```bash
# Check Activity component # Check Activity component
grep -n "navigate\|useNavigate\|<Link\|href=" code/client/pages/Activity.tsx grep -n "navigate\|useNavigate\|<Link\|href=" code/client/pages/Activity.tsx
@ -179,6 +194,7 @@ grep -n "react-router" code/client/pages/Activity.tsx
``` ```
### Step 2: Manifest Validation ### Step 2: Manifest Validation
```bash ```bash
# Check manifest domains # Check manifest domains
cat code/public/discord-manifest.json cat code/public/discord-manifest.json
@ -187,6 +203,7 @@ cat code/public/discord-manifest.json
``` ```
### Step 3: Runtime Testing ### Step 3: Runtime Testing
1. Launch Activity in Discord 1. Launch Activity in Discord
2. Open DevTools (F12) 2. Open DevTools (F12)
3. Check console for `[Discord Activity]` logs 3. Check console for `[Discord Activity]` logs
@ -195,6 +212,7 @@ cat code/public/discord-manifest.json
6. Reload Activity - should re-initialize properly 6. Reload Activity - should re-initialize properly
### Step 4: Cross-Origin Testing ### Step 4: Cross-Origin Testing
1. In Discord DevTools: 1. In Discord DevTools:
- Go to Console tab - Go to Console tab
- Look for CORS errors - Look for CORS errors
@ -205,14 +223,14 @@ cat code/public/discord-manifest.json
## Common Issues & Fixes ## Common Issues & Fixes
| Issue | Cause | Fix | | Issue | Cause | Fix |
|-------|-------|-----| | ----------------------------------- | ------------------------------------ | ------------------------------------------- |
| Activity won't load | Missing frame_id in URL | Check you're in Discord iframe | | 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 | | "Cannot find module 'react-router'" | Router still imported | Remove router imports |
| Links navigate within Activity | Using `href` or `navigate()` | Change to `window.open(..., "_blank")` | | 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 | | 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 | | 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` | | Manifest 404 error | File not in public directory | Move to `code/public/discord-manifest.json` |
## Certification Summary ## Certification Summary

View file

@ -26,15 +26,18 @@ Discord Client
## Key Changes from Previous Implementation ## Key Changes from Previous Implementation
### 1. **Removed Router Navigation** ### 1. **Removed Router Navigation**
- **Before:** Activity used `useNavigate()` to redirect within React Router - **Before:** Activity used `useNavigate()` to redirect within React Router
- **After:** Activity is completely self-contained, no internal navigation - **After:** Activity is completely self-contained, no internal navigation
### 2. **Links Now Open in New Windows** ### 2. **Links Now Open in New Windows**
- **Before:** `<a href="/creators">` navigated within the iframe - **Before:** `<a href="/creators">` navigated within the iframe
- **After:** `<button onClick={() => window.open(url, "_blank")}>` opens the main app in a new tab - **After:** `<button onClick={() => window.open(url, "_blank")}>` opens the main app in a new tab
- This allows users to see full features without breaking Activity isolation - This allows users to see full features without breaking Activity isolation
### 3. **Simplified Manifest** ### 3. **Simplified Manifest**
- **Before:** Manifest referenced multiple domains including aethex.dev - **Before:** Manifest referenced multiple domains including aethex.dev
- **After:** Manifest ONLY references Discord proxy domain (`578971245454950421.discordsays.com`) - **After:** Manifest ONLY references Discord proxy domain (`578971245454950421.discordsays.com`)
- This ensures Activity is properly sandboxed through Discord's proxy - This ensures Activity is properly sandboxed through Discord's proxy
@ -44,6 +47,7 @@ Discord Client
### code/client/pages/Activity.tsx ### code/client/pages/Activity.tsx
**Removed:** **Removed:**
```typescript ```typescript
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
const navigate = useNavigate(); const navigate = useNavigate();
@ -55,6 +59,7 @@ useEffect(() => {
``` ```
**Added:** **Added:**
```typescript ```typescript
import { useState } from "react"; import { useState } from "react";
const [showContent, setShowContent] = useState(false); const [showContent, setShowContent] = useState(false);
@ -67,6 +72,7 @@ useEffect(() => {
``` ```
**Link Changes:** **Link Changes:**
```typescript ```typescript
// Before: // Before:
<a href="/creators" className="...">🎨 Browse Creators</a> <a href="/creators" className="...">🎨 Browse Creators</a>
@ -83,6 +89,7 @@ useEffect(() => {
### code/public/discord-manifest.json ### code/public/discord-manifest.json
**Before:** **Before:**
```json ```json
{ {
"rpc_origins": [ "rpc_origins": [
@ -98,11 +105,10 @@ useEffect(() => {
``` ```
**After:** **After:**
```json ```json
{ {
"rpc_origins": [ "rpc_origins": ["https://578971245454950421.discordsays.com"]
"https://578971245454950421.discordsays.com"
]
} }
``` ```
@ -134,11 +140,13 @@ useEffect(() => {
### Local Testing ### Local Testing
1. Start the dev server: 1. Start the dev server:
```bash ```bash
npm run dev npm run dev
``` ```
2. Open Discord and find an Activity that can be launched 2. Open Discord and find an Activity that can be launched
- Right-click on a voice channel - Right-click on a voice channel
- Select "Launch Activity" - Select "Launch Activity"
- Look for "AeThex Activity" - Look for "AeThex Activity"
@ -152,6 +160,7 @@ useEffect(() => {
### Deployment Testing ### Deployment Testing
1. After deploying to production: 1. After deploying to production:
```bash ```bash
npm run build npm run build
npm start npm start
@ -169,10 +178,13 @@ If you want to add more features to the Activity without breaking isolation, use
```typescript ```typescript
// Activity sends message to parent window (if applicable) // Activity sends message to parent window (if applicable)
if (window.opener) { if (window.opener) {
window.opener.postMessage({ window.opener.postMessage(
type: 'navigate', {
path: '/opportunities' type: "navigate",
}, 'https://aethex.dev'); path: "/opportunities",
},
"https://aethex.dev",
);
} }
``` ```
@ -185,9 +197,7 @@ If Activity needs to access external APIs, update the manifest:
"interactions": { "interactions": {
"request_url": "https://aethex.dev/api/discord/interactions" "request_url": "https://aethex.dev/api/discord/interactions"
}, },
"rpc_origins": [ "rpc_origins": ["https://578971245454950421.discordsays.com"],
"https://578971245454950421.discordsays.com"
],
"url_mapping": { "url_mapping": {
"/api/external": "https://api.external-service.com", "/api/external": "https://api.external-service.com",
"/uploads": "https://cdn.aethex.dev/uploads" "/uploads": "https://cdn.aethex.dev/uploads"
@ -196,8 +206,9 @@ If Activity needs to access external APIs, update the manifest:
``` ```
Then in code, use relative paths: Then in code, use relative paths:
```typescript ```typescript
fetch('/api/external/data') // Discord proxy transforms to https://api.external-service.com/data fetch("/api/external/data"); // Discord proxy transforms to https://api.external-service.com/data
``` ```
## Troubleshooting ## Troubleshooting
@ -211,7 +222,7 @@ fetch('/api/external/data') // Discord proxy transforms to https://api.external-
### Links Not Working ### Links Not Working
1. **Ensure target="_blank" or window.open()** - Regular navigation breaks Activity 1. **Ensure target="\_blank" or window.open()** - Regular navigation breaks Activity
2. **Check URL construction** - Verify full URL is correct 2. **Check URL construction** - Verify full URL is correct
3. **Test in separate browser tab** - Verify links work outside Activity 3. **Test in separate browser tab** - Verify links work outside Activity
@ -229,7 +240,7 @@ fetch('/api/external/data') // Discord proxy transforms to https://api.external-
- [ ] Backend OAuth endpoints configured (/api/discord/activity-auth) - [ ] Backend OAuth endpoints configured (/api/discord/activity-auth)
- [ ] Discord Developer Portal has manifest URL configured - [ ] Discord Developer Portal has manifest URL configured
- [ ] Test server has AeThex bot installed - [ ] Test server has AeThex bot installed
- [ ] All links use window.open() with "_blank" target - [ ] All links use window.open() with "\_blank" target
- [ ] No React Router navigation in Activity component - [ ] No React Router navigation in Activity component
## Related Documentation ## Related Documentation

View file

@ -13,12 +13,14 @@ All Discord linking flow issues have been identified and fixed. This document su
**File:** `code/client/pages/DiscordVerify.tsx` (Line 91-93) **File:** `code/client/pages/DiscordVerify.tsx` (Line 91-93)
**What was broken:** **What was broken:**
- After `/verify` command in Discord, user clicks link - After `/verify` command in Discord, user clicks link
- Code auto-submits successfully - Code auto-submits successfully
- BUT redirected to `/profile/settings` (wrong page) - BUT redirected to `/profile/settings` (wrong page)
- User can't see Discord in connections list - User can't see Discord in connections list
**What was fixed:** **What was fixed:**
```typescript ```typescript
// BEFORE // BEFORE
setTimeout(() => { setTimeout(() => {
@ -40,6 +42,7 @@ setTimeout(() => {
**File:** `code/client/pages/DiscordVerify.tsx` (Lines 160, 228) **File:** `code/client/pages/DiscordVerify.tsx` (Lines 160, 228)
**What was broken:** **What was broken:**
- "Go to Settings" button on success screen → `/profile/settings` - "Go to Settings" button on success screen → `/profile/settings`
- "Cancel" button on input screen → `/profile/settings` - "Cancel" button on input screen → `/profile/settings`
- Both sent users to wrong location - Both sent users to wrong location
@ -47,6 +50,7 @@ setTimeout(() => {
**What was fixed:** **What was fixed:**
Button 1 (Line 160): Button 1 (Line 160):
```typescript ```typescript
// BEFORE // BEFORE
onClick={() => navigate("/profile/settings")} onClick={() => navigate("/profile/settings")}
@ -56,6 +60,7 @@ onClick={() => navigate("/dashboard?tab=connections")}
``` ```
Button 2 (Line 228): Button 2 (Line 228):
```typescript ```typescript
// BEFORE // BEFORE
onClick={() => navigate("/profile/settings")} onClick={() => navigate("/profile/settings")}
@ -73,11 +78,13 @@ onClick={() => navigate("/dashboard")}
**File:** `code/api/discord/oauth/callback.ts` (Lines 105-113) **File:** `code/api/discord/oauth/callback.ts` (Lines 105-113)
**What was broken:** **What was broken:**
- When session lost, error message was generic: "Please sign in before linking Discord" - When session lost, error message was generic: "Please sign in before linking Discord"
- No diagnostic information to help debug - No diagnostic information to help debug
- Users didn't know what went wrong - Users didn't know what went wrong
**What was fixed:** **What was fixed:**
```typescript ```typescript
// BEFORE // BEFORE
console.error("[Discord OAuth] Linking flow but no authenticated user found"); console.error("[Discord OAuth] Linking flow but no authenticated user found");
@ -86,9 +93,16 @@ return res.redirect(
); );
// AFTER // AFTER
console.error("[Discord OAuth] Linking flow but no authenticated user found - session cookies not present in request"); console.error(
console.error("[Discord OAuth] DIAGNOSTIC: Ensure Discord Dev Portal OAuth2 Redirects includes:", "https://aethex.dev/api/discord/oauth/callback"); "[Discord OAuth] Linking flow but no authenticated user found - session cookies not present in request",
console.error("[Discord OAuth] If using custom domain, update the redirect URI accordingly"); );
console.error(
"[Discord OAuth] DIAGNOSTIC: Ensure Discord Dev Portal OAuth2 Redirects includes:",
"https://aethex.dev/api/discord/oauth/callback",
);
console.error(
"[Discord OAuth] If using custom domain, update the redirect URI accordingly",
);
return res.redirect( return res.redirect(
`/login?error=session_lost&message=${encodeURIComponent("Your session was lost. Please sign in again and try linking Discord.")}`, `/login?error=session_lost&message=${encodeURIComponent("Your session was lost. Please sign in again and try linking Discord.")}`,
); );
@ -103,6 +117,7 @@ return res.redirect(
### Session Loss During Dashboard OAuth Linking ### Session Loss During Dashboard OAuth Linking
**What happens:** **What happens:**
1. User on `/dashboard?tab=connections` 1. User on `/dashboard?tab=connections`
2. Clicks "Link Discord" button 2. Clicks "Link Discord" button
3. Redirected to Discord OAuth 3. Redirected to Discord OAuth
@ -112,13 +127,14 @@ return res.redirect(
7. Backend can't extract user_id from cookies 7. Backend can't extract user_id from cookies
8. User redirected to login 8. User redirected to login
**Root cause:** **Root cause:**
One of the following: One of the following:
1. **Redirect URI not registered in Discord Dev Portal** ← MOST LIKELY 1. **Redirect URI not registered in Discord Dev Portal** ← MOST LIKELY
- Discord doesn't redirect to the correct URL - Discord doesn't redirect to the correct URL
- Causes issues with cookie handling - Causes issues with cookie handling
2. Browser cookie policy (SameSite=Lax) 2. Browser cookie policy (SameSite=Lax)
- Cookies might not be sent in cross-site redirect - Cookies might not be sent in cross-site redirect
- Less likely but possible - Less likely but possible
@ -186,6 +202,7 @@ Expected flow:
``` ```
**Status:** ⚠️ DEPENDS ON - Discord Dev Portal configuration **Status:** ⚠️ DEPENDS ON - Discord Dev Portal configuration
- If redirect URI not registered: User redirected to login - If redirect URI not registered: User redirected to login
- Fix: Verify Discord Dev Portal has correct redirect URI registered (see step above) - Fix: Verify Discord Dev Portal has correct redirect URI registered (see step above)
@ -207,11 +224,13 @@ Expected when trying to link again:
## 📚 Documentation Created ## 📚 Documentation Created
1. **DISCORD-LINKING-FLOW-ANALYSIS.md** 1. **DISCORD-LINKING-FLOW-ANALYSIS.md**
- Complete flow diagrams - Complete flow diagrams
- Issue breakdown - Issue breakdown
- Root cause analysis - Root cause analysis
2. **DISCORD-OAUTH-SETUP-VERIFICATION.md** ← READ THIS NEXT 2. **DISCORD-OAUTH-SETUP-VERIFICATION.md** ← READ THIS NEXT
- Step-by-step Discord Dev Portal verification - Step-by-step Discord Dev Portal verification
- Testing procedures - Testing procedures
- Debugging guide - Debugging guide
@ -236,12 +255,14 @@ Expected when trying to link again:
## Environment Variables Required ## Environment Variables Required
### Already Set ✅ ### Already Set ✅
- `DISCORD_CLIENT_ID=578971245454950421` - `DISCORD_CLIENT_ID=578971245454950421`
- `DISCORD_PUBLIC_KEY=...` - `DISCORD_PUBLIC_KEY=...`
- `VITE_SUPABASE_URL=...` - `VITE_SUPABASE_URL=...`
- `VITE_SUPABASE_ANON_KEY=...` - `VITE_SUPABASE_ANON_KEY=...`
### Verify These Are Set ⚠️ ### Verify These Are Set ⚠️
- `DISCORD_CLIENT_SECRET` (set in production only) - `DISCORD_CLIENT_SECRET` (set in production only)
- `SUPABASE_SERVICE_ROLE` (set in production only) - `SUPABASE_SERVICE_ROLE` (set in production only)
- `VITE_API_BASE` (correct domain for your deployment) - `VITE_API_BASE` (correct domain for your deployment)
@ -250,30 +271,31 @@ Expected when trying to link again:
## Code Changes Summary ## Code Changes Summary
| File | Change | Status | | File | Change | Status |
|------|--------|--------| | ------------------------------------- | --------------------------------------------- | --------------------- |
| `code/client/pages/DiscordVerify.tsx` | Lines 91-93: Auto-redirect to connections tab | ✅ FIXED | | `code/client/pages/DiscordVerify.tsx` | Lines 91-93: Auto-redirect to connections tab | ✅ FIXED |
| `code/client/pages/DiscordVerify.tsx` | Line 160: Button redirect to connections tab | ✅ FIXED | | `code/client/pages/DiscordVerify.tsx` | Line 160: Button redirect to connections tab | ✅ FIXED |
| `code/client/pages/DiscordVerify.tsx` | Line 228: Cancel button redirect to dashboard | ✅ FIXED | | `code/client/pages/DiscordVerify.tsx` | Line 228: Cancel button redirect to dashboard | ✅ FIXED |
| `code/api/discord/oauth/callback.ts` | Lines 105-113: Better error messages | ✅ IMPROVED | | `code/api/discord/oauth/callback.ts` | Lines 105-113: Better error messages | ✅ IMPROVED |
| Discord Dev Portal | OAuth2 Redirect URI registration | ⚠️ NEEDS VERIFICATION | | Discord Dev Portal | OAuth2 Redirect URI registration | ⚠️ NEEDS VERIFICATION |
--- ---
## Issue Resolution Status ## Issue Resolution Status
| Issue | Status | Solution | | Issue | Status | Solution |
|-------|--------|----------| | ---------------------------- | ------------------ | --------------------------------------- |
| Wrong redirect after /verify | ✅ FIXED | Update code + deploy | | Wrong redirect after /verify | ✅ FIXED | Update code + deploy |
| Session lost during OAuth | ⚠️ PARTIALLY FIXED | Need Discord Dev Portal verification | | Session lost during OAuth | ⚠️ PARTIALLY FIXED | Need Discord Dev Portal verification |
| Generic error messages | ✅ IMPROVED | Better console logging | | Generic error messages | ✅ IMPROVED | Better console logging |
| UI consistency | ✅ FIXED | All redirects now go to connections tab | | UI consistency | ✅ FIXED | All redirects now go to connections tab |
--- ---
## Deployment Instructions ## Deployment Instructions
1. **Deploy code changes:** 1. **Deploy code changes:**
```bash ```bash
npm run build npm run build
npm run deploy npm run deploy
@ -281,11 +303,13 @@ Expected when trying to link again:
``` ```
2. **Verify Discord Dev Portal:** 2. **Verify Discord Dev Portal:**
- Follow steps in DISCORD-OAUTH-SETUP-VERIFICATION.md - Follow steps in DISCORD-OAUTH-SETUP-VERIFICATION.md
- Add redirect URI if missing - Add redirect URI if missing
- Wait for propagation - Wait for propagation
3. **Test thoroughly:** 3. **Test thoroughly:**
- Test /verify flow - Test /verify flow
- Test Dashboard "Link Discord" button - Test Dashboard "Link Discord" button
- Check session persistence - Check session persistence
@ -307,6 +331,7 @@ Expected when trying to link again:
## Questions? ## Questions?
Refer to: Refer to:
1. **DISCORD-OAUTH-SETUP-VERIFICATION.md** - Setup & testing 1. **DISCORD-OAUTH-SETUP-VERIFICATION.md** - Setup & testing
2. **DISCORD-LINKING-FLOW-ANALYSIS.md** - Architecture & flow diagrams 2. **DISCORD-LINKING-FLOW-ANALYSIS.md** - Architecture & flow diagrams
3. Browser console - Look for `[Discord OAuth]` debug messages 3. Browser console - Look for `[Discord OAuth]` debug messages

View file

@ -26,7 +26,8 @@ Returns success response with discord username ✅
Should redirect to: /dashboard?tab=connections Should redirect to: /dashboard?tab=connections
``` ```
**Why it's broken:** **Why it's broken:**
- Line 92 of `DiscordVerify.tsx` hardcoded to navigate to `/profile/settings` - Line 92 of `DiscordVerify.tsx` hardcoded to navigate to `/profile/settings`
- User needs to see **Connections** tab to verify Discord was linked - User needs to see **Connections** tab to verify Discord was linked
- Shows wrong page, feels like "demo BS" or missing content - Shows wrong page, feels like "demo BS" or missing content
@ -64,11 +65,13 @@ Redirects to: /login?error=not_authenticated
``` ```
**Why it's broken:** **Why it's broken:**
1. Session cookies not being sent with OAuth callback request 1. Session cookies not being sent with OAuth callback request
2. OR session was cleared/expired during OAuth roundtrip 2. OR session was cleared/expired during OAuth roundtrip
3. OR redirectUri mismatch causing issues 3. OR redirectUri mismatch causing issues
**Root cause:** **Root cause:**
- Browser cookies might not be sent cross-domain - Browser cookies might not be sent cross-domain
- SameSite=Lax might be blocking cookies - SameSite=Lax might be blocking cookies
- The redirectUri registered in Discord Dev Portal might not match - The redirectUri registered in Discord Dev Portal might not match
@ -94,6 +97,7 @@ Never completes the linking
### Fix 1: DiscordVerify.tsx Redirect (Line 92) ### Fix 1: DiscordVerify.tsx Redirect (Line 92)
**Current (WRONG):** **Current (WRONG):**
```typescript ```typescript
setTimeout(() => { setTimeout(() => {
navigate("/profile/settings"); navigate("/profile/settings");
@ -101,6 +105,7 @@ setTimeout(() => {
``` ```
**Should be (CORRECT):** **Should be (CORRECT):**
```typescript ```typescript
setTimeout(() => { setTimeout(() => {
navigate("/dashboard?tab=connections"); navigate("/dashboard?tab=connections");
@ -116,9 +121,10 @@ setTimeout(() => {
The `/api/discord/oauth/callback.ts` needs to ensure: The `/api/discord/oauth/callback.ts` needs to ensure:
1. **SameSite Cookie Policy** - Cookies must be sent with cross-site requests 1. **SameSite Cookie Policy** - Cookies must be sent with cross-site requests
```typescript ```typescript
// In oauth callback response headers // In oauth callback response headers
res.setHeader('Set-Cookie', [ res.setHeader("Set-Cookie", [
`sb-access-token=...; SameSite=None; Secure; Path=/`, `sb-access-token=...; SameSite=None; Secure; Path=/`,
`sb-refresh-token=...; SameSite=None; Secure; Path=/`, `sb-refresh-token=...; SameSite=None; Secure; Path=/`,
]); ]);
@ -133,6 +139,7 @@ The `/api/discord/oauth/callback.ts` needs to ensure:
### Fix 3: Verify Discord OAuth Redirect URI ### Fix 3: Verify Discord OAuth Redirect URI
**In Discord Developer Portal:** **In Discord Developer Portal:**
1. Go to Applications > Your App 1. Go to Applications > Your App
2. OAuth2 > Redirects 2. OAuth2 > Redirects
3. Make sure this is listed: 3. Make sure this is listed:
@ -142,6 +149,7 @@ The `/api/discord/oauth/callback.ts` needs to ensure:
(Or whatever domain is in production) (Or whatever domain is in production)
**In Code:** **In Code:**
- `code/api/discord/oauth/start.ts` - Uses dynamic domain ✅ - `code/api/discord/oauth/start.ts` - Uses dynamic domain ✅
- `code/api/discord/oauth/callback.ts` - Uses dynamic domain ✅ - `code/api/discord/oauth/callback.ts` - Uses dynamic domain ✅
@ -157,11 +165,14 @@ After successful linking, before redirecting:
// After successful link at line 225 // After successful link at line 225
if (isLinkingFlow && authenticatedUserId) { if (isLinkingFlow && authenticatedUserId) {
// ... linking logic ... // ... linking logic ...
// IMPORTANT: Set cookies explicitly for browser // IMPORTANT: Set cookies explicitly for browser
// (Supabase session cookies should already be set, but ensure) // (Supabase session cookies should already be set, but ensure)
console.log("[Discord OAuth] Successfully linked, redirecting to:", redirectTo); console.log(
"[Discord OAuth] Successfully linked, redirecting to:",
redirectTo,
);
return res.redirect(302, redirectTo); // Use 302 instead of default return res.redirect(302, redirectTo); // Use 302 instead of default
} }
``` ```
@ -175,21 +186,25 @@ if (isLinkingFlow && authenticatedUserId) {
File: `code/client/pages/DiscordVerify.tsx` File: `code/client/pages/DiscordVerify.tsx`
Change line 92 from: Change line 92 from:
```typescript ```typescript
navigate("/profile/settings"); navigate("/profile/settings");
``` ```
To: To:
```typescript ```typescript
navigate("/dashboard?tab=connections"); navigate("/dashboard?tab=connections");
``` ```
Also change the button on line 160 from: Also change the button on line 160 from:
```typescript ```typescript
onClick={() => navigate("/profile/settings")} onClick={() => navigate("/profile/settings")}
``` ```
To: To:
```typescript ```typescript
onClick={() => navigate("/dashboard?tab=connections")} onClick={() => navigate("/dashboard?tab=connections")}
``` ```
@ -199,6 +214,7 @@ onClick={() => navigate("/dashboard?tab=connections")}
### Step 2: Verify Discord OAuth Redirect URI ### Step 2: Verify Discord OAuth Redirect URI
Check Discord Developer Portal: Check Discord Developer Portal:
- Application: AeThex - Application: AeThex
- OAuth2 → Redirects - OAuth2 → Redirects
- Confirm this is registered: `https://aethex.dev/api/discord/oauth/callback` - Confirm this is registered: `https://aethex.dev/api/discord/oauth/callback`
@ -231,11 +247,12 @@ To help debug session issues, add logging in AuthContext:
File: `code/client/contexts/AuthContext.tsx` File: `code/client/contexts/AuthContext.tsx`
In the useEffect that checks cookies, add: In the useEffect that checks cookies, add:
```typescript ```typescript
useEffect(() => { useEffect(() => {
// Debug: Log current session state // Debug: Log current session state
const cookies = document.cookie.split('; ').map(c => { const cookies = document.cookie.split("; ").map((c) => {
const [key] = c.split('='); const [key] = c.split("=");
return key; return key;
}); });
console.log("[AuthContext] Available cookies:", cookies); console.log("[AuthContext] Available cookies:", cookies);
@ -282,12 +299,15 @@ useEffect(() => {
### Issue: Still Redirected to Login After Linking ### Issue: Still Redirected to Login After Linking
**Possible causes:** **Possible causes:**
1. Session cookies not being sent 1. Session cookies not being sent
- Check: DevTools → Network → Find the OAuth callback request - Check: DevTools → Network → Find the OAuth callback request
- Look for "Cookie" header in request - Look for "Cookie" header in request
- If missing, cookies might be blocked - If missing, cookies might be blocked
2. OAuth Redirect URI mismatch 2. OAuth Redirect URI mismatch
- Check: Discord Developer Portal OAuth2 redirects - Check: Discord Developer Portal OAuth2 redirects
- Should exactly match what backend is using - Should exactly match what backend is using
@ -296,6 +316,7 @@ useEffect(() => {
- Might need SameSite=None; Secure - Might need SameSite=None; Secure
**Debug steps:** **Debug steps:**
1. Open browser DevTools (F12) 1. Open browser DevTools (F12)
2. Go to Network tab 2. Go to Network tab
3. Do the Discord link flow 3. Do the Discord link flow
@ -312,10 +333,13 @@ useEffect(() => {
### Issue: Discord Doesn't Show in Connections List ### Issue: Discord Doesn't Show in Connections List
**Possible causes:** **Possible causes:**
1. Linking succeeded but user not refreshed 1. Linking succeeded but user not refreshed
- Fix: Page reload or refreshAuthState() call - Fix: Page reload or refreshAuthState() call
2. Discord link created but user lookup fails 2. Discord link created but user lookup fails
- Check: Supabase discord_links table has the record - Check: Supabase discord_links table has the record
- Check: User ID matches in both tables - Check: User ID matches in both tables
@ -327,11 +351,11 @@ useEffect(() => {
## File Changes Summary ## File Changes Summary
| File | Change | Line(s) | | File | Change | Line(s) |
|------|--------|---------| | ------------------------------------- | ---------------------------------- | ------- |
| `code/client/pages/DiscordVerify.tsx` | Change redirect to connections tab | 92, 160 | | `code/client/pages/DiscordVerify.tsx` | Change redirect to connections tab | 92, 160 |
| `code/api/discord/oauth/callback.ts` | Add explicit status code | 225 | | `code/api/discord/oauth/callback.ts` | Add explicit status code | 225 |
| Discord Dev Portal | Verify redirect URI | N/A | | Discord Dev Portal | Verify redirect URI | N/A |
--- ---

View file

@ -20,6 +20,7 @@ https://aethex.dev/api/discord/oauth/callback
``` ```
**If you're using a different domain** (like localhost for testing): **If you're using a different domain** (like localhost for testing):
``` ```
http://localhost:5173/api/discord/oauth/callback http://localhost:5173/api/discord/oauth/callback
``` ```
@ -37,6 +38,7 @@ If the URL is NOT listed:
4. **Wait** - changes may take 1-2 minutes to propagate 4. **Wait** - changes may take 1-2 minutes to propagate
⚠️ **IMPORTANT:** The redirect URI must match EXACTLY: ⚠️ **IMPORTANT:** The redirect URI must match EXACTLY:
- Correct: `https://aethex.dev/api/discord/oauth/callback` - Correct: `https://aethex.dev/api/discord/oauth/callback`
- Wrong: `https://aethex.dev/api/discord/callback` (missing `/oauth`) - Wrong: `https://aethex.dev/api/discord/callback` (missing `/oauth`)
- Wrong: `aethex.dev/api/discord/oauth/callback` (missing `https://`) - Wrong: `aethex.dev/api/discord/oauth/callback` (missing `https://`)
@ -59,9 +61,11 @@ After verifying the redirect URI, test both flows:
7. You should see Discord in your connections list 7. You should see Discord in your connections list
**If it redirects to `/profile/settings` instead:** **If it redirects to `/profile/settings` instead:**
- This has been FIXED in the code update - This has been FIXED in the code update
**If it shows an error:** **If it shows an error:**
- Check the error message in the browser console - Check the error message in the browser console
- Note: Session may be lost if redirect URI not registered - Note: Session may be lost if redirect URI not registered
@ -81,12 +85,14 @@ This is the flow that had session loss issues.
8. **EXPECTED:** Discord should appear in your connections 8. **EXPECTED:** Discord should appear in your connections
**If you're redirected to `/login` instead:** **If you're redirected to `/login` instead:**
- Session was lost during OAuth callback - Session was lost during OAuth callback
- **Cause:** Redirect URI not registered in Discord Dev Portal - **Cause:** Redirect URI not registered in Discord Dev Portal
- **Solution:** Follow Step 1-3 above to add the redirect URI - **Solution:** Follow Step 1-3 above to add the redirect URI
- **Then:** Try the flow again - **Then:** Try the flow again
**If you see an error about session being lost:** **If you see an error about session being lost:**
- This means the backend detected missing session cookies - This means the backend detected missing session cookies
- Check the browser console for error details - Check the browser console for error details
- The error message now tells you to verify Discord Dev Portal settings - The error message now tells you to verify Discord Dev Portal settings
@ -100,12 +106,15 @@ Verify these are set correctly:
### Frontend (code/.env or deployment platform) ### Frontend (code/.env or deployment platform)
- [ ] `VITE_API_BASE` is set to your API domain - [ ] `VITE_API_BASE` is set to your API domain
``` ```
VITE_API_BASE=https://aethex.dev VITE_API_BASE=https://aethex.dev
``` ```
(Or your actual deployment domain) (Or your actual deployment domain)
- [ ] `VITE_SUPABASE_URL` is correct - [ ] `VITE_SUPABASE_URL` is correct
``` ```
VITE_SUPABASE_URL=https://kmdeisowhtsalsekkzqd.supabase.co VITE_SUPABASE_URL=https://kmdeisowhtsalsekkzqd.supabase.co
``` ```
@ -115,17 +124,21 @@ Verify these are set correctly:
### Backend/Server (environment variables) ### Backend/Server (environment variables)
- [ ] `DISCORD_CLIENT_ID` is set - [ ] `DISCORD_CLIENT_ID` is set
``` ```
DISCORD_CLIENT_ID=578971245454950421 DISCORD_CLIENT_ID=578971245454950421
``` ```
- [ ] `DISCORD_CLIENT_SECRET` is set (production) - [ ] `DISCORD_CLIENT_SECRET` is set (production)
``` ```
DISCORD_CLIENT_SECRET=JKlilGzcTWgfmt2wEqiHO8wpCel5VEji DISCORD_CLIENT_SECRET=JKlilGzcTWgfmt2wEqiHO8wpCel5VEji
``` ```
⚠️ **NOTE:** This is sensitive - only set in production, not in code ⚠️ **NOTE:** This is sensitive - only set in production, not in code
- [ ] `VITE_SUPABASE_URL` is set on backend - [ ] `VITE_SUPABASE_URL` is set on backend
``` ```
VITE_SUPABASE_URL=https://kmdeisowhtsalsekkzqd.supabase.co VITE_SUPABASE_URL=https://kmdeisowhtsalsekkzqd.supabase.co
``` ```
@ -145,6 +158,7 @@ Verify these are set correctly:
**Cause:** Redirect URI not registered in Discord Dev Portal **Cause:** Redirect URI not registered in Discord Dev Portal
**Solution:** **Solution:**
1. Open Discord Developer Portal 1. Open Discord Developer Portal
2. Go to OAuth2 → Redirects 2. Go to OAuth2 → Redirects
3. Verify `https://aethex.dev/api/discord/oauth/callback` is listed 3. Verify `https://aethex.dev/api/discord/oauth/callback` is listed
@ -158,6 +172,7 @@ Verify these are set correctly:
**Cause:** Linking succeeded but auth state not refreshed **Cause:** Linking succeeded but auth state not refreshed
**Solution:** **Solution:**
1. Verify the `discord_links` table in Supabase has the record 1. Verify the `discord_links` table in Supabase has the record
- Go to: https://app.supabase.com/project/kmdeisowhtsalsekkzqd - Go to: https://app.supabase.com/project/kmdeisowhtsalsekkzqd
- Find table: `discord_links` - Find table: `discord_links`
@ -177,6 +192,7 @@ Verify these are set correctly:
**Old Problem:** Redirected to `/profile/settings` **Old Problem:** Redirected to `/profile/settings`
**Solution:** ✅ FIXED in code **Solution:** ✅ FIXED in code
- The code now redirects to `/dashboard?tab=connections` - The code now redirects to `/dashboard?tab=connections`
- If you're still seeing `/profile/settings`: - If you're still seeing `/profile/settings`:
- Clear browser cache (Ctrl+Shift+Delete) - Clear browser cache (Ctrl+Shift+Delete)
@ -189,6 +205,7 @@ Verify these are set correctly:
**Cause:** Discord account already linked to an AeThex account **Cause:** Discord account already linked to an AeThex account
**Solutions:** **Solutions:**
- Option A: Use a different Discord account - Option A: Use a different Discord account
- Option B: Contact admin to unlink the Discord account from the other AeThex account - Option B: Contact admin to unlink the Discord account from the other AeThex account
- Option C: If it's your old account, use `\unlink` command to disconnect it, then `/verify` again - Option C: If it's your old account, use `\unlink` command to disconnect it, then `/verify` again

View file

@ -3,7 +3,5 @@
"version": "1", "version": "1",
"name": "AeThex Activity", "name": "AeThex Activity",
"description": "AeThex Creator Network & Talent Platform - Discord Activity", "description": "AeThex Creator Network & Talent Platform - Discord Activity",
"rpc_origins": [ "rpc_origins": ["https://578971245454950421.discordsays.com"]
"https://578971245454950421.discordsays.com"
]
} }