@abaxx_tech/v-integration-react 1.2.0-dev.4 → 1.2.0-dev.6

package/README.md

@@ -8,7 +8,7 @@
 - **Token Management**: Provides authentication token through React Context.
 - **Real-time Authentication**: Server-Sent Events (SSE) for real-time authentication status updates.
 - **PKCE Flow**: Implements OAuth 2.0 PKCE (Proof Key for Code Exchange) for secure authentication.
-- **Error Handling**: Comprehensive error handling and user feedback.
+- **Error Handling**: Comprehensive error handling and user feedback with React Error Boundary for graceful error recovery.
 - **Customizable Styling**: Full control over colors, sizes, and text with support for both Tailwind classes and hex colors.
 - **Background Authentication Service**: Automatic token management and authentication flow handling.
 - **State Reset**: Built-in functionality to reset authentication state back to initial values.
@@ -201,6 +201,7 @@ Complete authentication UI with QR code and email input. This component provides
 - Real-time authentication status updates
 - Loading states and error handling
 - Responsive design with grid layout
+- Automatic error boundary protection for React errors
 
 ### `VerifierAuthQr`
 QR code authentication component only. Displays a QR code that users can scan with the Verifier+ app for authentication.
@@ -252,6 +253,41 @@ Email input authentication component only. Provides a standalone email/Abaxx ID
 - Customizable styling with support for both Tailwind classes and hex colors
 - Error handling with user feedback
 - Success state with checkmark icon
+- Automatic error boundary protection for React errors
+
+## Error Handling
+
+### React Error Boundary
+
+All authentication components (`VerifierAuth`, `VerifierAuthQr`, and `VerifierAuthEmail`) are automatically wrapped with an `AuthErrorBoundary` component that catches React errors during rendering or in lifecycle methods.
+
+#### Features:
+- **Automatic Error Catching**: Catches errors that occur in the component tree during rendering
+- **User-Friendly Error UI**: Displays a centered error message with a dark overlay background
+- **Error Recovery**: Provides a "Try Again" button to reset the error state and retry
+- **Error Logging**: Automatically logs errors to the console for debugging
+
+#### Error Display:
+When an error occurs, users will see:
+- A centered error message: "Something went wrong"
+- A descriptive message: "An unexpected error occurred during authentication. Please try again."
+- A "Try Again" button to reset the error state
+
+The error boundary uses a fixed position overlay that covers the entire viewport, ensuring the error message is always visible and centered both vertically and horizontally.
+
+#### Example:
+```tsx
+// Error boundary is automatically included - no additional setup needed
+import { VerifierAuth } from "@abaxx_tech/v-integration-react";
+
+const LoginPage = () => {
+  // If any error occurs in VerifierAuth or its children,
+  // the error boundary will catch it and display the error UI
+  return <VerifierAuth title="Abaxx Drive" />;
+};
+```
+
+**Note**: The error boundary only catches errors in React components. For network errors or API errors, use the `authError` property from `VContext` to handle them in your application logic.
 
 ## Context API
 

package/dist/v-integration-react.css

