Create beautiful black and white MCP-branded auth pages

**MCP Server Auth Page (src/auth/provider.ts):**
- Black background with white card design
- Official MCP logo and branding
- Clear client information display
- Elegant "Continue to Authentication" flow
- Professional MCP server identification

**Upstream Fake Auth Page (src/handlers/fakeauth.ts):**
- Updated branding to distinguish from MCP server
- Lock icon and "Upstream Authentication" title
- Clear user ID management with localStorage
- Generate/edit user ID functionality for testing
- Multi-user testing instructions

**Technical Updates:**
- Permissive CSP headers for both auth pages
- Logo serving route at /mcp-logo.png
- Responsive design with modern CSS
- Clear visual distinction between MCP server auth vs upstream auth
- Enhanced userId integration in OAuth authorization flow

Both pages now provide professional user experience while maintaining
clear distinction between the MCP server's auth and the fake upstream
provider auth for testing purposes.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jerome 2025-07-08 12:33:30 +01:00
commit d8e706ff9d
No known key found for this signature in database

View file

@ -193,6 +193,7 @@ describe("auth utils", () => {
},
clientId: "client-id",
issuedAt: Date.now() / 1000,
userId: "test-user-id",
}
await saveMcpInstallation(accessToken, mcpInstallation);
@ -239,6 +240,7 @@ describe("auth utils", () => {
},
clientId: "client-id",
issuedAt: Date.now() / 1000,
userId: "test-user-id",
});
const getDel = jest.spyOn(mockRedis, 'getDel').mockImplementationOnce(() => {
@ -252,6 +254,7 @@ describe("auth utils", () => {
},
clientId: "client-id",
issuedAt: Date.now() / 1000,
userId: "test-user-id",
};
const value = JSON.stringify(mcpInstallation);
const iv = crypto.randomBytes(16);