keysako-identity v1.0.5

Keysako Connect

A simple and customizable authentication button for Keysako identity provider.

Installation

Via NPM

npm install keysako-identity

// ESM
import 'keysako-identity';

// CommonJS
require('keysako-identity');

Via CDN

For UMD (Universal Module Definition):

Basic usage:

<script src="https://cdn.keysako.com/v1/keysako-connect.min.js"></script>

Recommended secure usage:

<script 
    src="https://cdn.keysako.com/v1/keysako-connect.min.js"
    integrity="sha384-${{ env.CDN_HASH }}"
    crossorigin="anonymous">
</script>

For ES Module:

Basic usage:

<script type="module" src="https://cdn.keysako.com/v1/keysako-connect.esm.js"></script>

Recommended secure usage:

<script 
    type="module" 
    src="https://cdn.keysako.com/v1/keysako-connect.esm.js"
    integrity="sha384-${{ env.CDN_HASH }}"
    crossorigin="anonymous">
</script>

Security Best Practices

While the integrity and crossorigin attributes are optional, we strongly recommend using them:

• integrity: Ensures the file hasn't been tampered with by verifying its hash
• crossorigin="anonymous": Ensures proper CORS handling when loading the script from our CDN

Verifying Package Integrity

Each release includes a checksums.txt file containing SHA-384 hashes for all distributed files. You can find these files in:

• The npm package under dist/v1/checksums.txt
• The CDN at https://cdn.keysako.com/v1/checksums.txt
• The GitHub release assets

To verify a file's integrity: 1. Download the file you want to verify 2. Calculate its SHA-384 hash:

cat filename | openssl dgst -sha384 -binary | openssl base64 -A

3. Compare the result with the hash in checksums.txt

Basic Usage

<keysako-connect
    client-id="your-client-id"
    redirect-uri="your-redirect-uri">
</keysako-connect>

Attributes

Events

The button emits the following custom events:

Handling Events

You can listen to these events in two ways:

1. Using the callback attribute:

<keysako-connect
    client-id="your-client-id"
    redirect-uri="your-redirect-uri"
    callback="handleAuth">
</keysako-connect>

<script>
function handleAuth(response) {
    if (response.success) {
        console.log('Authentication successful:', response.data);
        if (response.hasRequiredAge) {
            console.log('Age requirement met');
        }
    } else {
        console.error('Authentication failed:', response.error);
    }
}
</script>

2. Using event listeners:

<keysako-connect
    id="keysako-button"
    client-id="your-client-id"
    redirect-uri="your-redirect-uri">
</keysako-connect>

<script>
const button = document.getElementById('keysako-button');

button.addEventListener('keysako:auth_complete', (event) => {
    const { success, token, hasRequiredAge, error } = event.detail;
    if (success) {
        console.log('Authentication successful:', token);
    } else {
        console.error('Authentication failed:', error);
    }
});

button.addEventListener('keysako:tokens_updated', (event) => {
    console.log('Token updated:', event.detail.token);
});

button.addEventListener('keysako:tokens_cleared', () => {
    console.log('Tokens cleared');
});
</script>

Examples

Basic Authentication Button

<keysako-connect
    client-id="your-client-id"
    redirect-uri="your-redirect-uri">
</keysako-connect>

Customized Button

<keysako-connect
    client-id="your-client-id"
    redirect-uri="your-redirect-uri"
    theme="light"
    age="18"
    shape="sharp"
    logo-only>
</keysako-connect>

With Callback

<keysako-connect
    client-id="your-client-id"
    redirect-uri="your-redirect-uri"
    callback="handleAuth">
</keysako-connect>

<script>
function handleAuth(response) {
    if (response.success) {
        console.log('Authentication successful:', response.data);
    } else {
        console.error('Authentication failed:', response.error);
    }
}
</script>

Browser Support

The library is compatible with all modern browsers that support Web Components:

• Chrome
• Firefox
• Safari
• Edge

Development

To build the library locally:

1. Clone the repository

git clone https://github.com/keysako/keysako-js.git
cd keysako-js

2. Install dependencies

npm install

3. Build the library

npm run build

License

MIT License - see LICENSE file for details.