React Native Vizbee HomeSSO Receiver SDK

Overview

The React Native Vizbee HomeSSO Receiver SDK enables seamless sign-in synchronization between mobile devices and TV applications. This SDK specifically handles the TV-side implementation, allowing TVs to receive authentication states from mobile devices in the same network.

Installation

npm install react-native-vizbee-homesso-receiver-sdk
# or
yarn add react-native-vizbee-homesso-receiver-sdk

Basic Usage in Functional Component

1. Initialize the SDK

import { useVizbeeHomeSSOReceiver } from 'react-native-vizbee-homesso-receiver-sdk';

const MyComponent = () => {
  const { initialize } = useVizbeeHomeSSOReceiver();

  useEffect(() => {
    initialize({
      onGetSignInInfo: async () => {
        // Return current authentication state
        return [{
          signInType: "MVPD",
          isSignedIn: false,
          userLogin: ""
        }];
      },
      onStartSignIn: async (senderInfo) => {
        // Handle sign-in request from mobile device
        if (senderInfo.isSignedIn) {
          // Handle background sign-in
        } else {
          // Handle foreground sign-in
        }
      }
    });
  }, []);

  return <YourComponent />;
};

2. Implement Sign-in Status Updates

const { sendProgress, sendSuccess, sendFailure } = useVizbeeHomeSSOReceiver();

// Send progress update (e.g., when registration code is available)
sendProgress("MVPD", { regcode: "ABC123" });

// Send success notification
sendSuccess("MVPD", "[email protected]");

// Send failure notification
sendFailure("MVPD", "Error message", false, null);

Basic Usage in Class Component

1. Initialize the SDK

import {
  VizbeeHomeSSOReceiverManager,
  VizbeeHomeSSOCallbacks,
} from "react-native-vizbee-homesso-receiver-sdk";

class AuthManager {
  private homeSSOManager: VizbeeHomeSSOReceiverManager;

  constructor() {
    this.homeSSOManager = new VizbeeHomeSSOReceiverManager();
    this.initializeHomeSSO();
  }

  private initializeHomeSSO(): void {
    const callbacks: VizbeeHomeSSOCallbacks = {
      onGetSignInInfo: async () => {
        // Return current authentication state
        return [
          {
            signInType: "MVPD",
            isSignedIn: false,
            userLogin: "",
          },
        ];
      },
      onStartSignIn: async (senderInfo) => {
        // Handle sign-in request from mobile device
        if (senderInfo.isSignedIn) {
          // Handle background sign-in
          await this.handleBackgroundSignIn(senderInfo.signInType);
        } else {
          // Handle foreground sign-in
          this.handleForegroundSignIn(senderInfo.signInType);
        }
      },
    };

    this.homeSSOManager.initialize(callbacks);
  }
}

2. Implement Sign-in Status Updates

class AuthManager {
  // ... constructor and initialization ...

  private handleSignInProgress(signInType: string, regCode: string): void {
    // Send progress update when registration code is available
    this.homeSSOManager.sendProgress(signInType, { regcode: regCode });
  }

  private handleSignInSuccess(signInType: string, userId: string): void {
    // Send success notification
    this.homeSSOManager.sendSuccess(signInType, userId);
  }

  private handleSignInFailure(signInType: string, error: Error): void {
    // Send failure notification
    this.homeSSOManager.sendFailure(signInType, error.message, false, error);
  }
}

Sign-in Flows

Background Sign-in

When the mobile device is already signed in, the TV app can perform authentication in the background:

• Request registration code
• Start polling for authentication status
• Send progress updates with registration code
• Handle success/failure states

Foreground Sign-in

When the mobile device is not signed in, the TV app should show a sign-in UI:

• Navigate to sign-in screen
• Display registration code
• Track sign-in progress
• Handle user interactions and callbacks

API Reference

Hooks

useVizbeeHomeSSOReceiver()

Main hook providing core functionality:

• initialize(adapter): Set up the SDK
• sendProgress(signInType, customData): Send progress updates
• sendSuccess(signInType, userId, customData): Report successful sign-in
• sendFailure(signInType, reason, isCancelled, error, customData): Report sign-in failure

Types

interface VizbeeHomeSSOCallbacks {
  onGetSignInInfo: () => Promise<VizbeeSignInInfo[]>;
  onStartSignIn: (senderInfo: VizbeeSenderSignInInfo) => Promise<void>;
}

interface VizbeeSignInInfo {
  signInType: string;
  isSignedIn: boolean;
  userLogin?: string;
  userName?: string;
  userSubscriptionType?: string;
  userSubscriptionValue?: string;
  userSubscriptionRenewalType?: string;
  userAdditionalInfo?: Record<string, any>;
}

interface VizbeeSenderSignInInfo {
  signInType: string;
  isSignedIn: boolean;
  customData: Record<string, any>;
  senderInfo?: any;
}

Best Practices

1. Initialize Early: Call initializeHomeSSO() as soon as your app is ready & after the Continuity SDK is initialized.

2. Handle App State: Track app readiness and handle pending callbacks appropriately.

3. Progress Updates: Keep the mobile device informed of sign-in progress:

   • Send registration codes when available
   • Report success/failure promptly
   • Include relevant custom data in updates

4. Error Handling: Implement proper timeout and error handling for sign-in processes.

Support

For additional support or to report issues:

• GitHub Issues: react-native-vizbee-homesso-receiver-sdk