Switch over to using a token for demo

[kixelated]

No description provided.

[claude]

Claude finished @kixelated's task —— View job

---

PR Review: Switch over to using a token for demo

Todo List:

• Analyze changed files to understand token implementation
• Review security implications of token usage
• Validate routing issue identified by cursor bot
• Check for missing error handling and edge cases
• Assess performance and best practices
• Provide comprehensive feedback

---

🔍 Review Summary

This PR introduces JWT token authentication for demo broadcasts, but has several issues that need addressing.

🐛 Critical Issues

1. Confirmed Routing Bug (as identified by cursor bot)

Location: src/components/watch.tsx:11 and src/pages/watch/index.astro:12

Problem: In development, PUBLIC_RELAY_TOKEN="" causes the demo watch page to incorrectly route to /anon instead of /demo.

if (props.token) {  // Empty string is falsy!
    url = new URL(`${import.meta.env.PUBLIC_RELAY_URL}/demo?jwt=${props.token}`);
} else {
    url = new URL(`${import.meta.env.PUBLIC_RELAY_URL}/anon`);
}

Impact: Demo functionality is broken in development environment.

Fix: Change condition to check for meaningful token:

if (props.token && props.token.trim()) {
    // Use demo path
} else {
    // Use anon path  
}

⚠️ Security Concerns

2. Hardcoded JWT Token in Production

Location: .env.production:3

Issue: JWT token is committed to version control and exposed in client-side code via PUBLIC_ prefix.

Risks:

• Token is visible to all users in browser
• Anyone can use this token to publish to demo namespace
• No token rotation capability
• Violates principle of least privilege

Recommendation: Consider if this is intentional for a public demo. If so, document this clearly.

3. JWT Token Analysis

The hardcoded token decodes to:

{
  "root": "demo",
  "pub": "",
  "sub": null,
  "exp": null,
  "iat": null
}

Concerns:

• No expiration (exp: null) - token never expires
• No issued-at time tracking
• Allows publishing to any stream under "demo" namespace

📝 Code Quality Issues

4. Inconsistent Error Handling

Location: src/components/watch.tsx

Issue: No validation of token format or URL construction errors.

Suggestion: Add basic token validation:

if (props.token && props.token.trim() && props.token.includes('.')) {
    // Basic JWT format check
    url = new URL(`${import.meta.env.PUBLIC_RELAY_URL}/demo?jwt=${props.token}`);
} else {
    url = new URL(`${import.meta.env.PUBLIC_RELAY_URL}/anon`);
}

5. Missing Environment Variable Validation

Location: env.d.ts and component usage

Issue: No runtime validation that required environment variables are set.

Suggestion: Add environment validation in astro.config.ts or component initialization.

🔧 Minor Improvements

6. Code Clarity

The routing logic in watch.tsx could be more explicit about the intent:

// Current
if (props.token) {

// Better  
if (props.token && props.token.trim()) {
    // Authenticated demo broadcast
} else {
    // Anonymous public broadcast
}

7. TypeScript Strictness

Consider making token optional in interface:

export default function (props: { name: string; token?: string | undefined }) {

✅ Positive Aspects

• Clear separation between demo and anonymous broadcasts
• Proper TypeScript typing for environment variables
• Clean component interface design
• Maintains backward compatibility for anonymous broadcasts

🏁 Action Items

1. CRITICAL: Fix the routing bug for development environment
2. HIGH: Document the security model for public JWT token
3. MEDIUM: Add token format validation
4. LOW: Improve code comments explaining the routing logic

📊 Test Coverage

Missing: No tests found for the new token routing logic. Consider adding:

• Unit tests for watch.tsx component with different token scenarios
• Integration tests for environment variable handling
• E2E tests for demo vs anonymous routing

[cursor]

Bug: Demo Path Error Due to Empty Token

The demo page incorrectly uses the /anon path instead of /demo in the development environment. This occurs because PUBLIC_RELAY_TOKEN is an empty string in .env.development, causing the if (props.token) condition to evaluate as false. As a result, demo functionality does not work as intended.

src/components/watch.tsx#L10-L16

https://github.com/kixelated/quic.video/blob/ec9f53dd19e27329d72d95342ceaef260911be71/src/components/watch.tsx#L10-L16

Fix in Cursor • Fix in Web

---

Was this report helpful? Give feedback by reacting with 👍 or 👎