Reclaim Identity
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.
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/reclaim-identity-js@1.0.4/dist/reclaimAuth.min.js"></script>
Or, if you prefer jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/reclaim-identity-js@1.0.4/dist/reclaimAuth.min.js"></script>
Usage
Initialization
<script src="https://unpkg.com/reclaim-identity-js@1.0.4/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/reclaim-identity-js@1.0.4/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 dwik@creatoros.co