oauth-callback 0.1.1 → 1.0.0

package/README.md

@@ -7,15 +7,19 @@
 
 A lightweight local HTTP server for handling OAuth 2.0 authorization callbacks in Node.js, Deno, and Bun applications. Perfect for CLI tools, desktop applications, and development environments that need to capture OAuth authorization codes.
 
+<div align="center">
+  <img src="https://raw.githubusercontent.com/kriasoft/oauth-callback/main/examples/notion.gif" alt="OAuth Callback Demo" width="100%" style="max-width: 800px; height: auto;">
+</div>
+
 ## Features
 
 - 🚀 **Multi-runtime support** - Works with Node.js 18+, Deno, and Bun
-- 🔒 **Secure localhost-only server** for OAuth callbacks  
+- 🔒 **Secure localhost-only server** for OAuth callbacks
 - ⚡ **Minimal dependencies** - Only requires `open` package
 - 🎯 **TypeScript support** out of the box
 - 🛡️ **Comprehensive OAuth error handling** with detailed error classes
 - 🔄 **Automatic server cleanup** after callback
-- 🎪 **Auto-closing success pages** with countdown timer
+- 🎪 **Clean success pages** with animated checkmark
 - 🎨 **Customizable HTML templates** with placeholder support
 - 🚦 **AbortSignal support** for programmatic cancellation
 - 📝 **Request logging and debugging** callbacks
