npm package: @mogaland/cognito-auth
Description: AWS Cognito authentication web component with Google and Apple OAuth support
Author: Mogaland
Latest version: 0.1.2

# @mogaland/cognito-auth

A standalone AWS Cognito authentication web component built with Lit. Supports email/password authentication, Google OAuth, Apple OAuth, and all standard Cognito flows.

## Features

- ✅ Email/password authentication
- ✅ Google OAuth integration
- ✅ Apple OAuth integration
- ✅ User registration with email verification
- ✅ Password reset functionality
- ✅ Resend confirmation codes
- ✅ Fully customizable styling with CSS custom properties
- ✅ TypeScript support
- ✅ Framework agnostic (works with React, Vue, Angular, vanilla JS)

## Installation

```bash
npm install @mogaland/cognito-auth
```

## Usage

### Basic Setup

```html
<!DOCTYPE html>
<html>
    <head>
        <script type="module">
            import '@mogaland/cognito-auth';

            const cognitoConfig = {
                userPoolId: 'eu-central-1_xxxxxxxxx',
                userPoolClientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
                cognitoDomain: 'your-domain.auth.eu-central-1.amazoncognito.com',
                redirectSignIn: ['http://localhost:3000/callback'],
                redirectSignOut: ['http://localhost:3000/'],
                responseType: 'code',
            };

            document.querySelector('cognito-auth').config = cognitoConfig;
        </script>
    </head>
    <body>
        <cognito-auth source="my-app"></cognito-auth>
    </body>
</html>
```

### React Example

```tsx
import '@mogaland/cognito-auth';
import { CognitoAuthConfig } from '@mogaland/cognito-auth';

const config: CognitoAuthConfig = {
    userPoolId: 'eu-central-1_xxxxxxxxx',
    userPoolClientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
    cognitoDomain: 'your-domain.auth.eu-central-1.amazoncognito.com',
    redirectSignIn: ['http://localhost:3000/callback'],
    redirectSignOut: ['http://localhost:3000/'],
    responseType: 'code',
};

function App() {
    return (
        <div>
            <cognito-auth source="my-react-app" config={config} />
        </div>
    );
}
```

### Vue Example

```vue
<template>
    <cognito-auth source="my-vue-app" :config="cognitoConfig" />
</template>

<script>
import '@mogaland/cognito-auth';

export default {
    data() {
        return {
            cognitoConfig: {
                userPoolId: 'eu-central-1_xxxxxxxxx',
                userPoolClientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
                cognitoDomain: 'your-domain.auth.eu-central-1.amazoncognito.com',
                redirectSignIn: ['http://localhost:3000/callback'],
                redirectSignOut: ['http://localhost:3000/'],
                responseType: 'code',
            },
        };
    },
};
</script>
```

## Configuration

| Property           | Type              | Required | Description                           |
| ------------------ | ----------------- | -------- | ------------------------------------- |
| `userPoolId`       | string            | ✅       | Your Cognito User Pool ID             |
| `userPoolClientId` | string            | ✅       | Your Cognito User Pool Client ID      |
| `cognitoDomain`    | string            | ✅       | Your Cognito domain                   |
| `redirectSignIn`   | string[]          | ❌       | OAuth redirect URLs for sign in       |
| `redirectSignOut`  | string[]          | ❌       | OAuth redirect URLs for sign out      |
| `responseType`     | 'code' \| 'token' | ❌       | OAuth response type (default: 'code') |

## Styling

Customize the appearance using CSS custom properties:

```css
cognito-auth {
    --cognito-auth-primary-color: #007bff;
    --cognito-auth-secondary-color: #6c757d;
    --cognito-auth-google-color: #db4437;
    --cognito-auth-apple-color: #000;
    --cognito-auth-font-family: 'Inter', sans-serif;
    --cognito-auth-text-color: #333;
    --cognito-auth-success-color: #155724;
    --cognito-auth-error-color: #721c24;
    --cognito-auth-border-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
    --cognito-auth-border-radius: 8px;
    --cognito-auth-input-padding: 12px;
}
```

## Events

The component dispatches custom events:

```javascript
document.querySelector('cognito-auth').addEventListener('auth-success', (event) => {
    console.log('User signed in:', event.detail);
});

document.querySelector('cognito-auth').addEventListener('auth-error', (event) => {
    console.log('Auth error:', event.detail);
});
```

## AWS Cognito Setup

1. Create a Cognito User Pool
2. Configure OAuth providers (Google, Apple)
3. Set up your domain
4. Configure callback URLs

For detailed setup instructions, see our [AWS Cognito Setup Guide](https://github.com/your-org/cognito-auth/docs/cognito-setup.md).

## License

MIT

## Contributing

Contributions welcome! Please read our [Contributing Guide](CONTRIBUTING.md).