Video SDK useKeyProvider Hook - React Native

useKeyProvider Hook

The useKeyProvider hook provides functionality to manage your SecureKey and enable End to End Encryption.

useKeyProvider example

import React from "react";
import { View, Text } from "react-native";
import { MeetingProvider, useKeyProvider } from "@videosdk.live/react-native-sdk";

function MeetingWithE2EE() {
  // Initialize the keyProvider with options (optional)
  const keyProvider = useKeyProvider({
    discardFrameWhenCryptorNotReady: true,
  });
  // Set a shared key for encryption
  const setupEncryption = async () => {
    // Set a secure key only if keyProvider exists
    if (keyProvider) {
      await keyProvider.setSharedKey("YOUR-SECURE-KEY");
    }
  };
  // Call the setup function when component mounts
  React.useEffect(() => {
    setupEncryption();
  }, []);

  return (
    <MeetingProvider
      config={{
        meetingId: "meeting-id",
        micEnabled: true,
        webcamEnabled: true,
        name: "Test User",
      }}
      token="your-token"
      // Pass the keyProvider to enable E2EE (optional)
      keyProvider={keyProvider || null}
    >
      <YourMeetingComponent />
    </MeetingProvider>
  );
}
// Your meeting component implementation
function YourMeetingComponent() {
  return (
    <View>
      <Text>End-to-End Encrypted Meeting</Text>
      {/* Your meeting UI components */}
    </View>
  );
}
export default MeetingWithE2EE;

Returns

The hook returns the following properties:

setSharedKey()

• Type: (key: string) => Promise<any>
• Description: Sets the shared encryption key for End to End Encryption.