reclaim-identity-js

v1.0.5

Published

23 days ago

Reclaim Identity is a JavaScript library for integrating Reclaim Protocol authentication into browser applications. It provides a simple interface for handling user authentication, including sign-in, sign-out, and monitoring authentication state changes.

Downloads

387

0High
0Medium
0Low

dwik-reclaim

Reclaim Identity

Features

Simple API for authentication operations
Event-based auth state changes
Secure token handling

Installation

NPM

npm install reclaim-identity-js

CDN

You can use Identity Js directly from a CDN via a script tag:

<script src="https://unpkg.com/[email protected]/dist/reclaimAuth.min.js"></script>

Or, if you prefer jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/reclaimAuth.min.js"></script>

Usage

Initialization

<script src="https://unpkg.com/[email protected]/dist/reclaimAuth.min.js"></script>
<script>
    const clientId = 'your-client-id';
    const redirectUri = 'your-redirect-uri';
    const reclaimAuth = getReclaimAuth(clientId, redirectUri);
</script>

Sign In

reclaimAuth.signIn()
  .then(user => {
    console.log('Signed in user:', user);
  })
  .catch(error => {
    console.error('Sign in error:', error);
  });

Sign Out

reclaimAuth.signOut()
  .then(() => {
    console.log('User signed out successfully');
  })
  .catch(error => {
    console.error('Sign out error:', error);
  });

Get Current User

const user = reclaimAuth.getCurrentUser();
if (user) {
  console.log('Current user:', user);
} else {
  console.log('No user is currently signed in');
}

Listen for Auth State Changes

reclaimAuth.onAuthStateChanged(user => {
  if (user) {
    console.log('User is signed in:', user);
  } else {
    console.log('User is signed out');
  }
});

Browser Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ReclaimAuth Demo</title>
</head>
<body>
    <h1>ReclaimAuth Demo</h1>
    <button id="signInButton">Sign In</button>
    <button id="signOutButton">Sign Out</button>
    <div id="userInfo"></div>

    <script src="https://unpkg.com/[email protected]/dist/reclaimAuth.min.js"></script>
    <script>
        const clientId = 'your-client-id';
        const redirectUri = 'your-redirect-uri';
        const reclaimAuth = getReclaimAuth(clientId, redirectUri);

        document.getElementById('signInButton').addEventListener('click', () => {
            reclaimAuth.signIn()
                .then(user => {
                    console.log('Signed in user:', user);
                    document.getElementById('userInfo').textContent = JSON.stringify(user);
                })
                .catch(error => {
                    console.error('Sign in error:', error);
                });
        });

        document.getElementById('signOutButton').addEventListener('click', () => {
            reclaimAuth.signOut()
                .then(() => {
                    console.log('User signed out successfully');
                    document.getElementById('userInfo').textContent = 'No user signed in';
                })
                .catch(error => {
                    console.error('Sign out error:', error);
                });
        });

        reclaimAuth.onAuthStateChanged(user => {
            if (user) {
                console.log('User is signed in:', user);
            } else {
                console.log('User is signed out');
            }
        });
    </script>
</body>
</html>

Important Notes

Always keep your clientId and redirectUri secure and never expose them in client-side code in production environments.
The library uses the fetch API, which is natively available in modern browsers.

Building from Source

If you want to build the library from source:

Clone the repository
Install dependencies: npm install
Build the library: npm run build

This will create a dist/reclaimAuth.min.js file that can be used in browser environments.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you encounter any issues or have questions, please email [email protected]