WebID Striver Plugin

The WebID Striver Plugin is a React Native module that facilitates seamless integration with the WebID identification system. By wrapping the native Android and iOS SDKs, this plugin allows React Native applications to securely leverage WebID’s trusted user identification platform.

Features

• Easy Integration: Quickly incorporate WebID’s identification system into your React Native project.
• Cross-Platform Support: Compatible with both Android and iOS.
• Secure Identification: Utilizes WebID’s secure and reliable identification protocols.

Prerequisites

• Node.js Version: 19 or newer.
• minSdkVersion: 24
• kotlinVersion: 1.9.24

Installation

To install the plugin, run:

npm install webid-striver-plugin

Android Configuration

Basic Setup

Ensure the following project configurations:

1. Update your package.json file and add the following script:

   "scripts": {
     "open:android": "open -a \"Android Studio\" android"
   }

2. Run the prebuild command:

   npx expo prebuild

3. Modify android/build.gradle to include the required Maven repository:

   allprojects {
       repositories {
           maven {
               url 'https://api.webid-solutions.de/releases/android/maven/repository/internal'
           }
       }
   }

4. Launch your Android project and build the project:

   npm run open:android

   Note: Once the build is ready, click the Play button to install the app on a device or simulator.

5. Start your development server and run the app:

   npx expo start
   # or
   yarn android

iOS Configuration

Swift Package Manager (SPM) Setup

1. Open Xcode and navigate to File > Add Packages.

2. Add the following URL in the search field:

   https://api.webid-solutions.de/releases/ios/spm/SwiftPackages/webid-video-ident-product-plugin-spm.git

3. Choose Exact Version and select the latest version.

4. Clean the project (CMD + Shift + K) and build it in Xcode.

Manual iOS Setup

1. Download the following files and place them in your iOS project’s root directory:

   • WebIdVideoViewController.swift
   • WebIdVideoStriver-Bridging-Header.h
   • WebIdVideoStriver.m

2. Import the native module in your App.tsx:

   import { NativeModules } from 'react-native';
   const { WebIdVideoStriver } = NativeModules;

3. Use WebIdVideoStriver.configure() instead of importing from webid-striver-plugin as shown below:

   const response = await WebIdVideoStriver.configure({
      environment: 'Environment URL', // e.g., 'https://webid-gateway.de/'
      username: 'your-username',
      apiKey: 'your-api-key',
      actionId: 'your-action-id',
      shaKeys: ['sha256/your-sha-key'],
    });

4. If you encounter certificate-related errors, add the required WebID certificate directly to your Xcode project. The certificate should be named:

   test.webid-solutions.de-valid_until_2025.02.22

5. Update the certificate name in ios/WebIdVideoStriver.swift if necessary.

6. Build and run the iOS project with your actual WebID keys and Action ID.

Usage

Configure and use the webid-striver-plugin as follows:

import { configure } from 'webid-striver-plugin';

// Usage in your React Native component
const handleConfigure = async () => {
  try {
    const response = await configure({
      environment: 'Environment URL', // e.g., 'https://webid-gateway.de/'
      username: 'your-username',
      apiKey: 'your-api-key',
      actionId: 'your-action-id',
      shaKeys: ['sha256/your-sha-key'],
    });
    Alert.alert(String(response));
  } catch (error) {
    console.error('Error:', error);
    if (error instanceof Error) {
      Alert.alert('Error', error.message);
    } else {
      Alert.alert('Error', 'An unknown error occurred');
    }
  }
};

Example Component

import React from 'react';
import { StyleSheet, View, Alert, Button } from 'react-native';
import { configure } from 'webid-striver-plugin';

export default function App() {
  return (
    <View style={styles.container}>
      <Button title="Configure WebID" onPress={handleConfigure} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Argument Reference

| Argument | Description | |---------------|----------------------------------------------------------| | environment | The WebID system URL (e.g., Production or Test URL). | | username | WebID customer number (6-digit string). | | apiKey | API key for WebID Mobile App SDK. | | actionId | Action ID for initiating the identification process. | | shaKeys | Certificate pinning SHA keys for security. |

Additional Information

This package is a third-party React Native wrapper for WebID’s identification SDK. For official resources, visit WebID Solutions.

Contributing

Refer to the contributing guide for details on contributing to the project.

License

This project is licensed under the MIT License.

Developed with create-react-native-library.

Watch the video on how to integrate WebID Striver Plugin with your React Native project: []