@@ -1 +1 @@
-.v-auth-container *,.v-auth-container *:before,.v-auth-container *:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.v-auth-container{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif;line-height:1.5}.v-grid{display:grid}.v-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.v-grid-responsive{grid-template-columns:1fr}@media (min-width: 768px){.v-grid-responsive{grid-template-columns:1fr 1fr}}.v-h-screen{height:100vh}.v-bg-white{background-color:#fff}.v-bg-left{display:none}@media (min-width: 768px){.v-bg-left{display:block}}.v-flex{display:flex}.v-flex-col{flex-direction:column}.v-items-center{align-items:center}.v-justify-center{justify-content:center}.v-gap-2{gap:.5rem}.v-relative{position:relative}.v-absolute{position:absolute}.v-hidden{display:none}@media (min-width: 768px){.v-hidden.md\:v-block{display:block}}.v-inset-0{top:0;right:0;bottom:0;left:0}.v-h-full{height:100%}.v-w-full{width:100%}.v-w-20{width:5rem}.v-h-20{height:5rem}.v-h-10{height:2.5rem}.v-h-4{height:1rem}.v-h-130{height:130px}.v-h-16{height:4rem}.v-w-4{width:1rem}.v-min-w-300{min-width:300px}.v-w-130{width:130px}.v-w-16{width:4rem}.v-p-3{padding:.75rem}.v-p-4{padding:1rem}.v-p-6{padding:1.5rem}.v-px-2{padding-left:.5rem;padding-right:.5rem}.v-px-4{padding-left:1rem;padding-right:1rem}.v-mb-3{margin-bottom:.75rem}.v-mb-4{margin-bottom:1rem}.v-mb-5{margin-bottom:1.25rem}.v-mb-6{margin-bottom:1.5rem}.v-mb-8{margin-bottom:2rem}.v-my-4{margin-top:1rem;margin-bottom:1rem}.v-text-center{text-align:center}.v-text-sm{font-size:.875rem;line-height:1.25rem}.v-text-base{font-size:1rem;line-height:1.5rem}.v-text-xl{font-size:1.25rem;line-height:1.75rem}.v-text-2xl{font-size:1.5rem;line-height:2rem}.v-font-medium{font-weight:500}.v-font-semibold{font-weight:600}.v-tracking-wide{letter-spacing:.025em}.v-text-black{color:#000}.v-text-white{color:#fff}.v-text-gray-400{color:#9ca3af}.v-text-gray-800{color:#1f2937}.v-text-green-700{color:#15803d}.v-text-green-800{color:#166534}.v-bg-green-100{background-color:#dcfce7}.v-bg-slate-100{background-color:#f1f5f9}.v-text-slate-800{color:#1e293b}.v-bg-transparent{background-color:transparent}.v-bg-red{background-color:#cf0000}.v-text-gray-600{color:#6b7280}.v-border{border-width:1px}.v-border-gray-400{border-color:#9ca3af}.v-rounded{border-radius:.25rem}.v-rounded-lg{border-radius:.5rem}.v-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.25rem;border:1px solid #9ca3af;background-color:transparent;padding:.5rem;text-align:center;color:#6b7280}.v-input:focus{outline:2px solid transparent;outline-offset:2px;border-color:#3b82f6}.v-input:disabled{opacity:.5;cursor:not-allowed}.v-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.25rem;padding:.5rem 1rem;font-weight:600;transition:all .2s;cursor:pointer;border:none;background-color:#cf0000;color:#fff}.v-button:hover{background-color:#b91c1c}.v-button:disabled{opacity:.5;cursor:not-allowed}.v-animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.v-fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.v-bg-cover{background-size:cover}.v-bg-no-repeat{background-repeat:no-repeat}.v-object-contain{object-fit:contain}.v-mix-blend-multiply{mix-blend-mode:multiply}.v-blur-sm{filter:blur(4px)}.v-fixed{position:fixed}.v-top-4{top:1rem}.v-right-4{right:1rem}
+.v-auth-container *,.v-auth-container *:before,.v-auth-container *:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.v-auth-container{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif;line-height:1.5}.v-grid{display:grid}.v-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.v-grid-responsive{grid-template-columns:1fr}@media (min-width: 768px){.v-grid-responsive{grid-template-columns:1fr 1fr}}.v-h-screen{height:100vh}.v-min-h-screen{min-height:100vh}.v-bg-white{background-color:#fff}.v-bg-left{display:none}@media (min-width: 768px){.v-bg-left{display:block}}.v-flex{display:flex}.v-flex-col{flex-direction:column}.v-items-center{align-items:center}.v-justify-center{justify-content:center}.v-gap-2{gap:.5rem}.v-relative{position:relative}.v-absolute{position:absolute}.v-hidden{display:none}@media (min-width: 768px){.v-hidden.md\:v-block{display:block}}.v-inset-0{top:0;right:0;bottom:0;left:0}.v-h-full{height:100%}.v-w-full{width:100%}.v-w-20{width:5rem}.v-h-20{height:5rem}.v-h-10{height:2.5rem}.v-h-4{height:1rem}.v-h-130{height:130px}.v-h-16{height:4rem}.v-w-4{width:1rem}.v-min-w-300{min-width:300px}.v-w-130{width:130px}.v-w-16{width:4rem}.v-p-3{padding:.75rem}.v-p-4{padding:1rem}.v-p-6{padding:1.5rem}.v-px-2{padding-left:.5rem;padding-right:.5rem}.v-px-4{padding-left:1rem;padding-right:1rem}.v-mb-3{margin-bottom:.75rem}.v-mb-4{margin-bottom:1rem}.v-mb-5{margin-bottom:1.25rem}.v-mb-6{margin-bottom:1.5rem}.v-mb-8{margin-bottom:2rem}.v-my-4{margin-top:1rem;margin-bottom:1rem}.v-text-center{text-align:center}.v-text-sm{font-size:.875rem;line-height:1.25rem}.v-text-base{font-size:1rem;line-height:1.5rem}.v-text-xl{font-size:1.25rem;line-height:1.75rem}.v-text-2xl{font-size:1.5rem;line-height:2rem}.v-font-medium{font-weight:500}.v-font-semibold{font-weight:600}.v-tracking-wide{letter-spacing:.025em}.v-text-black{color:#000}.v-text-white{color:#fff}.v-text-gray-400{color:#9ca3af}.v-text-gray-800{color:#1f2937}.v-text-green-700{color:#15803d}.v-text-green-800{color:#166534}.v-bg-green-100{background-color:#dcfce7}.v-bg-slate-100{background-color:#f1f5f9}.v-text-slate-800{color:#1e293b}.v-bg-transparent{background-color:transparent}.v-bg-red{background-color:#cf0000}.v-text-gray-600{color:#6b7280}.v-border{border-width:1px}.v-border-gray-400{border-color:#9ca3af}.v-rounded{border-radius:.25rem}.v-rounded-lg{border-radius:.5rem}.v-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.25rem;border:1px solid #9ca3af;background-color:transparent;padding:.5rem;text-align:center;color:#6b7280}.v-input:focus{outline:2px solid transparent;outline-offset:2px;border-color:#3b82f6}.v-input:disabled{opacity:.5;cursor:not-allowed}.v-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.25rem;padding:.5rem 1rem;font-weight:600;transition:all .2s;cursor:pointer;border:none;background-color:#cf0000;color:#fff}.v-button:hover{background-color:#b91c1c}.v-button:disabled{opacity:.5;cursor:not-allowed}.v-animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.v-fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.v-bg-cover{background-size:cover}.v-bg-no-repeat{background-repeat:no-repeat}.v-object-contain{object-fit:contain}.v-mix-blend-multiply{mix-blend-mode:multiply}.v-blur-sm{filter:blur(4px)}.v-fixed{position:fixed}.v-top-4{top:1rem}.v-right-4{right:1rem}