) => {\n console.error('Login failed:', event.detail);\n };\n\n const handleLogout = async () => {\n await configRef.current?.logout();\n };\n\n const getToken = async () => {\n const token = await configRef.current?.getAccessToken();\n console.log('Access token:', token);\n };\n\n return (\n \n \n\n \n\n \n \n
\n );\n}\n\nexport default App;\n```\n\n### Vue\n\n```bash\nnpm install @larva.io/webcomponents-cognito-login\n```\n\n```vue\n\n \n \n\n \n\n \n \n
\n\n\n\n```\n\n## Components\n\n### Core Components\n\n#### ``\nConfiguration component for AWS Cognito settings. Must be included once in your app.\n\n**Properties:**\n- `cognito-region` - AWS region (e.g., \"us-east-1\")\n- `cognito-pool-id` - Cognito User Pool ID\n- `cognito-client-id` - Cognito App Client ID\n- `storage-type` - Storage type: \"local\" or \"session\" (default: \"session\")\n\n**Methods:**\n- `getAccessToken()` - Get the current access token\n- `logout(global?)` - Logout the user\n- `changePassword(oldPassword, newPassword)` - Change user password\n- `setStorage(storage)` - Set custom storage implementation\n\n**Events:**\n- `logoutDone` - Emitted when logout completes\n\n---\n\n#### ``\nComplete login form with username/email/phone input and password.\n\n**Properties:**\n- `cognito-username-attribute` - Input type: \"any\" | \"email\" | \"phone\" | \"username\" (default: \"any\")\n- `auth-flow-type` - Authentication flow: \"USER_SRP_AUTH\" | \"USER_PASSWORD_AUTH\" | \"CUSTOM_WITH_SRP\" | \"CUSTOM_WITHOUT_SRP\"\n- `show-remember-me` - Show remember me checkbox (default: false)\n- `remember-me-value` - Default remember me value (default: true)\n- `show-forgot-password-link` - Show forgot password link (default: true)\n- `disable-username` - Disable username field (default: false)\n- `username` - Pre-fill username\n- `show-back` - Show back button (default: false)\n\n**Customizable Text Properties:**\n- `username-text`, `password-text`, `login-text`, `forget-password-text`, `remember-me-text`, etc.\n\n**Events:**\n- `loginDone` - Login successful (detail: username)\n- `loginError` - Login failed (detail: error message)\n- `loading` - Loading state changed (detail: boolean)\n- `rememberMe` - Remember me changed (detail: boolean)\n- `back` - Back button clicked\n\n---\n\n#### ``\nSmart username input that adapts to email, phone, or username input with country code selection for phone numbers.\n\n**Properties:**\n- `type` - Input type: \"any\" | \"email\" | \"phone\" | \"username\" (default: \"any\")\n- `value` - Input value\n- `label` - Input label\n- `disabled` - Disabled state\n\n**Events:**\n- `usernameInput` - Value changed (detail: username string)\n\n---\n\n#### ``\nPassword recovery flow component.\n\n**Properties:**\n- `cognito-username-attribute` - Username attribute type\n- Various text customization properties\n\n**Events:**\n- `done` - Recovery completed\n- `error` - Recovery error\n- `back` - Back button clicked\n\n---\n\n### UI Components\n\n#### ``\nStyled button component.\n\n**Properties:**\n- `color` - Button color: \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"light\" | \"dark\" | \"medium\" | \"tertiary\"\n- `type` - Button type: \"button\" | \"submit\" | \"reset\"\n- `disabled` - Disabled state\n\n---\n\n#### ``\nStyled input field component.\n\n**Properties:**\n- `type` - Input type (text, email, tel, password, etc.)\n- `label` - Input label\n- `value` - Input value\n- `autocomplete` - Autocomplete attribute\n- `disabled` - Disabled state\n- `label-position` - Label position: \"stacked\" | \"floating\" | \"fixed\"\n\n---\n\n#### ``\nCountry flag icon component (bundled SVGs).\n\n**Properties:**\n- `iso` - ISO country code (ee, fi, lv, lt, dk, se, pl, ru, ch, il)\n- `squared` - Use 1:1 aspect ratio (default: false, uses 4:3)\n\n---\n\n#### ``\nIcon component (bundled SVGs).\n\n**Properties:**\n- `icon` - Icon name: \"at\" | \"globe\"\n\n## Configuration\n\n### Custom Storage\n\nYou can provide custom storage implementation:\n\n```javascript\nclass CustomStorage {\n setItem(key, value) { /* ... */ }\n getItem(key) { /* ... */ }\n removeItem(key) { /* ... */ }\n clear() { /* ... */ }\n async sync() { /* ... */ }\n}\n\nconst storage = new CustomStorage();\nconst config = document.querySelector('lar-cognito-config');\nawait config.setStorage(storage);\n```\n\n### Theming\n\nCustomize appearance using CSS variables:\n\n```css\n:root {\n /* Background colors */\n --lar-background-color: #FFFFFF;\n --lar-background-color-step-50: #f2f2f2;\n --lar-background-color-step-100: #e5e5e5;\n /* ... step-150 through step-1000 */\n\n /* Text colors */\n --lar-text-color: #000000;\n --lar-text-color-step-50: #0c0c0c;\n --lar-text-color-step-100: #191919;\n /* ... step-150 through step-1000 */\n\n /* Icon sizes */\n --lar-icon-size-small: 1rem;\n}\n```\n\n## Documentation\n\nFor detailed documentation, visit [docs.fentrica.com](https://docs.fentrica.com)\n\n## License\n\n[Attribution-NoDerivatives 4.0 International](https://unpkg.com/@larva.io/webcomponents/LICENSE.md)\n\n## Built With\n\n- [StencilJS](https://stenciljs.com/) - Web Component Compiler\n- [AWS Amplify](https://aws.amazon.com/amplify/) - AWS Cognito Integration\n\n---\n\n© Fentrica - http://fentrica.com\n","readmeFilename":"readme.md"}