react-native-ssl-manager 1.0.0 → 1.0.2

package/README.md

@@ -1,53 +1,117 @@
-# react-native-ssl-manager
+# 🔒 react-native-ssl-manager
 
-React Native SSL Pinning provides seamless SSL certificate pinning integration for enhanced network security in React Native apps. This module enables developers to easily implement and manage certificate pinning, protecting applications against man-in-the-middle (MITM) attacks. With dynamic configuration options and the ability to toggle SSL pinning, it's particularly useful for development and testing scenarios.
+**Production-ready SSL certificate pinning for React Native and Expo apps.** This library provides seamless SSL certificate pinning integration for enhanced network security, protecting applications against man-in-the-middle (MITM) attacks. With dynamic configuration options and the ability to toggle SSL pinning, it's perfect for both development and production environments.
 
-## Features
+## 🎥 Live Demo
 
-- 🔒 Easy SSL certificate pinning implementation
-- 🔄 Dynamic enabling/disabling of SSL pinning
-- ⚡ Optimized for development and testing workflows
-- 📱 Cross-platform support (iOS & Android)
-- 🛠️ Simple configuration using JSON
-- 🚀 Performance-optimized implementation
+### iOS Demo
+[![iOS SSL Pinning Demo](https://vumbnail.com/1109299210.jpg)](https://vimeo.com/1109299210)
 
-## Installation
+### Android Demo  
+[![Android SSL Pinning Demo](https://vumbnail.com/1109299632.jpg)](https://vimeo.com/1109299632)
 
-```sh
+> **📱 Interactive Features Shown:**
+> - Toggle SSL pinning on/off
+> - Real-time API testing with visual feedback
+> - Certificate validation results
+> - Performance metrics display
+
+**🎬 Watch Full Demo Videos:**
+- **[iOS Demo](https://vimeo.com/1109299210)** - Complete iOS SSL pinning demonstration
+- **[Android Demo](https://vimeo.com/1109299632)** - Complete Android SSL pinning demonstration
+
+## ✨ Features
+
+- 🔒 **Easy SSL certificate pinning** - Simple setup with JSON configuration
+- 🔄 **Dynamic SSL control** - Enable/disable SSL pinning at runtime
+- 🏗️ **New Architecture Ready** - Full support for React Native's New Architecture (Fabric/TurboModules)
+- 🏛️ **Legacy Compatible** - Works with both New and Legacy Architecture
+- 📱 **Cross-platform** - Native support for iOS & Android
+- 🚀 **Expo Compatible** - Built-in Expo plugin with auto-configuration
+- ⚡ **Zero Configuration** - Auto-setup with smart fallbacks
+- 🧪 **Developer Friendly** - Perfect for development and testing workflows
+- 🎯 **Production Ready** - Optimized performance, no debug logs
+
+## 📦 Installation
+
+### For React Native CLI Projects
+
+```bash
+# Using npm
 npm install react-native-ssl-manager
+
+# Using yarn
+yarn add react-native-ssl-manager
+
+# Using bun
+bun add react-native-ssl-manager
 ```
 
-## Usage
+For iOS, run pod install:
+```bash
+cd ios && pod install
+```
 
-### Basic Setup
+### For Expo Projects
 
-```typescript
-import { 
-  initializeSslPinning, 
-  setUseSSLPinning, 
-  getUseSSLPinning 
-} from 'react-native-ssl-manager';
-
-// Initialize SSL pinning with configuration
-const sslConfig = {
-  "domains": {
-    "development": "api.dev.example.com",
-    "production": "api.example.com"
-  },
+```bash
+# Using expo CLI
+npx expo install react-native-ssl-manager
+
+# Using bun with expo
+bunx expo install react-native-ssl-manager
+```
+
+Add the plugin to your `app.json` or `app.config.js`:
+```json
+{
+  "expo": {
+    "plugins": [
+      [
+        "react-native-ssl-manager",
+        {
+          "sslConfigPath": "./ssl_config.json"
+        }
+      ]
+    ]
+  }
+}
+```
+
+## 🚀 Architecture Support
+
+This library supports **both** React Native architectures:
+
+- ✅ **New Architecture** (Fabric/TurboModules) - React Native 0.68+
+- ✅ **Legacy Architecture** - All React Native versions
+
+The library automatically detects and uses the appropriate architecture at runtime.
+
+## 🚀 Quick Start
+
+### Step 1: Create SSL Configuration
+
+Create a `ssl_config.json` file in your project root:
+
+```json
+{
   "sha256Keys": {
-    "api.dev.example.com": [
-      "sha256/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX=",
-      "sha256/YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY="
-    ],
     "api.example.com": [
-      "sha256/ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ=",
-      "sha256/WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW="
+      "sha256/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=",
+      "sha256/BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB="
+    ],
+    "api.dev.example.com": [
+      "sha256/CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC=",
+      "sha256/DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD="
     ]
   }
-};
+}
+```
+
+### Step 2: Basic Usage
 
-// Initialize the SSL pinning
-await initializeSslPinning(JSON.stringify(sslConfig));
+```typescript
+import { setUseSSLPinning, getUseSSLPinning } from 'react-native-ssl-manager';
 
 // Enable SSL pinning
 await setUseSSLPinning(true);
@@ -55,6 +119,27 @@ await setUseSSLPinning(true);
 // Check if SSL pinning is enabled
 const isEnabled = await getUseSSLPinning();
 console.log('SSL Pinning enabled:', isEnabled);
+
+// Disable SSL pinning (for development/testing)
+await setUseSSLPinning(false);
+```
+
+### Step 3: Test Your Implementation
+
+```typescript
+// Test with SSL pinning enabled
+await setUseSSLPinning(true);
+try {
+  const response = await fetch('https://api.example.com/data');
+  console.log('✅ SSL Pinning working - request succeeded');
+} catch (error) {
+  console.log('⚠️ Check your SSL configuration');
+}
+
+// Test without SSL pinning
+await setUseSSLPinning(false);
+const response = await fetch('https://api.example.com/data');
+console.log('🔓 Request without SSL pinning');
 ```
 
 ### Configuration File (ssl_config.json)
@@ -80,30 +165,64 @@ Create a configuration file with your domain certificates. Example structure:
 }
 ```
 
-### API Reference
-
-#### `initializeSslPinning(configJsonString: string): Promise<any>`
-Initializes the SSL pinning configuration with the provided JSON string configuration.
+## 📚 API Reference
 
-```typescript
-await initializeSslPinning(JSON.stringify(sslConfig));
-```
+### `setUseSSLPinning(usePinning: boolean): Promise<void>`
 
-#### `setUseSSLPinning(usePinning: boolean): void`
 Enables or disables SSL pinning dynamically.
 
 ```typescript
-await setUseSSLPinning(true); // Enable SSL pinning
-await setUseSSLPinning(false); // Disable SSL pinning
+// Enable SSL pinning
+await setUseSSLPinning(true);
+
+// Disable SSL pinning
+await setUseSSLPinning(false);
 ```
 
-#### `getUseSSLPinning(): Promise<boolean>`
+**Parameters:**
+- `usePinning` (boolean): Whether to enable SSL pinning
+
+**Returns:** Promise<void>
+
+### `getUseSSLPinning(): Promise<boolean>`
+
 Retrieves the current state of SSL pinning.
 
 ```typescript
 const isEnabled = await getUseSSLPinning();
+console.log('SSL Pinning enabled:', isEnabled);
 ```
 
+**Returns:** Promise<boolean> - Current SSL pinning status
+
+## 🔧 Configuration
+
+### SSL Configuration File Structure
+
+**⚠️ Important:** The configuration file **must** be named exactly `ssl_config.json` and placed in your project root directory.
+
+Your `ssl_config.json` should follow this structure:
+
+```json
+{
+  "sha256Keys": {
+    "your-api-domain.com": [
+      "sha256/primary-certificate-hash=",
+      "sha256/backup-certificate-hash="
+    ],
+    "another-domain.com": [
+      "sha256/another-certificate-hash="
+    ]
+  }
+}
+```
+
+**📁 File Location Requirements:**
+- ✅ **React Native CLI**: Place `ssl_config.json` in project root
+- ✅ **Expo**: Place `ssl_config.json` in project root (same level as `app.json`)
+- ❌ **Don't rename** the file - it must be exactly `ssl_config.json`
+- ❌ **Don't place** in subdirectories - must be in project root
+
 ## Important Notes ⚠️
 
 ### Restarting After SSL Pinning Changes
@@ -186,17 +305,97 @@ const handleSSLToggle = async (enabled: boolean) => {
    - Regularly update certificates before expiration
    - Maintain multiple backup certificates
 
-## Roadmap 🗺️
+## ✅ Completed Roadmap
+
+### Recently Completed Features
 
-We're actively working on expanding the capabilities of react-native-ssl-manager. Here are our planned features:
+- ✅ **Expo Plugin Integration** - **COMPLETED!**
+  - ✅ Native SSL pinning support for Expo projects
+  - ✅ Seamless configuration through expo-config-plugin  
+  - ✅ Auto-linking capabilities for Expo development builds
+  - ✅ Support for Expo's development client
+
+- ✅ **New Architecture Support** - **COMPLETED!**
+  - ✅ Full TurboModule implementation
+  - ✅ Fabric renderer compatibility
+  - ✅ Automatic architecture detection
+  - ✅ Backward compatibility with Legacy Architecture
+
+- ✅ **Production Optimizations** - **COMPLETED!**
+  - ✅ Removed debug logs for production builds
+  - ✅ Performance optimizations
+  - ✅ Clean codebase ready for release
+
+## 🚀 Future Roadmap
 
 ### Upcoming Features
 
-- 📱 **Expo Plugin Integration**
-  - Native SSL pinning support for Expo projects
-  - Seamless configuration through expo-config-plugin
-  - Auto-linking capabilities for Expo development builds
-  - Support for Expo's development client
+- 🔄 **Advanced Certificate Management**
+  - Certificate rotation support
+  - Automatic certificate validation
+  - Certificate expiry notifications
+
+- 📊 **Enhanced Developer Experience**
+  - SSL pinning analytics and monitoring
+  - Better error reporting and debugging tools
+  - Integration with popular development tools
+
+- 🔧 **Extended Platform Support**
+  - Web support for React Native Web
+  - Additional certificate formats support
+
+## 🧪 Testing Your SSL Implementation
+
+### Using the Example App
+
+This library comes with a comprehensive test app that demonstrates SSL pinning functionality:
+
+```bash
+# Clone the repository
+git clone https://github.com/huytdps13400/react-native-ssl-manager.git
+
+# Test with React Native CLI
+cd react-native-ssl-manager/example
+npm install
+npm run ios # or npm run android
+
+# Test with Expo
+cd ../example-expo
+npm install
+npx expo run:ios # or npx expo run:android
+```
+
+The example app provides:
+- 🎛️ **SSL Control Panel** - Toggle SSL pinning on/off
+- 🧪 **Multiple Test Scenarios** - Test different API endpoints
+- 📊 **Real-time Results** - See detailed test results with timing
+- 🔍 **Visual Feedback** - Color-coded success/failure indicators
+
+### Manual Testing Steps
+
+1. **🔓 Test without SSL Pinning:**
+   ```typescript
+   await setUseSSLPinning(false);
+   // All API calls should work normally
+   ```
+
+2. **🔒 Test with SSL Pinning (Correct Certificate):**
+   ```typescript
+   await setUseSSLPinning(true);
+   // Calls to pinned domains should work
+   const response = await fetch('https://your-pinned-domain.com/api');
+   ```
+
+3. **⚠️ Test with SSL Pinning (Wrong Certificate):**
+   ```typescript
+   await setUseSSLPinning(true);
+   // Calls to non-pinned domains should fail
+   try {
+     await fetch('https://unpinned-domain.com/api');
+   } catch (error) {
+     console.log('✅ SSL Pinning working - blocked untrusted certificate');
+   }
+   ```
 
 ## Testing with Proxyman 🔍
 
@@ -251,14 +450,76 @@ This integration with Proxyman makes it easy to:
 - Validate security configurations
 - Speed up development and testing workflows
 
-## Contributing
+## 📋 Requirements & Compatibility
+
+### React Native Versions
+- ✅ **React Native 0.60+** (AutoLinking support)
+- ✅ **React Native 0.68+** (New Architecture support)
+- ✅ **Expo SDK 47+** (Expo plugin support)
+
+### Platform Support
+- ✅ **iOS 13.0+**
+- ✅ **Android API 21+** (Android 5.0)
+
+### Architecture Support
+- ✅ **New Architecture** (Fabric/TurboModules)
+- ✅ **Legacy Architecture** (Bridge-based)
+
+### Development Tools
+- ✅ **React Native CLI**
+- ✅ **Expo CLI**
+- ✅ **Expo Development Build**
+- ✅ **Flipper** (debugging support)
+- ✅ **Bun** (package manager support)
+
+## 🤝 Contributing
+
+We welcome contributions! See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+### Development Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/huytdps13400/react-native-ssl-manager.git
+cd react-native-ssl-manager
+
+# Install dependencies (choose your package manager)
+npm install
+# or
+yarn install
+# or
+bun install
+
+# Build the library
+npm run build
+# or
+bun run build
+
+# Run tests
+npm test
+# or
+bun test
+
+# Test with example apps
+npm run example:ios
+npm run example:android
+npm run example-expo:ios
+npm run example-expo:android
+
+# Test Bun compatibility
+bun run bun:test-compatibility
+```
+
+## 📄 License
 
-See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+MIT License - see the [LICENSE](LICENSE) file for details.
 
-## License
+## 🙏 Acknowledgments
 
-For open source projects, say how it is licensed.
+- Built with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+- SSL pinning implementation inspired by industry best practices
+- Special thanks to the React Native community
 
 ---
 
-Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+**Made with ❤️ for the React Native community**

package/android/build.gradle

@@ -23,6 +23,12 @@ apply plugin: "kotlin-android"
 
 if (isNewArchitectureEnabled()) {
   apply plugin: "com.facebook.react"
+  
+  react {
+    jsRootDir = file("../src/")
+    libraryName = "UseSslPinning"
+    codegenJavaPackageName = "com.usesslpinning"
+  }
 }
 
 def getExtOrDefault(name) {
@@ -46,6 +52,9 @@ android {
   if (supportsNamespace()) {
     namespace "com.usesslpinning"
 
+    buildFeatures {
+      buildConfig true
+    }
     sourceSets {
       main {
         manifest.srcFile "src/main/AndroidManifestNew.xml"
@@ -56,9 +65,22 @@ android {
   compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
 
   defaultConfig {
+    buildConfigField("boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString())
     minSdkVersion getExtOrIntegerDefault("minSdkVersion")
     targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
-
+  }
+  
+  sourceSets {
+    main {
+      java {
+        if (isNewArchitectureEnabled()) {
+          srcDirs += ["src/newarch"]
+        } else {
+          srcDirs += ["src/oldarch"]
+        }
+        exclude '**/expo/**'
+      }
+    }
   }
 
   buildTypes {

package/android/src/main/java/com/usesslpinning/SslPinningFactory.kt

@@ -0,0 +1,94 @@
+package com.usesslpinning
+
+import android.content.Context
+
+import com.facebook.react.modules.network.OkHttpClientFactory
+import com.facebook.react.modules.network.ReactCookieJarContainer
+import okhttp3.CertificatePinner
+import okhttp3.OkHttpClient
+import org.json.JSONObject
+import java.io.IOException
+
+class SslPinningFactory(private val context: Context) : OkHttpClientFactory {
+    
+    private val instanceId = System.currentTimeMillis()
+
+    override fun createNewNetworkModuleClient(): OkHttpClient {
+
+        
+        val sharedPreferences = context.getSharedPreferences("AppSettings", Context.MODE_PRIVATE)
+        val useSSLPinning = sharedPreferences.getBoolean("useSSLPinning", true)
+        
+
+
+        val clientBuilder = OkHttpClient.Builder()
+            .cookieJar(ReactCookieJarContainer())
+            .cache(null)
+
+        if (useSSLPinning) {
+
+            try {
+                val configJsonString = getConfigJsonString()
+                if (configJsonString != null) {
+                    val certificatePinnerBuilder = CertificatePinner.Builder()
+                    addCertificatesToPinner(certificatePinnerBuilder, JSONObject(configJsonString))
+                    val certificatePinner = certificatePinnerBuilder.build()
+                    clientBuilder.certificatePinner(certificatePinner)
+
+                } else {
+
+                }
+            } catch (e: Exception) {
+                // SSL pinning setup failed - continue with regular client
+            }
+        } else {
+
+        }
+
+
+        val client = clientBuilder.build()
+
+        
+        return client
+    }
+
+    private fun getConfigJsonString(): String? {
+        val sharedPreferences = context.getSharedPreferences("AppSettings", Context.MODE_PRIVATE)
+        val runtimeConfig = sharedPreferences.getString("sslConfig", null)
+        if (!runtimeConfig.isNullOrEmpty()) {
+
+            return runtimeConfig
+        }
+
+        return try {
+            val inputStream = context.assets.open("ssl_config.json")
+            val size = inputStream.available()
+            val buffer = ByteArray(size)
+            inputStream.read(buffer)
+            inputStream.close()
+
+            String(buffer, Charsets.UTF_8)
+        } catch (e: IOException) {
+
+            null
+        }
+    }
+
+    private fun addCertificatesToPinner(certificatePinnerBuilder: CertificatePinner.Builder, configJson: JSONObject) {
+        val sha256Keys = configJson.getJSONObject("sha256Keys")
+        val hostnames = sha256Keys.keys()
+        while (hostnames.hasNext()) {
+            val hostname = hostnames.next()
+            val keysArray = sha256Keys.getJSONArray(hostname)
+            for (i in 0 until keysArray.length()) {
+                val sha256Key = keysArray.getString(i)
+                certificatePinnerBuilder.add(hostname, sha256Key)
+
+            }
+        }
+    }
+
+    companion object {
+        private const val TAG = "SslPinningFactory"
+    }
+}

package/android/src/main/java/com/usesslpinning/UseSslPinningModuleImpl.kt

@@ -0,0 +1,34 @@
+package com.usesslpinning
+
+import android.content.Context
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.modules.network.OkHttpClientProvider
+
+object UseSslPinningModuleImpl {
+    const val NAME = "UseSslPinning"
+    
+    fun initialize(reactContext: ReactApplicationContext) {
+        try {
+            OkHttpClientProvider.setOkHttpClientFactory(SslPinningFactory(reactContext))
+        } catch (e: Exception) {
+            // SSL Factory setup failed - continue without custom factory
+        }
+    }
+    
+    fun setUseSSLPinning(reactContext: ReactApplicationContext, usePinning: Boolean, promise: Promise) {
+        val sharedPreferences = reactContext.getSharedPreferences("AppSettings", Context.MODE_PRIVATE)
+        sharedPreferences.edit().putBoolean("useSSLPinning", usePinning).apply()
+        
+        // Force new factory creation to bypass RN client cache
+        OkHttpClientProvider.setOkHttpClientFactory(SslPinningFactory(reactContext))
+        
+        promise.resolve(null)
+    }
+    
+    fun getUseSSLPinning(reactContext: ReactApplicationContext, promise: Promise) {
+        val sharedPreferences = reactContext.getSharedPreferences("AppSettings", Context.MODE_PRIVATE)
+        val usePinning = sharedPreferences.getBoolean("useSSLPinning", true)
+        promise.resolve(usePinning)
+    }
+}

package/android/src/newarch/com/usesslpinning/UseSslPinningModule.kt

@@ -0,0 +1,26 @@
+package com.usesslpinning
+
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.annotations.ReactModule
+
+@ReactModule(name = UseSslPinningModuleImpl.NAME)
+class UseSslPinningModule(reactContext: ReactApplicationContext) : 
+    NativeUseSslPinningSpec(reactContext) {
+
+    init {
+        UseSslPinningModuleImpl.initialize(reactContext)
+    }
+
+    override fun getName(): String {
+        return UseSslPinningModuleImpl.NAME
+    }
+
+    override fun setUseSSLPinning(usePinning: Boolean, promise: Promise) {
+        UseSslPinningModuleImpl.setUseSSLPinning(reactApplicationContext, usePinning, promise)
+    }
+
+    override fun getUseSSLPinning(promise: Promise) {
+        UseSslPinningModuleImpl.getUseSSLPinning(reactApplicationContext, promise)
+    }
+}

package/android/src/newarch/com/usesslpinning/UseSslPinningPackage.kt

@@ -0,0 +1,36 @@
+package com.usesslpinning
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
+import com.facebook.react.module.model.ReactModuleInfoProvider
+
+class UseSslPinningPackage : BaseReactPackage() {
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+    return when (name) {
+      UseSslPinningModuleImpl.NAME -> UseSslPinningModule(reactContext)
+      else -> null
+    }
+  }
+
+  override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
+    return ReactModuleInfoProvider {
+      val isTurboModule = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+
+      val moduleInfo = ReactModuleInfo(
+        UseSslPinningModuleImpl.NAME,
+        UseSslPinningModuleImpl.NAME,
+        false,
+        true,
+        true,
+        false,
+        isTurboModule
+      )
+
+      mapOf(
+        UseSslPinningModuleImpl.NAME to moduleInfo
+      )
+    }
+  }
+}