@@ -217,6 +221,66 @@ class OAuthError extends Error {
 - No data is stored persistently
 - State parameter validation should be implemented by the application
 
+## Running the Examples
+
+### Interactive Demo (No Setup Required)
+
+Try the library instantly with the built-in demo that includes a mock OAuth server:
+
+```bash
+# Run the demo - no credentials needed!
+bun run example:demo
+
+# Run without opening browser (for CI/testing)
+bun run examples/demo.ts --no-browser
+```
+
+The demo showcases:
+
+- Dynamic client registration (simplified OAuth 2.0 DCR)
+- Complete authorization flow with mock provider
+- Multiple scenarios (success, access denied, invalid scope)
+- Custom HTML templates for success/error pages
+- Token exchange and API usage simulation
+
+### Real OAuth Examples
+
+#### GitHub OAuth
+
+For testing with GitHub OAuth:
+
+```bash
+# Set up GitHub OAuth App credentials
+export GITHUB_CLIENT_ID="your_client_id"
+export GITHUB_CLIENT_SECRET="your_client_secret"
+
+# Run the GitHub example
+bun run example:github
+```
+
+This example demonstrates:
+
+- Setting up OAuth with GitHub
+- Handling the authorization callback
+- Exchanging the code for an access token
+- Using the token to fetch user information
+
+#### Notion MCP with Dynamic Client Registration
+
+For testing with Notion's Model Context Protocol server:
+
+```bash
+# No credentials needed - uses Dynamic Client Registration!
+bun run example:notion
+```
+
+This example demonstrates:
+
+- Dynamic Client Registration (OAuth 2.0 DCR) - no pre-configured client ID/secret needed
+- Integration with Model Context Protocol (MCP) servers
+- Automatic client registration with the authorization server
+- Using the MCP SDK's OAuth capabilities
+
 ## Development
 
 ```bash
@@ -227,10 +291,12 @@ bun install
 bun test
 
 # Build
-bun build ./src/index.ts --outdir ./dist
+bun run build
 
-# Run example
-bun run example.ts
+# Run examples
+bun run example:demo    # Interactive demo
+bun run example:github  # GitHub OAuth example
+bun run example:notion  # Notion MCP example with Dynamic Client Registration
 ```
 
 ## Requirements
@@ -271,6 +337,17 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 
 This project is released under the MIT License. Feel free to use it in your projects, modify it to suit your needs, and share it with others. We believe in open source and hope this tool makes OAuth integration easier for everyone!
 
+## Related Projects
+
+- [**MCP Client Generator**](https://github.com/kriasoft/mcp-client-gen) - Generate TypeScript clients from MCP server specifications. Perfect companion for building MCP-enabled applications with OAuth support ([npm](https://www.npmjs.com/package/mcp-client-gen)).
+- [**React Starter Kit**](https://github.com/kriasoft/react-starter-kit) - Full-stack React application template with authentication, including OAuth integration examples.
+
+## Backers
+
+Support this project by becoming a backer. Your logo will show up here with a link to your website.
+
+<a href="https://reactstarter.com/b/1"><img src="https://reactstarter.com/b/1.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/2"><img src="https://reactstarter.com/b/2.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/3"><img src="https://reactstarter.com/b/3.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/4"><img src="https://reactstarter.com/b/4.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/5"><img src="https://reactstarter.com/b/5.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/6"><img src="https://reactstarter.com/b/6.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/7"><img src="https://reactstarter.com/b/7.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/8"><img src="https://reactstarter.com/b/8.png" height="60" /></a>
+
 ## Support
 
 Found a bug or have a question? Please open an issue on the [GitHub issue tracker](https://github.com/kriasoft/oauth-callback/issues) and we'll be happy to help. If this project saves you time and you'd like to support its continued development, consider [becoming a sponsor](https://github.com/sponsors/koistya). Every bit of support helps maintain and improve this tool for the community. Thank you!

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAwB,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AACrE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGlD,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAsB,WAAW,CAC/B,KAAK,EAAE,kBAAkB,GAAG,MAAM,GACjC,OAAO,CAAC,cAAc,CAAC,CAsEzB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAwB,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AACrE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGlD,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAsB,WAAW,CAC/B,KAAK,EAAE,kBAAkB,GAAG,MAAM,GACjC,OAAO,CAAC,cAAc,CAAC,CAqEzB"}

package/dist/index.js

@@ -513,22 +513,65 @@ class OAuthError extends Error {
 }
 
 // src/templates.ts
-var successTemplate = `<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>OAuth - Authorization Successful</title><link rel="stylesheet" href="./styles.css" /><script> // Auto-close window after 3 seconds let countdown = 3; function updateCountdown() { const element = document.getElementById("countdown"); if (element) { if (countdown > 0) { element.textContent = countdown + " second" + (countdown !== 1 ? "s" : ""); countdown--; setTimeout(updateCountdown, 1000); } else { element.innerHTML = '<span class="spinner"></span>Closing window...'; setTimeout(() => window.close(), 500); } } } window.addEventListener("DOMContentLoaded", updateCountdown); </script></head><body><div class="container"><div class="icon success">✓</div><h1>Authorization Successful!</h1><p>Your application has been successfully authorized.</p><p>You can now return to your application to continue.</p><div class="auto-close"><p class="text-muted text-small"> This window will close automatically in </p><div class="countdown" id="countdown">3 seconds</div></div></div></body></html>`;
-var errorTemplate = `<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>OAuth - {{ERROR_TITLE}}</title><link rel="stylesheet" href="./styles.css" /></head><body><div class="container"><div class="icon error">{{ERROR_ICON}}</div><h1>{{ERROR_TITLE}}</h1><p>The authorization process could not be completed.</p> {{ERROR_DETAILS}} <p class="text-muted mt-24">You can close this window and try again.</p></div></body></html>`;
+var successTemplate = `<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Authorization Successful</title><style>:root{--system-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;--mono-font:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",Menlo,monospace}@media (prefers-color-scheme:dark){:root{color-scheme:dark}}.minimal-body{margin:0;padding:0;min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:var(--system-font);background:linear-gradient(180deg,#fafafa 0%,#f0f0f0 100%);color:#1a1a1a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dark .minimal-body{background:linear-gradient(180deg,#0a0a0a 0%,#1a1a1a 100%);color:#fafafa}.minimal-card{background:white;border-radius:16px;padding:48px 40px 40px;max-width:420px;width:90%;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 6px 16px rgba(0,0,0,0.08);animation:fadeUp 0.4s ease-out}.dark .minimal-card{background:#1f1f1f;box-shadow:0 1px 3px rgba(0,0,0,0.2),0 8px 24px rgba(0,0,0,0.4)}.minimal-title{font-size:24px;font-weight:600;margin:0 0 8px;letter-spacing:-0.02em;line-height:1.2}.minimal-subtitle{font-size:15px;color:#666;margin:0 0 32px;line-height:1.5}.dark .minimal-subtitle{color:#999}.success-icon-container{width:56px;height:56px;margin:0 auto 24px}.checkmark{width:56px;height:56px}.checkmark-circle{stroke:#10b981;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:157;stroke-dashoffset:157;fill:none}.checkmark-check{stroke:#10b981;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:48;stroke-dashoffset:48;fill:none}.checkmark.animate .checkmark-circle{animation:stroke 0.6s cubic-bezier(0.65,0,0.45,1) forwards}.checkmark.animate .checkmark-check{animation:stroke 0.3s cubic-bezier(0.65,0,0.45,1) 0.4s forwards}@keyframes stroke{100%{stroke-dashoffset:0}}.error-icon-container{width:56px;height:56px;margin:0 auto 24px;color:#ef4444}.error-icon-container.animate svg{animation:errorPulse 0.5s ease-out,shake 0.4s ease-out 0.3s}.error-icon-container.animate svg circle{stroke-dasharray:63;stroke-dashoffset:63;animation:errorStroke 0.5s cubic-bezier(0.65,0,0.45,1) forwards}.error-icon-container.animate svg path{stroke-dasharray:20;stroke-dashoffset:20;animation:errorStroke 0.4s cubic-bezier(0.65,0,0.45,1) 0.3s forwards}@keyframes errorPulse{0%{transform:scale(0);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes errorStroke{to{stroke-dashoffset:0}}@keyframes shake{0%,100%{transform:translateX(0) scale(1)}25%{transform:translateX(-4px) scale(1)}75%{transform:translateX(4px) scale(1)}}.countdown-container{margin-top:32px;padding-top:24px;border-top:1px solid #e5e5e5}.dark .countdown-container{border-top-color:#333}.countdown-label{font-size:13px;color:#666;margin-bottom:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.05em}.dark .countdown-label{color:#999}#countdown-text{font-family:var(--mono-font);font-weight:600;color:#1a1a1a}.dark #countdown-text{color:#fafafa}.progress-track{width:100%;height:3px;background:#e5e5e5;border-radius:3px;overflow:hidden}.dark .progress-track{background:#333}.progress-bar{height:100%;background:linear-gradient(90deg,#10b981 0%,#059669 100%);border-radius:3px;transition:width 100ms linear;width:0}.minimal-actions{display:flex;gap:12px;margin-top:24px;padding-top:24px;border-top:1px solid #e5e5e5}.dark .minimal-actions{border-top-color:#333}.minimal-button{flex:1;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all 0.2s ease;font-family:var(--system-font);letter-spacing:-0.01em}.minimal-button:active{transform:scale(0.98)}.minimal-button.primary{background:#1a1a1a;color:white}.minimal-button.primary:hover{background:#000}.dark .minimal-button.primary{background:#fafafa;color:#1a1a1a}.dark .minimal-button.primary:hover{background:#fff}.minimal-button.secondary{background:#f5f5f5;color:#666}.minimal-button.secondary:hover{background:#e8e8e8}.dark .minimal-button.secondary{background:#2a2a2a;color:#999}.dark .minimal-button.secondary:hover{background:#333}.minimal-help{font-size:12px;color:#999;margin-top:16px;line-height:1.5}.dark .minimal-help{color:#666}.minimal-error-details{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:12px 16px;margin:20px 0;text-align:left;font-size:13px;line-height:1.6}.dark .minimal-error-details{background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.3)}.minimal-error-details strong{color:#dc2626;display:block;margin-bottom:4px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.05em}.dark .minimal-error-details strong{color:#ef4444}.minimal-error-details code{font-family:var(--mono-font);background:rgba(0,0,0,0.05);padding:2px 6px;border-radius:4px;font-size:12px}.dark .minimal-error-details code{background:rgba(255,255,255,0.1)}@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}.minimal-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}@media (prefers-contrast:high){.minimal-card{border:2px solid currentColor}.minimal-button{border:1px solid currentColor}}</style> <script>      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {         document.documentElement.classList.add("dark");       }       window.addEventListener("DOMContentLoaded", () => {         const checkmark = document.getElementById("checkmark");         if (checkmark) {           setTimeout(() => checkmark.classList.add("animate"), 100);         }       });</script> </head><body class="minimal-body"><div class="minimal-card"><div class="success-icon-container"><svg id="checkmark" class="checkmark" viewBox="0 0 52 52"><circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none" /><path class="checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" /></svg></div><h1 class="minimal-title">Authorization Successful</h1><p class="minimal-subtitle">You can now return to your application</p></div></body></html>`;
+var errorTemplate = `<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>{{ERROR_TITLE}}</title><style>:root{--system-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;--mono-font:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",Menlo,monospace}@media (prefers-color-scheme:dark){:root{color-scheme:dark}}.minimal-body{margin:0;padding:0;min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:var(--system-font);background:linear-gradient(180deg,#fafafa 0%,#f0f0f0 100%);color:#1a1a1a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dark .minimal-body{background:linear-gradient(180deg,#0a0a0a 0%,#1a1a1a 100%);color:#fafafa}.minimal-card{background:white;border-radius:16px;padding:48px 40px 40px;max-width:420px;width:90%;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 6px 16px rgba(0,0,0,0.08);animation:fadeUp 0.4s ease-out}.dark .minimal-card{background:#1f1f1f;box-shadow:0 1px 3px rgba(0,0,0,0.2),0 8px 24px rgba(0,0,0,0.4)}.minimal-title{font-size:24px;font-weight:600;margin:0 0 8px;letter-spacing:-0.02em;line-height:1.2}.minimal-subtitle{font-size:15px;color:#666;margin:0 0 32px;line-height:1.5}.dark .minimal-subtitle{color:#999}.success-icon-container{width:56px;height:56px;margin:0 auto 24px}.checkmark{width:56px;height:56px}.checkmark-circle{stroke:#10b981;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:157;stroke-dashoffset:157;fill:none}.checkmark-check{stroke:#10b981;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:48;stroke-dashoffset:48;fill:none}.checkmark.animate .checkmark-circle{animation:stroke 0.6s cubic-bezier(0.65,0,0.45,1) forwards}.checkmark.animate .checkmark-check{animation:stroke 0.3s cubic-bezier(0.65,0,0.45,1) 0.4s forwards}@keyframes stroke{100%{stroke-dashoffset:0}}.error-icon-container{width:56px;height:56px;margin:0 auto 24px;color:#ef4444}.error-icon-container.animate svg{animation:errorPulse 0.5s ease-out,shake 0.4s ease-out 0.3s}.error-icon-container.animate svg circle{stroke-dasharray:63;stroke-dashoffset:63;animation:errorStroke 0.5s cubic-bezier(0.65,0,0.45,1) forwards}.error-icon-container.animate svg path{stroke-dasharray:20;stroke-dashoffset:20;animation:errorStroke 0.4s cubic-bezier(0.65,0,0.45,1) 0.3s forwards}@keyframes errorPulse{0%{transform:scale(0);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes errorStroke{to{stroke-dashoffset:0}}@keyframes shake{0%,100%{transform:translateX(0) scale(1)}25%{transform:translateX(-4px) scale(1)}75%{transform:translateX(4px) scale(1)}}.countdown-container{margin-top:32px;padding-top:24px;border-top:1px solid #e5e5e5}.dark .countdown-container{border-top-color:#333}.countdown-label{font-size:13px;color:#666;margin-bottom:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.05em}.dark .countdown-label{color:#999}#countdown-text{font-family:var(--mono-font);font-weight:600;color:#1a1a1a}.dark #countdown-text{color:#fafafa}.progress-track{width:100%;height:3px;background:#e5e5e5;border-radius:3px;overflow:hidden}.dark .progress-track{background:#333}.progress-bar{height:100%;background:linear-gradient(90deg,#10b981 0%,#059669 100%);border-radius:3px;transition:width 100ms linear;width:0}.minimal-actions{display:flex;gap:12px;margin-top:24px;padding-top:24px;border-top:1px solid #e5e5e5}.dark .minimal-actions{border-top-color:#333}.minimal-button{flex:1;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all 0.2s ease;font-family:var(--system-font);letter-spacing:-0.01em}.minimal-button:active{transform:scale(0.98)}.minimal-button.primary{background:#1a1a1a;color:white}.minimal-button.primary:hover{background:#000}.dark .minimal-button.primary{background:#fafafa;color:#1a1a1a}.dark .minimal-button.primary:hover{background:#fff}.minimal-button.secondary{background:#f5f5f5;color:#666}.minimal-button.secondary:hover{background:#e8e8e8}.dark .minimal-button.secondary{background:#2a2a2a;color:#999}.dark .minimal-button.secondary:hover{background:#333}.minimal-help{font-size:12px;color:#999;margin-top:16px;line-height:1.5}.dark .minimal-help{color:#666}.minimal-error-details{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:12px 16px;margin:20px 0;text-align:left;font-size:13px;line-height:1.6}.dark .minimal-error-details{background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.3)}.minimal-error-details strong{color:#dc2626;display:block;margin-bottom:4px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.05em}.dark .minimal-error-details strong{color:#ef4444}.minimal-error-details code{font-family:var(--mono-font);background:rgba(0,0,0,0.05);padding:2px 6px;border-radius:4px;font-size:12px}.dark .minimal-error-details code{background:rgba(255,255,255,0.1)}@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}.minimal-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}@media (prefers-contrast:high){.minimal-card{border:2px solid currentColor}.minimal-button{border:1px solid currentColor}}</style> <script>      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {         document.documentElement.classList.add("dark");       }       window.addEventListener("DOMContentLoaded", () => {         const errorIcon = document.getElementById("error-icon");         if (errorIcon) {           setTimeout(() => errorIcon.classList.add("animate"), 100);         }       });       document.addEventListener("keydown", (e) => {         if (e.key === "Escape") {           window.close();         } else if (e.key === "Enter") {           window.location.reload();         }       });</script> </head><body class="minimal-body"><div class="minimal-card"><div class="error-icon-container" id="error-icon">{{ERROR_SVG_ICON}}</div><h1 class="minimal-title">{{ERROR_TITLE}}</h1><p class="minimal-subtitle">{{ERROR_MESSAGE}}</p> {{ERROR_DETAILS}} <div class="minimal-actions"><button onclick="window.location.reload()" class="minimal-button primary" > Try Again </button><button onclick="window.close()" class="minimal-button secondary"> Close </button></div><p class="minimal-help">{{HELP_TEXT}}</p></div></body></html>`;
 function renderError(params) {
-  const errorTitle = params.error === "access_denied" ? "Access Denied" : "Authorization Failed";
-  const errorIcon = params.error === "access_denied" ? "\uD83D\uDEAB" : "⚠️";
+  let errorTitle = "Authorization Failed";
+  let errorMessage = "The authorization process could not be completed.";
+  let helpText = "If the problem persists, please contact support.";
+  let errorSvgIcon = "";
+  switch (params.error) {
+    case "access_denied":
+      errorTitle = "Access Denied";
+      errorMessage = "You have denied access to the application.";
+      helpText = 'Click "Try Again" to restart the authorization process.';
+      errorSvgIcon = `
+        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Access denied icon">
+          <path d="M8 8l8 8M16 8l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>`;
+      break;
+    case "invalid_request":
+      errorTitle = "Invalid Request";
+      errorMessage = "The authorization request was malformed or missing required parameters.";
+      errorSvgIcon = `
+        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Invalid request icon">
+          <path d="M12 8v4M12 16h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>`;
+      break;
+    case "unauthorized_client":
+      errorTitle = "Unauthorized Client";
+      errorMessage = "This application is not authorized to use this authentication method.";
+      errorSvgIcon = `
+        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Unauthorized icon">
+          <path d="M12 11V7a3 3 0 00-6 0v4m-1 0h8a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6a1 1 0 011-1z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>`;
+      break;
+    case "server_error":
+      errorTitle = "Server Error";
+      errorMessage = "The authorization server encountered an unexpected error.";
+      helpText = "Please wait a moment and try again.";
+      errorSvgIcon = `
+        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Server error icon">
+          <path d="M12 9v6m0 4h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>`;
+      break;
+    default:
+      errorSvgIcon = `
+        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Warning icon">
+          <path d="M12 9v4m0 4h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>`;
+  }
   let errorDetails = "";
   if (params.error_description || params.error) {
     errorDetails = `
-      <div class="error-details">
-        <strong>Error Details:</strong>
+      <div class="minimal-error-details">
+        <strong>Error Code</strong>
         <code>${params.error}</code>
-        ${params.error_description ? `<p class="mt-12">${params.error_description}</p>` : ""}
-        ${params.error_uri ? `<p class="mt-8"><a href="${params.error_uri}" target="_blank">More information →</a></p>` : ""}
+        ${params.error_description ? `<p>${params.error_description}</p>` : ""}
+        ${params.error_uri ? `<p><a href="${params.error_uri}" target="_blank">More information →</a></p>` : ""}
       </div>`;
   }
-  return errorTemplate.replace(/{{ERROR_TITLE}}/g, errorTitle).replace("{{ERROR_ICON}}", errorIcon).replace("{{ERROR_DETAILS}}", errorDetails);
+  return errorTemplate.replace(/{{ERROR_TITLE}}/g, errorTitle).replace("{{ERROR_ICON}}", "⚠️").replace("{{ERROR_SVG_ICON}}", errorSvgIcon).replace("{{ERROR_MESSAGE}}", errorMessage).replace("{{ERROR_DETAILS}}", errorDetails).replace("{{HELP_TEXT}}", helpText);
 }
 
 // src/server.ts
@@ -555,7 +598,14 @@ class BunCallbackServer {
   onRequest;
   abortHandler;
   async start(options) {
-    const { port, hostname = "localhost", successHtml, errorHtml, signal, onRequest } = options;
+    const {
+      port,
+      hostname = "localhost",
+      successHtml,
+      errorHtml,
+      signal,
+      onRequest
+    } = options;
     this.successHtml = successHtml;
     this.errorHtml = errorHtml;
     this.onRequest = onRequest;
@@ -656,7 +706,14 @@ class DenoCallbackServer {
   onRequest;
   abortHandler;
   async start(options) {
-    const { port, hostname = "localhost", successHtml, errorHtml, signal, onRequest } = options;
+    const {
+      port,
+      hostname = "localhost",
+      successHtml,
+      errorHtml,
+      signal,
+      onRequest
+    } = options;
     this.successHtml = successHtml;
     this.errorHtml = errorHtml;
     this.onRequest = onRequest;
@@ -754,7 +811,14 @@ class NodeCallbackServer {
   onRequest;
   abortHandler;
   async start(options) {
-    const { port, hostname = "localhost", successHtml, errorHtml, signal, onRequest } = options;
+    const {
+      port,
+      hostname = "localhost",
+      successHtml,
+      errorHtml,
+      signal,
+      onRequest
+    } = options;
     this.successHtml = successHtml;
     this.errorHtml = errorHtml;
     this.onRequest = onRequest;

package/dist/server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACnC;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,wCAAwC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mHAAmH;IACnH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,oFAAoF;IACpF,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,mDAAmD;IACnD,KAAK,CAAC,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,iEAAiE;IACjE,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,cAAc,CAAC,CAAC;IACxE,4CAA4C;IAC5C,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CACvB;AAmeD;;;;GAIG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,CAarD"}
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACnC;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,wCAAwC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mHAAmH;IACnH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,oFAAoF;IACpF,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,mDAAmD;IACnD,KAAK,CAAC,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,iEAAiE;IACjE,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,cAAc,CAAC,CAAC;IACxE,4CAA4C;IAC5C,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CACvB;AAuhBD;;;;GAIG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,CAarD"}

package/dist/templates.d.ts

@@ -1,11 +1,11 @@
 /**
  * Auto-generated OAuth callback HTML templates
- * Generated from assets/*.html and assets/*.css
+ * Generated from templates/*.html and templates/*.css
  *
- * To regenerate: bun run assets/build.ts
+ * To regenerate: bun run templates/build.ts
  */
-export declare const successTemplate = "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\" /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /><title>OAuth - Authorization Successful</title><link rel=\"stylesheet\" href=\"./styles.css\" /><script> // Auto-close window after 3 seconds let countdown = 3; function updateCountdown() { const element = document.getElementById(\"countdown\"); if (element) { if (countdown > 0) { element.textContent = countdown + \" second\" + (countdown !== 1 ? \"s\" : \"\"); countdown--; setTimeout(updateCountdown, 1000); } else { element.innerHTML = '<span class=\"spinner\"></span>Closing window...'; setTimeout(() => window.close(), 500); } } } window.addEventListener(\"DOMContentLoaded\", updateCountdown); </script></head><body><div class=\"container\"><div class=\"icon success\">\u2713</div><h1>Authorization Successful!</h1><p>Your application has been successfully authorized.</p><p>You can now return to your application to continue.</p><div class=\"auto-close\"><p class=\"text-muted text-small\"> This window will close automatically in </p><div class=\"countdown\" id=\"countdown\">3 seconds</div></div></div></body></html>";
-export declare const errorTemplate = "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\" /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /><title>OAuth - {{ERROR_TITLE}}</title><link rel=\"stylesheet\" href=\"./styles.css\" /></head><body><div class=\"container\"><div class=\"icon error\">{{ERROR_ICON}}</div><h1>{{ERROR_TITLE}}</h1><p>The authorization process could not be completed.</p> {{ERROR_DETAILS}} <p class=\"text-muted mt-24\">You can close this window and try again.</p></div></body></html>";
+export declare const successTemplate = "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\" /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /><title>Authorization Successful</title><style>:root{--system-font:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;--mono-font:ui-monospace,SFMono-Regular,\"SF Mono\",Consolas,\"Liberation Mono\",Menlo,monospace}@media (prefers-color-scheme:dark){:root{color-scheme:dark}}.minimal-body{margin:0;padding:0;min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:var(--system-font);background:linear-gradient(180deg,#fafafa 0%,#f0f0f0 100%);color:#1a1a1a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dark .minimal-body{background:linear-gradient(180deg,#0a0a0a 0%,#1a1a1a 100%);color:#fafafa}.minimal-card{background:white;border-radius:16px;padding:48px 40px 40px;max-width:420px;width:90%;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 6px 16px rgba(0,0,0,0.08);animation:fadeUp 0.4s ease-out}.dark .minimal-card{background:#1f1f1f;box-shadow:0 1px 3px rgba(0,0,0,0.2),0 8px 24px rgba(0,0,0,0.4)}.minimal-title{font-size:24px;font-weight:600;margin:0 0 8px;letter-spacing:-0.02em;line-height:1.2}.minimal-subtitle{font-size:15px;color:#666;margin:0 0 32px;line-height:1.5}.dark .minimal-subtitle{color:#999}.success-icon-container{width:56px;height:56px;margin:0 auto 24px}.checkmark{width:56px;height:56px}.checkmark-circle{stroke:#10b981;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:157;stroke-dashoffset:157;fill:none}.checkmark-check{stroke:#10b981;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:48;stroke-dashoffset:48;fill:none}.checkmark.animate .checkmark-circle{animation:stroke 0.6s cubic-bezier(0.65,0,0.45,1) forwards}.checkmark.animate .checkmark-check{animation:stroke 0.3s cubic-bezier(0.65,0,0.45,1) 0.4s forwards}@keyframes stroke{100%{stroke-dashoffset:0}}.error-icon-container{width:56px;height:56px;margin:0 auto 24px;color:#ef4444}.error-icon-container.animate svg{animation:errorPulse 0.5s ease-out,shake 0.4s ease-out 0.3s}.error-icon-container.animate svg circle{stroke-dasharray:63;stroke-dashoffset:63;animation:errorStroke 0.5s cubic-bezier(0.65,0,0.45,1) forwards}.error-icon-container.animate svg path{stroke-dasharray:20;stroke-dashoffset:20;animation:errorStroke 0.4s cubic-bezier(0.65,0,0.45,1) 0.3s forwards}@keyframes errorPulse{0%{transform:scale(0);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes errorStroke{to{stroke-dashoffset:0}}@keyframes shake{0%,100%{transform:translateX(0) scale(1)}25%{transform:translateX(-4px) scale(1)}75%{transform:translateX(4px) scale(1)}}.countdown-container{margin-top:32px;padding-top:24px;border-top:1px solid #e5e5e5}.dark .countdown-container{border-top-color:#333}.countdown-label{font-size:13px;color:#666;margin-bottom:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.05em}.dark .countdown-label{color:#999}#countdown-text{font-family:var(--mono-font);font-weight:600;color:#1a1a1a}.dark #countdown-text{color:#fafafa}.progress-track{width:100%;height:3px;background:#e5e5e5;border-radius:3px;overflow:hidden}.dark .progress-track{background:#333}.progress-bar{height:100%;background:linear-gradient(90deg,#10b981 0%,#059669 100%);border-radius:3px;transition:width 100ms linear;width:0}.minimal-actions{display:flex;gap:12px;margin-top:24px;padding-top:24px;border-top:1px solid #e5e5e5}.dark .minimal-actions{border-top-color:#333}.minimal-button{flex:1;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all 0.2s ease;font-family:var(--system-font);letter-spacing:-0.01em}.minimal-button:active{transform:scale(0.98)}.minimal-button.primary{background:#1a1a1a;color:white}.minimal-button.primary:hover{background:#000}.dark .minimal-button.primary{background:#fafafa;color:#1a1a1a}.dark .minimal-button.primary:hover{background:#fff}.minimal-button.secondary{background:#f5f5f5;color:#666}.minimal-button.secondary:hover{background:#e8e8e8}.dark .minimal-button.secondary{background:#2a2a2a;color:#999}.dark .minimal-button.secondary:hover{background:#333}.minimal-help{font-size:12px;color:#999;margin-top:16px;line-height:1.5}.dark .minimal-help{color:#666}.minimal-error-details{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:12px 16px;margin:20px 0;text-align:left;font-size:13px;line-height:1.6}.dark .minimal-error-details{background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.3)}.minimal-error-details strong{color:#dc2626;display:block;margin-bottom:4px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.05em}.dark .minimal-error-details strong{color:#ef4444}.minimal-error-details code{font-family:var(--mono-font);background:rgba(0,0,0,0.05);padding:2px 6px;border-radius:4px;font-size:12px}.dark .minimal-error-details code{background:rgba(255,255,255,0.1)}@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}.minimal-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}@media (prefers-contrast:high){.minimal-card{border:2px solid currentColor}.minimal-button{border:1px solid currentColor}}</style> <script>      if (window.matchMedia(\"(prefers-color-scheme: dark)\").matches) {         document.documentElement.classList.add(\"dark\");       }       window.addEventListener(\"DOMContentLoaded\", () => {         const checkmark = document.getElementById(\"checkmark\");         if (checkmark) {           setTimeout(() => checkmark.classList.add(\"animate\"), 100);         }       });</script> </head><body class=\"minimal-body\"><div class=\"minimal-card\"><div class=\"success-icon-container\"><svg id=\"checkmark\" class=\"checkmark\" viewBox=\"0 0 52 52\"><circle class=\"checkmark-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" /><path class=\"checkmark-check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" /></svg></div><h1 class=\"minimal-title\">Authorization Successful</h1><p class=\"minimal-subtitle\">You can now return to your application</p></div></body></html>";
+export declare const errorTemplate = "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\" /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /><title>{{ERROR_TITLE}}</title><style>:root{--system-font:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;--mono-font:ui-monospace,SFMono-Regular,\"SF Mono\",Consolas,\"Liberation Mono\",Menlo,monospace}@media (prefers-color-scheme:dark){:root{color-scheme:dark}}.minimal-body{margin:0;padding:0;min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:var(--system-font);background:linear-gradient(180deg,#fafafa 0%,#f0f0f0 100%);color:#1a1a1a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dark .minimal-body{background:linear-gradient(180deg,#0a0a0a 0%,#1a1a1a 100%);color:#fafafa}.minimal-card{background:white;border-radius:16px;padding:48px 40px 40px;max-width:420px;width:90%;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 6px 16px rgba(0,0,0,0.08);animation:fadeUp 0.4s ease-out}.dark .minimal-card{background:#1f1f1f;box-shadow:0 1px 3px rgba(0,0,0,0.2),0 8px 24px rgba(0,0,0,0.4)}.minimal-title{font-size:24px;font-weight:600;margin:0 0 8px;letter-spacing:-0.02em;line-height:1.2}.minimal-subtitle{font-size:15px;color:#666;margin:0 0 32px;line-height:1.5}.dark .minimal-subtitle{color:#999}.success-icon-container{width:56px;height:56px;margin:0 auto 24px}.checkmark{width:56px;height:56px}.checkmark-circle{stroke:#10b981;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:157;stroke-dashoffset:157;fill:none}.checkmark-check{stroke:#10b981;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:48;stroke-dashoffset:48;fill:none}.checkmark.animate .checkmark-circle{animation:stroke 0.6s cubic-bezier(0.65,0,0.45,1) forwards}.checkmark.animate .checkmark-check{animation:stroke 0.3s cubic-bezier(0.65,0,0.45,1) 0.4s forwards}@keyframes stroke{100%{stroke-dashoffset:0}}.error-icon-container{width:56px;height:56px;margin:0 auto 24px;color:#ef4444}.error-icon-container.animate svg{animation:errorPulse 0.5s ease-out,shake 0.4s ease-out 0.3s}.error-icon-container.animate svg circle{stroke-dasharray:63;stroke-dashoffset:63;animation:errorStroke 0.5s cubic-bezier(0.65,0,0.45,1) forwards}.error-icon-container.animate svg path{stroke-dasharray:20;stroke-dashoffset:20;animation:errorStroke 0.4s cubic-bezier(0.65,0,0.45,1) 0.3s forwards}@keyframes errorPulse{0%{transform:scale(0);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes errorStroke{to{stroke-dashoffset:0}}@keyframes shake{0%,100%{transform:translateX(0) scale(1)}25%{transform:translateX(-4px) scale(1)}75%{transform:translateX(4px) scale(1)}}.countdown-container{margin-top:32px;padding-top:24px;border-top:1px solid #e5e5e5}.dark .countdown-container{border-top-color:#333}.countdown-label{font-size:13px;color:#666;margin-bottom:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.05em}.dark .countdown-label{color:#999}#countdown-text{font-family:var(--mono-font);font-weight:600;color:#1a1a1a}.dark #countdown-text{color:#fafafa}.progress-track{width:100%;height:3px;background:#e5e5e5;border-radius:3px;overflow:hidden}.dark .progress-track{background:#333}.progress-bar{height:100%;background:linear-gradient(90deg,#10b981 0%,#059669 100%);border-radius:3px;transition:width 100ms linear;width:0}.minimal-actions{display:flex;gap:12px;margin-top:24px;padding-top:24px;border-top:1px solid #e5e5e5}.dark .minimal-actions{border-top-color:#333}.minimal-button{flex:1;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all 0.2s ease;font-family:var(--system-font);letter-spacing:-0.01em}.minimal-button:active{transform:scale(0.98)}.minimal-button.primary{background:#1a1a1a;color:white}.minimal-button.primary:hover{background:#000}.dark .minimal-button.primary{background:#fafafa;color:#1a1a1a}.dark .minimal-button.primary:hover{background:#fff}.minimal-button.secondary{background:#f5f5f5;color:#666}.minimal-button.secondary:hover{background:#e8e8e8}.dark .minimal-button.secondary{background:#2a2a2a;color:#999}.dark .minimal-button.secondary:hover{background:#333}.minimal-help{font-size:12px;color:#999;margin-top:16px;line-height:1.5}.dark .minimal-help{color:#666}.minimal-error-details{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:12px 16px;margin:20px 0;text-align:left;font-size:13px;line-height:1.6}.dark .minimal-error-details{background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.3)}.minimal-error-details strong{color:#dc2626;display:block;margin-bottom:4px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.05em}.dark .minimal-error-details strong{color:#ef4444}.minimal-error-details code{font-family:var(--mono-font);background:rgba(0,0,0,0.05);padding:2px 6px;border-radius:4px;font-size:12px}.dark .minimal-error-details code{background:rgba(255,255,255,0.1)}@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}.minimal-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}@media (prefers-contrast:high){.minimal-card{border:2px solid currentColor}.minimal-button{border:1px solid currentColor}}</style> <script>      if (window.matchMedia(\"(prefers-color-scheme: dark)\").matches) {         document.documentElement.classList.add(\"dark\");       }       window.addEventListener(\"DOMContentLoaded\", () => {         const errorIcon = document.getElementById(\"error-icon\");         if (errorIcon) {           setTimeout(() => errorIcon.classList.add(\"animate\"), 100);         }       });       document.addEventListener(\"keydown\", (e) => {         if (e.key === \"Escape\") {           window.close();         } else if (e.key === \"Enter\") {           window.location.reload();         }       });</script> </head><body class=\"minimal-body\"><div class=\"minimal-card\"><div class=\"error-icon-container\" id=\"error-icon\">{{ERROR_SVG_ICON}}</div><h1 class=\"minimal-title\">{{ERROR_TITLE}}</h1><p class=\"minimal-subtitle\">{{ERROR_MESSAGE}}</p> {{ERROR_DETAILS}} <div class=\"minimal-actions\"><button onclick=\"window.location.reload()\" class=\"minimal-button primary\" > Try Again </button><button onclick=\"window.close()\" class=\"minimal-button secondary\"> Close </button></div><p class=\"minimal-help\">{{HELP_TEXT}}</p></div></body></html>";
 export declare function renderError(params: {
     error: string;
     error_description?: string;

package/dist/templates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../src/templates.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,eAAO,MAAM,eAAe,qpCAA4mC,CAAC;AAEzoC,eAAO,MAAM,aAAa,8fAA4e,CAAC;AAEvgB,wBAAgB,WAAW,CAAC,MAAM,EAAE;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,MAAM,CAmBT"}
+{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../src/templates.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,eAAO,MAAM,eAAe,uuMAA6qM,CAAC;AAE1sM,eAAO,MAAM,aAAa,4+MAAo7M,CAAC;AAE/8M,wBAAgB,WAAW,CAAC,MAAM,EAAE;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,MAAM,CAsET"}

package/package.json

@@ -1,37 +1,39 @@
 {
   "name": "oauth-callback",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "Simple local OAuth callback server for capturing authorization codes in CLI tools and desktop apps",
   "keywords": [
     "oauth",
+    "oauth2",
     "callback",
+    "authorization",
     "authentication",
     "auth",
-    "bun",
-    "oauth2",
-    "login",
-    "authorization",
-    "web",
-    "handler",
-    "security",
-    "redirect",
     "token",
-    "javascript",
-    "typescript",
-    "rfc6749",
-    "rfc7591",
+    "access-token",
+    "refresh-token",
+    "redirect",
+    "login",
     "openid",
     "oidc",
+    "mcp",
+    "typescript",
+    "javascript",
+    "bun",
     "client",
     "server",
+    "handler",
+    "security",
+    "rfc6749",
+    "rfc7591",
+    "jwt",
+    "bearer",
+    "mcp-client",
+    "web",
     "middleware",
     "express",
     "fastify",
-    "session",
-    "jwt",
-    "bearer",
-    "access-token",
-    "refresh-token"
+    "session"
   ],
   "author": "Konstantin Tarkus <koistya@kriasoft.com>",
   "license": "MIT",
@@ -72,9 +74,10 @@
     "typescript": "^5"
   },
   "devDependencies": {
+    "@modelcontextprotocol/sdk": "^1.17.3",
     "@types/bun": "latest",
-    "typescript": "^5.9.2",
-    "prettier": "^3.6.2"
+    "prettier": "^3.6.2",
+    "typescript": "^5.9.2"
   },
   "prettier": {
     "printWidth": 80,
@@ -87,6 +90,9 @@
     "build:templates": "bun run templates/build.ts",
     "build": "bun run build:templates && bun build ./src/index.ts --outdir=./dist --target=node && tsc --declaration --emitDeclarationOnly --outDir ./dist",
     "prepublishOnly": "bun run build",
-    "test": "bun test"
+    "test": "bun test",
+    "example:demo": "bun run examples/demo.ts",
+    "example:github": "bun run examples/github.ts",
+    "example:notion": "bun run examples/notion.ts"
   }
 }

package/src/errors.ts

@@ -3,7 +3,7 @@
 
 /**
  * Custom error class for OAuth-specific errors
- * 
+ *
  * This error is thrown when the OAuth provider returns an error response
  * (e.g., user denies access, invalid client, etc.). It preserves the
  * original OAuth error details for proper error handling.
@@ -33,7 +33,7 @@ export class OAuthError extends Error {
 
 /**
  * Error thrown when OAuth callback times out
- * 
+ *
  * This error indicates that no OAuth callback was received within the
  * specified timeout period. This could happen if the user doesn't complete
  * the authorization flow or if there are network connectivity issues.
@@ -47,4 +47,4 @@ export class TimeoutError extends Error {
     super(message);
     this.name = "TimeoutError";
   }
-}
+}

package/src/index.ts

@@ -3,7 +3,7 @@
 
 /**
  * @fileoverview OAuth 2.0 authorization code flow handler for Node.js, Deno, and Bun
- * 
+ *
  * This module provides a simple way to handle OAuth 2.0 authorization code flows
  * in command-line applications, desktop apps, and development environments.
  * It creates a temporary local HTTP server to capture the authorization callback.
@@ -21,7 +21,7 @@ export type { GetAuthCodeOptions } from "./types";
 
 /**
  * Get the OAuth authorization code from the authorization URL.
- * 
+ *
  * Creates a temporary local HTTP server to handle the OAuth callback,
  * opens the authorization URL in the user's browser, and waits for the
  * OAuth provider to redirect back with an authorization code.
@@ -32,13 +32,13 @@ export type { GetAuthCodeOptions } from "./types";
  *          and other parameters, or rejects with OAuthError if authorization fails
  * @throws {OAuthError} When OAuth provider returns an error (e.g., access_denied)
  * @throws {Error} For timeout, network errors, or other unexpected failures
- * 
+ *
  * @example
  * ```typescript
  * // Simple usage with URL string
  * const result = await getAuthCode('https://oauth.example.com/authorize?...');
  * console.log('Code:', result.code);
- * 
+ *
  * // Advanced usage with options
  * const result = await getAuthCode({
  *   authorizationUrl: 'https://oauth.example.com/authorize?...',
@@ -51,10 +51,9 @@ export type { GetAuthCodeOptions } from "./types";
 export async function getAuthCode(
   input: GetAuthCodeOptions | string,
 ): Promise<CallbackResult> {
-  const options: GetAuthCodeOptions = typeof input === "string" 
-    ? { authorizationUrl: input } 
-    : input;
-  
+  const options: GetAuthCodeOptions =
+    typeof input === "string" ? { authorizationUrl: input } : input;
+
   const {
     authorizationUrl,
     port = 3000,

package/src/server.ts

@@ -62,14 +62,18 @@ export interface CallbackServer {
  * @param errorHtml - Custom error HTML template with placeholder support
  * @returns Rendered HTML content
  */
-function generateCallbackHTML(params: CallbackResult, successHtml?: string, errorHtml?: string): string {
+function generateCallbackHTML(
+  params: CallbackResult,
+  successHtml?: string,
+  errorHtml?: string,
+): string {
   if (params.error) {
     // Use custom error HTML if provided
     if (errorHtml) {
       return errorHtml
-        .replace(/{{error}}/g, params.error || '')
-        .replace(/{{error_description}}/g, params.error_description || '')
-        .replace(/{{error_uri}}/g, params.error_uri || '');
+        .replace(/{{error}}/g, params.error || "")
+        .replace(/{{error_description}}/g, params.error_description || "")
+        .replace(/{{error_uri}}/g, params.error_uri || "");
     }
     return renderError({
       error: params.error,
@@ -97,12 +101,19 @@ class BunCallbackServer implements CallbackServer {
   private abortHandler?: () => void;
 
   async start(options: ServerOptions): Promise<void> {
-    const { port, hostname = "localhost", successHtml, errorHtml, signal, onRequest } = options;
-    
+    const {
+      port,
+      hostname = "localhost",
+      successHtml,
+      errorHtml,
+      signal,
+      onRequest,
+    } = options;
+
     this.successHtml = successHtml;
     this.errorHtml = errorHtml;
     this.onRequest = onRequest;
-    
+
     // Handle abort signal
     if (signal) {
       if (signal.aborted) {
@@ -116,7 +127,7 @@ class BunCallbackServer implements CallbackServer {
       };
       signal.addEventListener("abort", this.abortHandler);
     }
-    
+
     // @ts-ignore - Bun global not available in TypeScript definitions
     this.server = Bun.serve({
       port,
@@ -130,7 +141,7 @@ class BunCallbackServer implements CallbackServer {
     if (this.onRequest) {
       this.onRequest(request);
     }
-    
+
     const url = new URL(request.url);
 
     if (url.pathname === this.callbackPath) {
@@ -147,10 +158,13 @@ class BunCallbackServer implements CallbackServer {
       }
 
       // Return success or error HTML page
-      return new Response(generateCallbackHTML(params, this.successHtml, this.errorHtml), {
-        status: 200,
-        headers: { "Content-Type": "text/html" },
-      });
+      return new Response(
+        generateCallbackHTML(params, this.successHtml, this.errorHtml),
+        {
+          status: 200,
+          headers: { "Content-Type": "text/html" },
+        },
+      );
     }
 
     return new Response("Not Found", { status: 404 });
@@ -164,12 +178,16 @@ class BunCallbackServer implements CallbackServer {
 
     return new Promise((resolve, reject) => {
       let isResolved = false;
-      
+
       const timer = setTimeout(() => {
         if (!isResolved) {
           isResolved = true;
           this.callbackPromise = undefined;
-          reject(new Error(`OAuth callback timeout after ${timeout}ms waiting for ${path}`));
+          reject(
+            new Error(
+              `OAuth callback timeout after ${timeout}ms waiting for ${path}`,
+            ),
+          );
         }
       }, timeout);
 
@@ -205,7 +223,9 @@ class BunCallbackServer implements CallbackServer {
       this.abortHandler = undefined;
     }
     if (this.callbackPromise) {
-      this.callbackPromise.reject(new Error("Server stopped before callback received"));
+      this.callbackPromise.reject(
+        new Error("Server stopped before callback received"),
+      );
       this.callbackPromise = undefined;
     }
     if (this.server) {
@@ -232,14 +252,21 @@ class DenoCallbackServer implements CallbackServer {
   private abortHandler?: () => void;
 
   async start(options: ServerOptions): Promise<void> {
-    const { port, hostname = "localhost", successHtml, errorHtml, signal, onRequest } = options;
-    
+    const {
+      port,
+      hostname = "localhost",
+      successHtml,
+      errorHtml,
+      signal,
+      onRequest,
+    } = options;
+
     this.successHtml = successHtml;
     this.errorHtml = errorHtml;
     this.onRequest = onRequest;
-    
+
     this.abortController = new AbortController();
-    
+
     // Handle user's abort signal
     if (signal) {
       if (signal.aborted) {
@@ -266,7 +293,7 @@ class DenoCallbackServer implements CallbackServer {
     if (this.onRequest) {
       this.onRequest(request);
     }
-    
+
     const url = new URL(request.url);
 
     if (url.pathname === this.callbackPath) {
@@ -283,10 +310,13 @@ class DenoCallbackServer implements CallbackServer {
       }
 
       // Return success or error HTML page
-      return new Response(generateCallbackHTML(params, this.successHtml, this.errorHtml), {
-        status: 200,
-        headers: { "Content-Type": "text/html" },
-      });
+      return new Response(
+        generateCallbackHTML(params, this.successHtml, this.errorHtml),
+        {
+          status: 200,
+          headers: { "Content-Type": "text/html" },
+        },
+      );
     }
 
     return new Response("Not Found", { status: 404 });
@@ -300,12 +330,16 @@ class DenoCallbackServer implements CallbackServer {
 
     return new Promise((resolve, reject) => {
       let isResolved = false;
-      
+
       const timer = setTimeout(() => {
         if (!isResolved) {
           isResolved = true;
           this.callbackPromise = undefined;
-          reject(new Error(`OAuth callback timeout after ${timeout}ms waiting for ${path}`));
+          reject(
+            new Error(
+              `OAuth callback timeout after ${timeout}ms waiting for ${path}`,
+            ),
+          );
         }
       }, timeout);
 
@@ -341,7 +375,9 @@ class DenoCallbackServer implements CallbackServer {
       this.abortHandler = undefined;
     }
     if (this.callbackPromise) {
-      this.callbackPromise.reject(new Error("Server stopped before callback received"));
+      this.callbackPromise.reject(
+        new Error("Server stopped before callback received"),
+      );
       this.callbackPromise = undefined;
     }
     if (this.abortController) {
@@ -369,12 +405,19 @@ class NodeCallbackServer implements CallbackServer {
   private abortHandler?: () => void;
 
   async start(options: ServerOptions): Promise<void> {
-    const { port, hostname = "localhost", successHtml, errorHtml, signal, onRequest } = options;
-    
+    const {
+      port,
+      hostname = "localhost",
+      successHtml,
+      errorHtml,
+      signal,
+      onRequest,
+    } = options;
+
     this.successHtml = successHtml;
     this.errorHtml = errorHtml;
     this.onRequest = onRequest;
-    
+
     // Handle abort signal
     if (signal) {
       if (signal.aborted) {
@@ -388,7 +431,7 @@ class NodeCallbackServer implements CallbackServer {
       };
       signal.addEventListener("abort", this.abortHandler);
     }
-    
+
     const { createServer } = await import("node:http");
 
     return new Promise((resolve, reject) => {
@@ -449,7 +492,7 @@ class NodeCallbackServer implements CallbackServer {
     if (this.onRequest) {
       this.onRequest(request);
     }
-    
+
     const url = new URL(request.url);
 
     if (url.pathname === this.callbackPath) {
@@ -466,10 +509,13 @@ class NodeCallbackServer implements CallbackServer {
       }
 
       // Return success or error HTML page
-      return new Response(generateCallbackHTML(params, this.successHtml, this.errorHtml), {
-        status: 200,
-        headers: { "Content-Type": "text/html" },
-      });
+      return new Response(
+        generateCallbackHTML(params, this.successHtml, this.errorHtml),
+        {
+          status: 200,
+          headers: { "Content-Type": "text/html" },
+        },
+      );
     }
 
     return new Response("Not Found", { status: 404 });
@@ -483,12 +529,16 @@ class NodeCallbackServer implements CallbackServer {
 
     return new Promise((resolve, reject) => {
       let isResolved = false;
-      
+
       const timer = setTimeout(() => {
         if (!isResolved) {
           isResolved = true;
           this.callbackPromise = undefined;
-          reject(new Error(`OAuth callback timeout after ${timeout}ms waiting for ${path}`));
+          reject(
+            new Error(
+              `OAuth callback timeout after ${timeout}ms waiting for ${path}`,
+            ),
+          );
         }
       }, timeout);
 
@@ -524,7 +574,9 @@ class NodeCallbackServer implements CallbackServer {
       this.abortHandler = undefined;
     }
     if (this.callbackPromise) {
-      this.callbackPromise.reject(new Error("Server stopped before callback received"));
+      this.callbackPromise.reject(
+        new Error("Server stopped before callback received"),
+      );
       this.callbackPromise = undefined;
     }
     if (this.server) {

package/src/templates.ts

@@ -1,35 +1,86 @@
 /**
  * Auto-generated OAuth callback HTML templates
- * Generated from assets/*.html and assets/*.css
- * 
- * To regenerate: bun run assets/build.ts
+ * Generated from templates/*.html and templates/*.css
+ *
+ * To regenerate: bun run templates/build.ts
  */
 
-export const successTemplate = `<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>OAuth - Authorization Successful</title><link rel="stylesheet" href="./styles.css" /><script> // Auto-close window after 3 seconds let countdown = 3; function updateCountdown() { const element = document.getElementById("countdown"); if (element) { if (countdown > 0) { element.textContent = countdown + " second" + (countdown !== 1 ? "s" : ""); countdown--; setTimeout(updateCountdown, 1000); } else { element.innerHTML = '<span class="spinner"></span>Closing window...'; setTimeout(() => window.close(), 500); } } } window.addEventListener("DOMContentLoaded", updateCountdown); </script></head><body><div class="container"><div class="icon success">✓</div><h1>Authorization Successful!</h1><p>Your application has been successfully authorized.</p><p>You can now return to your application to continue.</p><div class="auto-close"><p class="text-muted text-small"> This window will close automatically in </p><div class="countdown" id="countdown">3 seconds</div></div></div></body></html>`;
+export const successTemplate = `<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Authorization Successful</title><style>:root{--system-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;--mono-font:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",Menlo,monospace}@media (prefers-color-scheme:dark){:root{color-scheme:dark}}.minimal-body{margin:0;padding:0;min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:var(--system-font);background:linear-gradient(180deg,#fafafa 0%,#f0f0f0 100%);color:#1a1a1a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dark .minimal-body{background:linear-gradient(180deg,#0a0a0a 0%,#1a1a1a 100%);color:#fafafa}.minimal-card{background:white;border-radius:16px;padding:48px 40px 40px;max-width:420px;width:90%;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 6px 16px rgba(0,0,0,0.08);animation:fadeUp 0.4s ease-out}.dark .minimal-card{background:#1f1f1f;box-shadow:0 1px 3px rgba(0,0,0,0.2),0 8px 24px rgba(0,0,0,0.4)}.minimal-title{font-size:24px;font-weight:600;margin:0 0 8px;letter-spacing:-0.02em;line-height:1.2}.minimal-subtitle{font-size:15px;color:#666;margin:0 0 32px;line-height:1.5}.dark .minimal-subtitle{color:#999}.success-icon-container{width:56px;height:56px;margin:0 auto 24px}.checkmark{width:56px;height:56px}.checkmark-circle{stroke:#10b981;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:157;stroke-dashoffset:157;fill:none}.checkmark-check{stroke:#10b981;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:48;stroke-dashoffset:48;fill:none}.checkmark.animate .checkmark-circle{animation:stroke 0.6s cubic-bezier(0.65,0,0.45,1) forwards}.checkmark.animate .checkmark-check{animation:stroke 0.3s cubic-bezier(0.65,0,0.45,1) 0.4s forwards}@keyframes stroke{100%{stroke-dashoffset:0}}.error-icon-container{width:56px;height:56px;margin:0 auto 24px;color:#ef4444}.error-icon-container.animate svg{animation:errorPulse 0.5s ease-out,shake 0.4s ease-out 0.3s}.error-icon-container.animate svg circle{stroke-dasharray:63;stroke-dashoffset:63;animation:errorStroke 0.5s cubic-bezier(0.65,0,0.45,1) forwards}.error-icon-container.animate svg path{stroke-dasharray:20;stroke-dashoffset:20;animation:errorStroke 0.4s cubic-bezier(0.65,0,0.45,1) 0.3s forwards}@keyframes errorPulse{0%{transform:scale(0);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes errorStroke{to{stroke-dashoffset:0}}@keyframes shake{0%,100%{transform:translateX(0) scale(1)}25%{transform:translateX(-4px) scale(1)}75%{transform:translateX(4px) scale(1)}}.countdown-container{margin-top:32px;padding-top:24px;border-top:1px solid #e5e5e5}.dark .countdown-container{border-top-color:#333}.countdown-label{font-size:13px;color:#666;margin-bottom:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.05em}.dark .countdown-label{color:#999}#countdown-text{font-family:var(--mono-font);font-weight:600;color:#1a1a1a}.dark #countdown-text{color:#fafafa}.progress-track{width:100%;height:3px;background:#e5e5e5;border-radius:3px;overflow:hidden}.dark .progress-track{background:#333}.progress-bar{height:100%;background:linear-gradient(90deg,#10b981 0%,#059669 100%);border-radius:3px;transition:width 100ms linear;width:0}.minimal-actions{display:flex;gap:12px;margin-top:24px;padding-top:24px;border-top:1px solid #e5e5e5}.dark .minimal-actions{border-top-color:#333}.minimal-button{flex:1;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all 0.2s ease;font-family:var(--system-font);letter-spacing:-0.01em}.minimal-button:active{transform:scale(0.98)}.minimal-button.primary{background:#1a1a1a;color:white}.minimal-button.primary:hover{background:#000}.dark .minimal-button.primary{background:#fafafa;color:#1a1a1a}.dark .minimal-button.primary:hover{background:#fff}.minimal-button.secondary{background:#f5f5f5;color:#666}.minimal-button.secondary:hover{background:#e8e8e8}.dark .minimal-button.secondary{background:#2a2a2a;color:#999}.dark .minimal-button.secondary:hover{background:#333}.minimal-help{font-size:12px;color:#999;margin-top:16px;line-height:1.5}.dark .minimal-help{color:#666}.minimal-error-details{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:12px 16px;margin:20px 0;text-align:left;font-size:13px;line-height:1.6}.dark .minimal-error-details{background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.3)}.minimal-error-details strong{color:#dc2626;display:block;margin-bottom:4px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.05em}.dark .minimal-error-details strong{color:#ef4444}.minimal-error-details code{font-family:var(--mono-font);background:rgba(0,0,0,0.05);padding:2px 6px;border-radius:4px;font-size:12px}.dark .minimal-error-details code{background:rgba(255,255,255,0.1)}@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}.minimal-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}@media (prefers-contrast:high){.minimal-card{border:2px solid currentColor}.minimal-button{border:1px solid currentColor}}</style> <script>      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {         document.documentElement.classList.add("dark");       }       window.addEventListener("DOMContentLoaded", () => {         const checkmark = document.getElementById("checkmark");         if (checkmark) {           setTimeout(() => checkmark.classList.add("animate"), 100);         }       });</script> </head><body class="minimal-body"><div class="minimal-card"><div class="success-icon-container"><svg id="checkmark" class="checkmark" viewBox="0 0 52 52"><circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none" /><path class="checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" /></svg></div><h1 class="minimal-title">Authorization Successful</h1><p class="minimal-subtitle">You can now return to your application</p></div></body></html>`;
 
-export const errorTemplate = `<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>OAuth - {{ERROR_TITLE}}</title><link rel="stylesheet" href="./styles.css" /></head><body><div class="container"><div class="icon error">{{ERROR_ICON}}</div><h1>{{ERROR_TITLE}}</h1><p>The authorization process could not be completed.</p> {{ERROR_DETAILS}} <p class="text-muted mt-24">You can close this window and try again.</p></div></body></html>`;
+export const errorTemplate = `<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>{{ERROR_TITLE}}</title><style>:root{--system-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;--mono-font:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",Menlo,monospace}@media (prefers-color-scheme:dark){:root{color-scheme:dark}}.minimal-body{margin:0;padding:0;min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:var(--system-font);background:linear-gradient(180deg,#fafafa 0%,#f0f0f0 100%);color:#1a1a1a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dark .minimal-body{background:linear-gradient(180deg,#0a0a0a 0%,#1a1a1a 100%);color:#fafafa}.minimal-card{background:white;border-radius:16px;padding:48px 40px 40px;max-width:420px;width:90%;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 6px 16px rgba(0,0,0,0.08);animation:fadeUp 0.4s ease-out}.dark .minimal-card{background:#1f1f1f;box-shadow:0 1px 3px rgba(0,0,0,0.2),0 8px 24px rgba(0,0,0,0.4)}.minimal-title{font-size:24px;font-weight:600;margin:0 0 8px;letter-spacing:-0.02em;line-height:1.2}.minimal-subtitle{font-size:15px;color:#666;margin:0 0 32px;line-height:1.5}.dark .minimal-subtitle{color:#999}.success-icon-container{width:56px;height:56px;margin:0 auto 24px}.checkmark{width:56px;height:56px}.checkmark-circle{stroke:#10b981;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:157;stroke-dashoffset:157;fill:none}.checkmark-check{stroke:#10b981;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:48;stroke-dashoffset:48;fill:none}.checkmark.animate .checkmark-circle{animation:stroke 0.6s cubic-bezier(0.65,0,0.45,1) forwards}.checkmark.animate .checkmark-check{animation:stroke 0.3s cubic-bezier(0.65,0,0.45,1) 0.4s forwards}@keyframes stroke{100%{stroke-dashoffset:0}}.error-icon-container{width:56px;height:56px;margin:0 auto 24px;color:#ef4444}.error-icon-container.animate svg{animation:errorPulse 0.5s ease-out,shake 0.4s ease-out 0.3s}.error-icon-container.animate svg circle{stroke-dasharray:63;stroke-dashoffset:63;animation:errorStroke 0.5s cubic-bezier(0.65,0,0.45,1) forwards}.error-icon-container.animate svg path{stroke-dasharray:20;stroke-dashoffset:20;animation:errorStroke 0.4s cubic-bezier(0.65,0,0.45,1) 0.3s forwards}@keyframes errorPulse{0%{transform:scale(0);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes errorStroke{to{stroke-dashoffset:0}}@keyframes shake{0%,100%{transform:translateX(0) scale(1)}25%{transform:translateX(-4px) scale(1)}75%{transform:translateX(4px) scale(1)}}.countdown-container{margin-top:32px;padding-top:24px;border-top:1px solid #e5e5e5}.dark .countdown-container{border-top-color:#333}.countdown-label{font-size:13px;color:#666;margin-bottom:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.05em}.dark .countdown-label{color:#999}#countdown-text{font-family:var(--mono-font);font-weight:600;color:#1a1a1a}.dark #countdown-text{color:#fafafa}.progress-track{width:100%;height:3px;background:#e5e5e5;border-radius:3px;overflow:hidden}.dark .progress-track{background:#333}.progress-bar{height:100%;background:linear-gradient(90deg,#10b981 0%,#059669 100%);border-radius:3px;transition:width 100ms linear;width:0}.minimal-actions{display:flex;gap:12px;margin-top:24px;padding-top:24px;border-top:1px solid #e5e5e5}.dark .minimal-actions{border-top-color:#333}.minimal-button{flex:1;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all 0.2s ease;font-family:var(--system-font);letter-spacing:-0.01em}.minimal-button:active{transform:scale(0.98)}.minimal-button.primary{background:#1a1a1a;color:white}.minimal-button.primary:hover{background:#000}.dark .minimal-button.primary{background:#fafafa;color:#1a1a1a}.dark .minimal-button.primary:hover{background:#fff}.minimal-button.secondary{background:#f5f5f5;color:#666}.minimal-button.secondary:hover{background:#e8e8e8}.dark .minimal-button.secondary{background:#2a2a2a;color:#999}.dark .minimal-button.secondary:hover{background:#333}.minimal-help{font-size:12px;color:#999;margin-top:16px;line-height:1.5}.dark .minimal-help{color:#666}.minimal-error-details{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:12px 16px;margin:20px 0;text-align:left;font-size:13px;line-height:1.6}.dark .minimal-error-details{background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.3)}.minimal-error-details strong{color:#dc2626;display:block;margin-bottom:4px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.05em}.dark .minimal-error-details strong{color:#ef4444}.minimal-error-details code{font-family:var(--mono-font);background:rgba(0,0,0,0.05);padding:2px 6px;border-radius:4px;font-size:12px}.dark .minimal-error-details code{background:rgba(255,255,255,0.1)}@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}.minimal-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}@media (prefers-contrast:high){.minimal-card{border:2px solid currentColor}.minimal-button{border:1px solid currentColor}}</style> <script>      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {         document.documentElement.classList.add("dark");       }       window.addEventListener("DOMContentLoaded", () => {         const errorIcon = document.getElementById("error-icon");         if (errorIcon) {           setTimeout(() => errorIcon.classList.add("animate"), 100);         }       });       document.addEventListener("keydown", (e) => {         if (e.key === "Escape") {           window.close();         } else if (e.key === "Enter") {           window.location.reload();         }       });</script> </head><body class="minimal-body"><div class="minimal-card"><div class="error-icon-container" id="error-icon">{{ERROR_SVG_ICON}}</div><h1 class="minimal-title">{{ERROR_TITLE}}</h1><p class="minimal-subtitle">{{ERROR_MESSAGE}}</p> {{ERROR_DETAILS}} <div class="minimal-actions"><button onclick="window.location.reload()" class="minimal-button primary" > Try Again </button><button onclick="window.close()" class="minimal-button secondary"> Close </button></div><p class="minimal-help">{{HELP_TEXT}}</p></div></body></html>`;
 
 export function renderError(params: {
   error: string;
   error_description?: string;
   error_uri?: string;
 }): string {
-  const errorTitle = params.error === 'access_denied' ? 'Access Denied' : 'Authorization Failed';
-  const errorIcon = params.error === 'access_denied' ? '🚫' : '⚠️';
-  
-  let errorDetails = '';
+  // Determine error title and message based on error type
+  let errorTitle = "Authorization Failed";
+  let errorMessage = "The authorization process could not be completed.";
+  let helpText = "If the problem persists, please contact support.";
+  let errorSvgIcon = "";
+
+  switch (params.error) {
+    case "access_denied":
+      errorTitle = "Access Denied";
+      errorMessage = "You have denied access to the application.";
+      helpText = 'Click "Try Again" to restart the authorization process.';
+      errorSvgIcon = `
+        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Access denied icon">
+          <path d="M8 8l8 8M16 8l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>`;
+      break;
+    case "invalid_request":
+      errorTitle = "Invalid Request";
+      errorMessage =
+        "The authorization request was malformed or missing required parameters.";
+      errorSvgIcon = `
+        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Invalid request icon">
+          <path d="M12 8v4M12 16h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>`;
+      break;
+    case "unauthorized_client":
+      errorTitle = "Unauthorized Client";
+      errorMessage =
+        "This application is not authorized to use this authentication method.";
+      errorSvgIcon = `
+        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Unauthorized icon">
+          <path d="M12 11V7a3 3 0 00-6 0v4m-1 0h8a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6a1 1 0 011-1z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>`;
+      break;
+    case "server_error":
+      errorTitle = "Server Error";
+      errorMessage =
+        "The authorization server encountered an unexpected error.";
+      helpText = "Please wait a moment and try again.";
+      errorSvgIcon = `
+        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Server error icon">
+          <path d="M12 9v6m0 4h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>`;
+      break;
+    default:
+      errorSvgIcon = `
+        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Warning icon">
+          <path d="M12 9v4m0 4h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>`;
+  }
+
+  let errorDetails = "";
   if (params.error_description || params.error) {
     errorDetails = `
-      <div class="error-details">
-        <strong>Error Details:</strong>
+      <div class="minimal-error-details">
+        <strong>Error Code</strong>
         <code>${params.error}</code>
-        ${params.error_description ? `<p class="mt-12">${params.error_description}</p>` : ''}
-        ${params.error_uri ? `<p class="mt-8"><a href="${params.error_uri}" target="_blank">More information →</a></p>` : ''}
+        ${params.error_description ? `<p>${params.error_description}</p>` : ""}
+        ${params.error_uri ? `<p><a href="${params.error_uri}" target="_blank">More information →</a></p>` : ""}
       </div>`;
   }
 
   return errorTemplate
     .replace(/{{ERROR_TITLE}}/g, errorTitle)
-    .replace('{{ERROR_ICON}}', errorIcon)
-    .replace('{{ERROR_DETAILS}}', errorDetails);
+    .replace("{{ERROR_ICON}}", "⚠️") // Fallback for old template
+    .replace("{{ERROR_SVG_ICON}}", errorSvgIcon)
+    .replace("{{ERROR_MESSAGE}}", errorMessage)
+    .replace("{{ERROR_DETAILS}}", errorDetails)
+    .replace("{{HELP_TEXT}}", helpText);
 }

package/src/types.ts

@@ -5,70 +5,70 @@
  * Configuration options for OAuth authorization code flow
  */
 export interface GetAuthCodeOptions {
-  /** 
+  /**
    * OAuth authorization URL that the user will be redirected to.
    * Should include all necessary query parameters like client_id, redirect_uri, etc.
    */
   authorizationUrl: string;
-  
-  /** 
+
+  /**
    * Port for the local callback server. Make sure this matches the
    * redirect_uri registered with your OAuth provider.
-   * @default 3000 
+   * @default 3000
    */
   port?: number;
-  
-  /** 
+
+  /**
    * Hostname to bind the server to. Should typically be "localhost" or "127.0.0.1"
    * for security reasons to prevent external access.
-   * @default "localhost" 
+   * @default "localhost"
    */
   hostname?: string;
-  
-  /** 
+
+  /**
    * URL path for the OAuth callback. Must match the path in your registered
    * redirect_uri with the OAuth provider.
-   * @default "/callback" 
+   * @default "/callback"
    */
   callbackPath?: string;
-  
-  /** 
+
+  /**
    * Timeout in milliseconds to wait for OAuth callback.
    * If no callback is received within this time, the operation will fail.
-   * @default 30000 
+   * @default 30000
    */
   timeout?: number;
-  
-  /** 
+
+  /**
    * Whether to automatically open the authorization URL in the user's default browser.
    * Set to false for testing or when you want to handle browser opening manually.
-   * @default true 
+   * @default true
    */
   openBrowser?: boolean;
-  
-  /** 
+
+  /**
    * Custom HTML content to display when authorization is successful.
    * If not provided, a default success page with auto-close functionality is used.
    */
   successHtml?: string;
-  
-  /** 
+
+  /**
    * Custom HTML template to display when authorization fails.
    * Supports placeholders: {{error}}, {{error_description}}, {{error_uri}}
    * If not provided, a default error page is used.
    */
   errorHtml?: string;
-  
-  /** 
+
+  /**
    * AbortSignal for cancellation support. Allows you to cancel the
    * OAuth flow programmatically (e.g., on user request or timeout).
    */
   signal?: AbortSignal;
-  
-  /** 
+
+  /**
    * Callback function fired when any HTTP request is received by the server.
    * Useful for logging, debugging, or custom request handling.
    * @param req - The incoming HTTP request
    */
   onRequest?: (req: Request) => void;
-}
+}