Skip to main content
Glama
API_KEYS_QUICKSTART.md6.38 kB
# API Key Management - Quick Start Guide ## Prerequisites - ✅ Supabase project with `api_keys` table created - ✅ User authentication working (Supabase Auth) - ✅ Organization membership setup - ✅ Dashboard running on `localhost:3000` (or configured port) ## Installation Already completed in this implementation: ```bash # Navigate to dashboard directory cd /Users/darrenmorgan/AI_Projects/hostaway-mcp/dashboard # Install dependencies (already done) npm install # Dependency added: @headlessui/react@^2.2.9 ``` ## Files Created ``` ✅ /dashboard/app/(dashboard)/api-keys/page.tsx ✅ /dashboard/app/(dashboard)/api-keys/actions.ts ✅ /dashboard/components/api-keys/APIKeyList.tsx ✅ /dashboard/components/api-keys/APIKeyGenerateModal.tsx ✅ /dashboard/components/api-keys/APIKeyDisplay.tsx ``` ## Running the Feature ### 1. Start Development Server ```bash cd /Users/darrenmorgan/AI_Projects/hostaway-mcp/dashboard npm run dev ``` ### 2. Access the Page Navigate to: `http://localhost:3000/api-keys` (You must be logged in with a user that belongs to an organization) ### 3. Generate Your First API Key 1. Click the "Generate New Key" button 2. Read the security warning 3. Click "Generate Key" 4. Copy the displayed API key (format: `mcp_xxxxx...`) 5. Save it securely (you won't see it again!) 6. Click "I've saved my key" ## Quick Testing ### Happy Path Test ``` 1. Navigate to /api-keys 2. Generate a new key 3. Copy the key to clipboard 4. Verify key appears in list as "Active" 5. Try regenerating the key 6. Verify old key becomes "Inactive" 7. Try deleting a key 8. Verify key status changes to "Inactive" ``` ### Edge Case Test ``` 1. Generate 5 API keys 2. Verify warning appears: "Maximum limit reached" 3. Verify "Generate New Key" button is disabled 4. Delete one key 5. Verify button becomes enabled again 6. Generate a new key successfully ``` ## Using the API Key ### In Claude Desktop Config Add to your `claude_desktop_config.json`: ```json { "mcpServers": { "hostaway": { "url": "http://localhost:3000/api/mcp", "headers": { "X-API-Key": "mcp_your_generated_key_here" } } } } ``` ### Testing API Key Validation ```bash # Test with curl curl -H "X-API-Key: mcp_your_key_here" \ http://localhost:3000/api/mcp/validate # Should return: # { "valid": true, "organization_id": 123 } ``` ## Common Issues & Solutions ### Issue: Page not accessible **Solution:** Ensure you're logged in and have organization membership ### Issue: "Not authenticated" error **Solution:** ```bash # Check if user session is valid # Navigate to /login and log in again ``` ### Issue: Can't generate keys **Solution:** ```sql -- Verify api_keys table exists in Supabase SELECT * FROM api_keys LIMIT 1; -- Check RLS policies SELECT * FROM pg_policies WHERE tablename = 'api_keys'; ``` ### Issue: Copy button doesn't work **Solution:** - Use HTTPS or localhost (clipboard API requirement) - Check browser console for errors - Try a different browser ## API Key Format ``` Format: mcp_<32 random characters> Example: mcp_a7b2c9d4e1f8g3h6i5j2k9l4m7n0p3q6 ✅ Valid: mcp_aBcD1234eFgH5678iJkL9012mNoPqRsT ❌ Invalid: mcp_short ❌ Invalid: api_key_123456 ``` ## Database Verification ### Check Keys in Database ```sql -- View all API keys for your organization SELECT id, LEFT(key_hash, 10) || '...' as key_hash_preview, is_active, created_at, last_used_at FROM api_keys WHERE organization_id = YOUR_ORG_ID ORDER BY created_at DESC; ``` ### Verify Key Hash Format ```sql -- Should return 64 (SHA-256 produces 64 hex characters) SELECT LENGTH(key_hash) as hash_length FROM api_keys LIMIT 1; ``` ## Security Checklist Before deploying to production: - [ ] Verify all API keys are hashed (64 hex characters) - [ ] Confirm no full keys in database - [ ] Check no keys in application logs - [ ] Verify RLS policies are active - [ ] Test key validation in MCP server - [ ] Confirm HTTPS is enabled - [ ] Review error messages (no sensitive data leaked) - [ ] Test rate limiting (5 keys max) ## Environment Variables Required in `.env.local`: ```bash NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key ``` ## Development Tips ### Watch for Changes ```bash # Terminal 1: Run dev server npm run dev # Terminal 2: Watch TypeScript errors npx tsc --noEmit --watch ``` ### Check Component Props ```typescript // APIKeyList.tsx interface APIKeyListProps { keys: ApiKey[] // Array of API key objects maxKeysReached: boolean // True when 5 active keys exist } // APIKeyGenerateModal.tsx interface APIKeyGenerateModalProps { isOpen: boolean onClose: () => void onGenerate: () => Promise<{ success: boolean; apiKey?: string; error?: string }> } ``` ### Debug Server Actions ```typescript // Add console.log in actions.ts export async function generateApiKey() { console.log('🔑 Generating API key...') // ... rest of code console.log('✅ API key generated successfully') } ``` ## Next Steps 1. **Test thoroughly** - Use `/API_KEYS_TESTING_GUIDE.md` 2. **Review security** - Audit all code paths 3. **Update MCP server** - Implement key validation 4. **Write docs** - User-facing documentation 5. **Deploy to staging** - Test in production-like environment ## Support ### Documentation - Implementation details: `/API_KEYS_IMPLEMENTATION_SUMMARY.md` - Testing checklist: `/API_KEYS_TESTING_GUIDE.md` - This guide: `/API_KEYS_QUICKSTART.md` ### Code Locations - Server Components: `/dashboard/app/(dashboard)/api-keys/` - Client Components: `/dashboard/components/api-keys/` - Types: `/dashboard/lib/types/database.ts` ### Useful Commands ```bash # Run development server npm run dev # Build for production npm run build # Run linter npm run lint # Type check npx tsc --noEmit # Check for unused dependencies npm prune ``` ## Feature Flags (Optional) If you want to enable/disable the feature: ```typescript // In page.tsx, add at the top const FEATURE_API_KEYS_ENABLED = process.env.NEXT_PUBLIC_FEATURE_API_KEYS === 'true' if (!FEATURE_API_KEYS_ENABLED) { redirect('/dashboard') } ``` Then in `.env.local`: ```bash NEXT_PUBLIC_FEATURE_API_KEYS=true ``` --- **Ready to test!** Navigate to `/api-keys` and start generating API keys. For detailed testing procedures, see `/API_KEYS_TESTING_GUIDE.md`

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/darrentmorgan/hostaway-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server