BioLogreen Vue.js SDK

The official Vue.js SDK for the Bio-Logreen Facial Authentication API.

This SDK provides a headless Vue Composable (useBioLogreen) that manages camera access, real-time face detection, and API communication, giving you the flexibility to build a completely custom UI for your login and signup flows. (IT PROVIDES NO UI, SO YOU CAN CUSTOMISE YOUR UI)

Features

Headless by Design: Provides all the logic; you provide the UI.

Fully Reactive: Built with Vue's Composition API, providing reactive state (isLoading, faceDetected, etc.).

Promise-Based API: Modern async/await friendly functions (signupWithFace, loginWithFace) for clean component logic.

TypeScript Support: Fully typed for a superior developer experience.

Installation

npm install biologreen-vue-sdk face-api.js

Setup & Configuration

This SDK relies on face-api.js for face detection, which requires model files to be available in your application.

Download AI Models: You must download the tiny_face_detector model weights from the face-api.js repository.

Host the Models: Place the downloaded model files in your project's /public/models directory. The SDK will automatically fetch them from this location.

Quick Start: Usage Example

Here is a complete example of a login component that uses the useBioLogreen composable.

API Reference

useBioLogreen({ apiKey, videoRef, baseURL })

Parameters

apiKey (string, required): Your project's secret API key.

videoRef (Ref<HTMLVideoElement | null>, required): A Vue ref attached to your element.

baseURL (string, optional): A custom base URL for the Bio-Logreen API. Defaults to the production URL.

Return Values

isLoading (Ref): A reactive boolean that is true when an API call is in progress.

isInitializing (Ref): A reactive boolean that is true while the camera and AI models are loading.

faceDetected (Ref): A reactive boolean that is true when a face is visible in the camera.

error (Ref<string | null>): A reactive string containing an error message if an operation failed.

start(): An async function to initialize the camera and start face detection.

stop(): A function to stop the camera and clean up resources.

signupWithFace(options): An async function to trigger a signup. Returns a Promise.

loginWithFace(): An async function to trigger a login. Returns a Promise.

<!-- This is your custom UI. An overlay that turns green when a face is detected -->
<div class="overlay" :class="{ detected: faceDetected }"></div>

<!-- Show loading states and errors from the composable -->
<div v-if="isLoading" class="spinner">Processing...</div>
<div v-if="error" class="error-message">{{ error }}</div>

<button @click="handleLogin" :disabled="isLoading" class="action-button">
  Login with Face
</button>

Contributing Suggestions and contributions are welcome. Please open an issue or a pull request on the GitHub repository to suggest changes.

License This SDK is licensed under the MIT License with The Commons Clause. See the LICENSE file for more details.