{"id":10571,"library":"berbix-vue","title":"Berbix Vue SDK","description":"The berbix-vue SDK provides a dedicated Vue.js component for integrating the Berbix identity verification flow into web applications. Berbix itself offers a fully automated and instant identity verification solution, leveraging biometric scans combined with data extraction from government-issued IDs (such as driver's licenses and passports) to quickly and accurately confirm user identities. The SDK simplifies the client-side integration of this complex process, handling the user interface and interactions necessary for the verification flow, which includes real-time coaching for optimal image capture and selfie submission. Currently at version 1.0.1, the package is designed to assist developers in building secure onboarding, age verification, and KYC (Know Your Customer) processes within Vue environments. Its core differentiators lie in its high accuracy, exceptionally low false acceptance rate (0.1%), and a rapid 2-second response time for verification results, aiming to optimize both security and user conversion. While the package specifies 'Vue 2.x release support', modern Vue development primarily targets Vue 3, necessitating careful consideration of the specific Vue version used for integration.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"git://github.com/berbix/berbix-vue","tags":["javascript","berbix","vue","identity","typescript"],"install":[{"cmd":"npm install berbix-vue","lang":"bash","label":"npm"},{"cmd":"yarn add berbix-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add berbix-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency as this is a Vue.js SDK component.","package":"vue","optional":false}],"imports":[{"note":"BerbixVerify is the main UI component for rendering the verification flow, exported as a named export. It's typically used directly in a Vue template or registered globally.","wrong":"import BerbixVerify from 'berbix-vue';","symbol":"BerbixVerify","correct":"import { BerbixVerify } from 'berbix-vue';"},{"note":"For TypeScript projects, import types like BerbixEvent to ensure correct type-checking for event payloads emitted by the BerbixVerify component. The exact type names may vary based on SDK version.","symbol":"BerbixEvent","correct":"import type { BerbixEvent } from 'berbix-vue';"},{"note":"While berbix-vue is primarily a component, for global availability, it can be registered with `app.component` in Vue 3 or directly imported and used in SFCs. CommonJS `require()` is not supported for modern Vue SDKs.","wrong":"const BerbixVerify = require('berbix-vue'); // CommonJS import\nnew Vue().use(BerbixVerify); // Vue 2 plugin pattern for a component-only export","symbol":"App.use (plugin-like setup)","correct":"import { createApp } from 'vue';\nimport App from './App.vue';\nimport { BerbixVerify } from 'berbix-vue';\n\nconst app = createApp(App);\napp.component('BerbixVerify', BerbixVerify);\napp.mount('#app');"}],"quickstart":{"code":"<!-- src/App.vue -->\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { BerbixVerify } from 'berbix-vue';\nimport type { BerbixEvent } from 'berbix-vue'; // Assuming BerbixEvent type exists\n\n// IMPORTANT: Replace with a valid, secure clientToken obtained from your backend.\n// Never expose sensitive tokens directly in your frontend code.\nconst clientToken = ref('YOUR_BERBIX_CLIENT_TOKEN_FROM_BACKEND'); \nconst verificationStatus = ref('Pending');\n\nconst handleVerificationComplete = (event: BerbixEvent) => {\n  console.log('Berbix verification complete:', event);\n  // event.status could be 'accepted', 'rejected', 'expired', etc.\n  verificationStatus.value = event.status;\n  alert(`Verification finished with status: ${event.status}`);\n\n  // Typically, you would send this event data to your backend for server-side verification.\n  // fetch('/api/berbix-webhook', { method: 'POST', body: JSON.stringify(event) });\n};\n\nconst handleError = (error: any) => {\n  console.error('Berbix verification error:', error);\n  verificationStatus.value = 'Error';\n  alert(`Verification error: ${error.message || 'Unknown error'}`);\n};\n\n// Example: Logic to refresh the client token and re-initiate verification if needed\nconst refreshVerification = () => {\n  console.log(\"Attempting to refresh client token and re-initiate verification...\");\n  // In a real application, this would involve an API call to your backend\n  // to fetch a new clientToken. Update clientToken.value when ready.\n  clientToken.value = 'NEW_CLIENT_TOKEN_FROM_BACKEND'; // Placeholder for new token\n  verificationStatus.value = 'Pending'; // Reset status\n};\n</script>\n\n<template>\n  <div id=\"app-container\">\n    <h1>Berbix Identity Verification</h1>\n    <p>Current Status: <strong>{{ verificationStatus }}</strong></p>\n\n    <div v-if=\"verificationStatus === 'Pending' || verificationStatus === 'Error'\">\n      <p>Please complete the identity verification process.</p>\n      <div class=\"berbix-widget-container\">\n        <BerbixVerify \n          :clientToken=\"clientToken\" \n          @complete=\"handleVerificationComplete\"\n          @error=\"handleError\"\n          :key=\"clientToken\" <!-- Use key to force component re-render if clientToken changes -->\n        />\n      </div>\n      <button v-if=\"verificationStatus === 'Error'\" @click=\"refreshVerification\" style=\"margin-top: 20px;\">Try Verification Again</button>\n    </div>\n    <div v-else-if=\"verificationStatus === 'accepted'\">\n      <p>Verification flow successfully completed. You can now proceed.</p>\n      <!-- Further application logic after successful verification -->\n    </div>\n    <div v-else>\n      <p>Verification flow ended with status: {{ verificationStatus }}.</p>\n    </div>\n  </div>\n</template>\n\n<style>\n#app-container {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n.berbix-widget-container {\n  border: 1px solid #eee;\n  padding: 20px;\n  margin: 20px auto;\n  max-width: 600px;\n  min-height: 400px; /* Give some space for the widget */\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n</style>\n\n<!-- src/main.ts -->\n<!-- import { createApp } from 'vue';\nimport App from './App.vue';\n\ncreateApp(App).mount('#app'); -->","lang":"typescript","description":"This quickstart demonstrates how to integrate the BerbixVerify component into a Vue 3 application using the Composition API. It shows how to pass a clientToken, handle completion and error events, and display the verification status. Remember to obtain `clientToken` securely from your backend."},"warnings":[{"fix":"For new projects, prefer Vue 3 and confirm SDK compatibility. If maintaining a Vue 2 project, ensure the SDK's Vue 2 support is actively maintained and consider the implications of Vue 2 EOL. Migration to Vue 3 would involve refactoring your application and potentially updating the SDK version.","message":"The package explicitly notes 'Vue 2.x release support'. Given Vue 2 reached End-of-Life on December 31, 2023, integrating with Vue 2 might lead to security vulnerabilities or lack of future compatibility with other modern libraries. Developers should verify compatibility if targeting Vue 3, as breaking changes exist between Vue 2 and 3.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Inform users about the mobile device requirement before they start the verification process. Provide clear instructions and options for seamlessly transitioning to a mobile device (e.g., QR code, email/SMS link).","message":"The Berbix verification flow often requires users to use a mobile device to scan their ID documents and take a selfie. Users initiating the flow on a desktop computer will typically be prompted to switch to a mobile device for these steps, which can impact user experience if not properly communicated upfront.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always fetch the `clientToken` from your secure backend via an authenticated API endpoint. The token should have a limited lifespan and be tied to the user session. Never hardcode it or embed it directly into static client-side bundles.","message":"The `clientToken` prop is a critical security credential that should be generated and managed on your backend server. Exposing it directly in frontend code or fetching it insecurely can lead to unauthorized access to your Berbix account and potential fraud.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Stay informed about official announcements from Berbix/Socure regarding product roadmaps, API changes, and migration guides. Regularly check the package's GitHub repository and npm page for updates and deprecation notices.","message":"Berbix was acquired by Socure in June 2023. While the `berbix-vue` SDK continues to function, this acquisition might lead to future changes in branding, API endpoints, support channels, or the introduction of new SDK versions that may not be fully backward compatible.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you `import { BerbixVerify } from 'berbix-vue';` in your component's script section (especially with `<script setup>`) or globally register it using `app.component('BerbixVerify', BerbixVerify);` in your `main.ts`/`main.js`.","cause":"The `BerbixVerify` component has not been correctly registered with your Vue application, or you're attempting to use it without explicit import in a Single File Component (SFC).","error":"[Vue warn]: Failed to resolve component: BerbixVerify"},{"fix":"Verify that your backend correctly generates and provides a fresh, valid `clientToken` for each user session. Ensure the token is passed correctly to the `:clientToken` prop of the `BerbixVerify` component. Check your Berbix dashboard for token validity and API key configurations.","cause":"The `clientToken` passed to the `BerbixVerify` component is either missing, expired, malformed, or not recognized by the Berbix API.","error":"Error: Invalid clientToken provided. Please check your token."},{"fix":"Consult the official Berbix SDK documentation for the exact structure of the `complete` and `error` event payloads. Update your event handlers to safely access properties (e.g., `event?.status`) and ensure your `berbix-vue` package is up to date.","cause":"The `event` object received by your `@complete` or `@error` handler might not have the expected structure, or the `status` property is missing, often due to an outdated SDK version or an unexpected API response.","error":"TypeError: Cannot read properties of undefined (reading 'status') in handleVerificationComplete"}],"ecosystem":"npm"}