Implement BundleUp Authentication Plugin with Backend and Frontend Components

[Copilot]

This PR implements a comprehensive authentication plugin for the BundleUp JavaScript SDK that provides both backend token management and frontend popup-based user authentication.

Backend Component (@bundleup/common)

Added authentication token request functionality to the core BundleUpCore class:

const bundleUp = new BundleUpCore({
  apiKey: 'your-api-key',
  debug: true,
});

// Request authentication token from backend
const token = await bundleUp.requestAuthToken('integration-123', 'external-456');

Implementation details:

• Makes POST request to https://auth.bundleup.io/authorize
• Includes API key in Authorization header (Bearer {apiKey})
• Sends integrationId and externalId in request body
• Comprehensive error handling for missing API keys and network failures
• Added TypeScript interfaces for request/response types

Frontend Component (@bundleup/react)

Added popup-based authentication for React applications with multiple integration patterns:

// Using React hooks (recommended)
const { authenticate, authenticateWithToken, requestToken } = useBundleUpAuth({
  apiKey: 'your-api-key',
  debug: true,
});

// Complete authentication flow
await authenticate('integration-123', 'external-456');

// Or step-by-step control
const token = await requestToken('integration-123', 'external-456');
await authenticateWithToken(token);

Key features:

• Opens popup window to https://auth.bundleup.io/{token}
• Secure message passing with origin validation
• Automatic cleanup of event listeners and intervals
• Handles popup blocking, user cancellation, and authentication errors
• Browser environment detection for SSR compatibility

Authentication Flow

1. Backend Request: Plugin requests token from https://auth.bundleup.io/authorize
2. Popup Window: Opens authentication popup with received token
3. User Authentication: User completes authentication in popup
4. Callback Handling: Popup redirects to callback page that posts success/error message
5. Promise Resolution: Main window receives message and resolves/rejects accordingly

Security & Error Handling

• Origin Validation: Only accepts messages from https://auth.bundleup.io
• API Key Validation: Requires valid API key for backend requests
• Comprehensive Error Handling: Covers network failures, popup blocking, user cancellation
• Resource Cleanup: Automatic cleanup of event listeners and timers

TypeScript Support

Full TypeScript support with proper type definitions for all APIs, including new authentication interfaces and method signatures.

Files Modified:

• packages/common/src/index.ts - Added requestAuthToken method
• packages/common/src/types.ts - Added authentication interfaces
• packages/react/src/index.ts - Added popup authentication and React hooks
• packages/react/tsconfig.json - Added DOM types for browser APIs

All packages build successfully and maintain backward compatibility with existing functionality.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• auth.bundleup.io
  • Triggering command: node /tmp/test-auth-backend.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.