ai-auth
Version:
Complete Auth-Agent SDK - Agent authentication for AI developers + OAuth client integration for website developers
107 lines • 4.43 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SignInWithAuthAgent = SignInWithAuthAgent;
const react_1 = __importDefault(require("react"));
/**
* Official "Sign in with Auth-Agent" button component
*
* This button enforces Auth-Agent branding standards and cannot be customized
* beyond width and height. This ensures consistent user experience across all
* integrations.
*
* Features:
* - Enforced branding (logo, colors, text)
* - Custom width and height
* - OAuth 2.1 compliant with PKCE
* - Automatic redirect handling
*
* @example
* ```tsx
* <SignInWithAuthAgent
* clientId="your_client_id"
* redirectUri="https://yourapp.com/auth/callback"
* width={300}
* height={50}
* />
* ```
*/
function SignInWithAuthAgent({ clientId, redirectUri, authServerUrl = 'https://auth-agent.com', scope = 'openid profile email', width = 280, height = 48, state, codeChallenge, codeChallengeMethod = 'S256', onClick, className, }) {
const handleClick = () => {
if (onClick) {
onClick();
}
// Build OAuth authorization URL
const params = new URLSearchParams({
client_id: clientId,
redirect_uri: redirectUri,
response_type: 'code',
scope: scope,
});
if (state) {
params.set('state', state);
}
if (codeChallenge) {
params.set('code_challenge', codeChallenge);
params.set('code_challenge_method', codeChallengeMethod);
}
const authUrl = `${authServerUrl}/oauth2/authorize?${params.toString()}`;
// Redirect to Auth-Agent
window.location.href = authUrl;
};
// Enforced button styles (cannot be overridden)
const buttonStyle = {
// Size (customizable)
width: `${width}px`,
height: `${height}px`,
// Enforced branding
backgroundColor: '#6366f1',
color: '#ffffff',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
fontSize: `${Math.max(14, height * 0.3)}px`,
fontWeight: 600,
border: 'none',
borderRadius: `${height * 0.15}px`,
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: `${height * 0.2}px`,
padding: `0 ${height * 0.4}px`,
transition: 'all 0.2s ease',
boxShadow: '0 2px 8px rgba(99, 102, 241, 0.3)',
outline: 'none',
// Prevent text selection
userSelect: 'none',
WebkitUserSelect: 'none',
};
const hoverStyle = {
backgroundColor: '#4f46e5',
transform: 'translateY(-2px)',
boxShadow: '0 4px 12px rgba(99, 102, 241, 0.4)',
};
const activeStyle = {
transform: 'translateY(0)',
boxShadow: '0 2px 6px rgba(99, 102, 241, 0.3)',
};
const [isHovered, setIsHovered] = react_1.default.useState(false);
const [isActive, setIsActive] = react_1.default.useState(false);
const finalStyle = {
...buttonStyle,
...(isHovered ? hoverStyle : {}),
...(isActive ? activeStyle : {}),
};
return (react_1.default.createElement("button", { type: "button", onClick: handleClick, className: className, style: finalStyle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => {
setIsHovered(false);
setIsActive(false);
}, onMouseDown: () => setIsActive(true), onMouseUp: () => setIsActive(false), "aria-label": "Sign in with Auth-Agent" },
react_1.default.createElement("svg", { width: height * 0.5, height: height * 0.5, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
react_1.default.createElement("path", { d: "M12 2L2 7L12 12L22 7L12 2Z", fill: "currentColor", opacity: "0.9" }),
react_1.default.createElement("path", { d: "M2 17L12 22L22 17V12L12 17L2 12V17Z", fill: "currentColor", opacity: "0.7" }),
react_1.default.createElement("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" })),
react_1.default.createElement("span", null, "Sign in with Auth-Agent")));
}
exports.default = SignInWithAuthAgent;
//# sourceMappingURL=Button.js.map