v-integration-react

v-integration-react is an npm library that provides React components for handling PubNub message queues and Verifier+ authentication UI.

Features

• PubNub Integration: Listens to PubNub events and triggers callback.
• Verifier Authentication: Pre-built authentication UI component.
• Login Event Handling: Receives Verifier+ token upon successful login.
• Error Handling: Detects and handles authentication failures.

Installation

Install the package via npm or yarn:

npm install v-integration-react
# or
yarn add v-integration-react

Usage

1. Wrap your app with VerifierProvider

Wrap your application with VerifierProvider to manage authentication and PubNub events.

import { VerifierProvider } from "v-integration-react";

const App = () => {
  return (
    <VerifierProvider
      appId={Number(import.meta.env.VITE_APP_ID)}
      apiUrl={import.meta.env.VITE_API_URL}
      publishKey={import.meta.env.VITE_PUBNUB_PUBLISH_KEY}
      subscribeKey={import.meta.env.VITE_PUBNUB_SUBSCRIBE_KEY}
      onMessage={(message) => {
        console.log("message:", message);

        if (message.event === "authorization" && message.ok) {
          console.log("✅ Authentication successful!");
          console.log("Verifier+ Token:", message.message.token);
          
          // Store token securely
          localStorage.setItem("authToken", message.message.token);
        }

        if (message.event === "authorizationDeny" && !message.ok) {
          console.error("❌ Authentication failed:", message.message);
          alert("Authentication failed: " + message.message);
        }
      }}
    >
      {/* You app go here */}
    </VerifierProvider>
  );
};

export default App;

2. Add VerifierAuth for the login UI

import { VerifierAuth } from "v-integration-react";
import "v-integration-react/index.css";

const LoginPage = () => {
  return <VerifierAuth title="Abaxx Drive" />;
};

export default LoginPage;

• import v-integration-react/index.css for the login UI styling.
• VerifierAuth provides an authentication UI for Verifier+.
• You can customize the title prop.

Components

VerifierProvider

Props:

| Prop | Type | Description | | ------------- | ------------- | ------------- | | onMessage | (message: MessageEvent) => void | Callback triggered on new PubNub message (see details below) | | publishKey | string | PubNub publish key | | subscribeKey | string | PubNub subscribe key | | appId | number | Unique application ID | | apiUrl | string | API URL for authentication |

VerifierAuth

Props:

| Prop | Type | Description | | ------------- | ------------- | ------------- | | title | string | Title displayed in the login UI |

📬 Handling Messages

✅ Successful Authentication

When a user logs in successfully, onMessage will receive:

{
    "ok": true,
    "event": "authorization",
    "message": {
        "appId": "2",
        "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ...",
        "identity": "did:ion:EiDuPARvGv7CgmEl5eQYvrulVL...",
        "authRequestId": "b3587b0d-2255-4f69-98a4-f8f23c130a5a"
    }
}

❌ Failed Authentication

If the login is denied, onMessage receives:

{
    "ok": false,
    "event": "authorizationDeny",
    "message": "Your authorization request was denied."
}

🔧 Environment Variables

Make sure you define your environment variables in a .env file:

VITE_PUBNUB_PUBLISH_KEY="your-pubnub-publish-key"
VITE_PUBNUB_SUBSCRIBE_KEY="your-pubnub-subscribe-key"
VITE_APP_ID="your-app-id"
VITE_API_URL="your-api-url

🛠 Development

1. Clone the repo.
2. Run npm install or yarn install.
3. Start development:

npm run dev