A simple react native module to interact with OpenVPN

react-native-simple-openvpn

A simple react native module to interact with OpenVPN

Versions

RNSimpleOpenvpn React Native
0.56 ~ 0.65

Preview

Installation

Adding dependencies

# npm
npm install --save react-native-simple-openvpn

# or use yarn
yarn add react-native-simple-openvpn

From react-native 0.60 autolinking will take care of the link step

react-native link react-native-simple-openvpn

iOS

If using CocoaPods, run it in the ios/ directory

pod install

See iOS Guide for iOS side Network Extension configuration and OpenVPN integration

Usage

import React, { useEffect } from 'react';
import { Platform } from 'react-native';
import RNSimpleOpenvpn, { addVpnStateListener, removeVpnStateListener } from 'react-native-simple-openvpn';

const isIPhone = Platform.OS === 'ios';

const App = () => {
  useEffect(() => {
    async function observeVpn() {
      if (isIPhone) {
        await RNSimpleOpenvpn.observeState();
      }

      addVpnStateListener((e) => {
        // ...
      });
    }

    observeVpn();

    return async () => {
      if (isIPhone) {
        await RNSimpleOpenvpn.stopObserveState();
      }

      removeVpnStateListener();
    };
  });

  async function startOvpn() {
    try {
      await RNSimpleOpenvpn.connect({
        remoteAddress: '192.168.1.1 3000',
        ovpnFileName: 'client',
        assetsPath: 'ovpn/',
        providerBundleIdentifier: 'com.example.RNSimpleOvpnTest.NEOpenVPN',
        localizedDescription: 'RNSimpleOvpn',
      });
    } catch (error) {
      // ...
    }
  }

  async function stopOvpn() {
    try {
      await RNSimpleOpenvpn.disconnect();
    } catch (error) {
      // ...
    }
  }

  function printVpnState() {
    console.log(JSON.stringify(RNSimpleOpenvpn.VpnState, undefined, 2));
  }

  // ...
};

export default App;

Methods

Name iOS Android Parameters Return Description
connect options: VpnOptions promise Connecting to OpenVPN
disconnect none promise Close the OpenVPN connection
observeState none promise Listening for VPN status
stopObserveState none promise Stop listening to VPN status
addVpnStateListener callback: (e: VpnEventParams) => void void Add VPN status change event listener
removeVpnStateListener none void Remove the VPN status change event listener

Properties

Name Value Description
VpnState VPN_STATE_DISCONNECTED = 0
VPN_STATE_CONNECTING = 1
VPN_STATE_CONNECTED = 2
VPN_STATE_DISCONNECTING = 3
VPN_OTHER_STATE = 4
VPN Current Status

Types

VpnOptions

interface VpnOptions {
  remoteAddress?: string;
  ovpnFileName?: string;
  assetsPath?: string;
  providerBundleIdentifier: string;
  localizedDescription?: string;
}

remoteAddress

VPN server address, the format is <ip> <port>, use the address in the configuration file of xxx.ovpn when it is not passed in

ovpnFileName

The name of the OpenVPN configuration file, without extensions, using the default name client if not passed in

assetsPath

Android only,the path to the OpenVPN configuration file under android/app/src/main/assets/

  • assetsPath is '' when not passed in, the file path is assets/xxx.ovpn
  • When passing in a path, such as 'ovpn/', the file path is assets/ovpn/xxx.ovpn

providerBundleIdentifier

iOS only,the bundle identifier of the Network Extension target

localizedDescription

iOS only,the localized description name of the app in Settings -> VPN. If it is not passed in, the default name RNSimpleOpenvpn will be used

VpnEventParams

interface VpnEventParams {
  state: RNSimpleOpenvpn.VpnState; // VPN Status
  message: string; // VPN Status Related Messages
  level?: string; // Description of the connection status provided by the Android OpenVPN library
}

Attention

xxx.ovpn configuration file

Don't forget to add the configuration file to your project

  • The Android path is android/app/src/main/assets/,create a new assets folder if you don't have one

  • The iOS path is the main bundle, just drag and drop the file into the project

The format of the line where remote is located in the file must be of the following form

...
remote <IP address> <port>
...

If you don't need to dynamically modify the remote address in the configuration file, the same configuration file is used for Android and iOS, and the remoteAddress of options can be left out

However, if you need to dynamically change the remote address in the configuration file, the iOS configuration file needs to comment out the line where remote is located (below) and always pass remoteAddress for options

...
;remote <IP address> <port>>
...

OpenVPN library

The following items were used in this project

  • Android - ics-openvpn, for personal project reasons, the Android side is currently using an older version of its core library
  • iOS - OpenVPNAdapter v0.8.0

GitHub

https://github.com/ccnnde/react-native-simple-openvpn