Programatically join Wi-Fi network on iOS with React Native wrapper for NEHotspotConfiguration

example.js

import { Platform, NativeModules } from 'react-native'

const IOSWifiManager = NativeModules.IOSWifiManager

const wifiConnect = (ssid) => (
  IOSWifiManager.connectToSSID(ssid)
)

const wifiConnectProtected = (ssid, password, isWep) => (
  IOSWifiManager.connectToProtectedSSID(ssid, password, isWep)
)

const wifiDisconnect = (ssid) => (
  IOSWifiManager.disconnectFromSSID(ssid)
)

const wifiCurrentSSID = () => (
  IOSWifiManager.currentSSID()
)

const wifiSettingsURL = IOSWifiManager.settingsURL

IOSWifiManager.h

// Created by Rutger Bresjer on 10/10/2017

// Notes:
// - Be sure to enable "Hotspot Configuration" capability for the iOS target
// - Make sure the NetworkExtension framework is linked to the target

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface IOSWifiManager : NSObject <RCTBridgeModule>

@end

IOSWifiManager.m

#import "IOSWifiManager.h"
#import <NetworkExtension/NetworkExtension.h>
#import <SystemConfiguration/CaptiveNetwork.h>
// If using official settings URL
//#import <UIKit/UIKit.h>

@implementation IOSWifiManager
RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(connectToSSID:(NSString*)ssid
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject) {
  
  if (@available(iOS 11.0, *)) {
    NEHotspotConfiguration* configuration = [[NEHotspotConfiguration alloc] initWithSSID:ssid];
    configuration.joinOnce = true;
    
    [[NEHotspotConfigurationManager sharedManager] applyConfiguration:configuration completionHandler:^(NSError * _Nullable error) {
      if (error != nil) {
        reject(@"nehotspot_error", @"Error while configuring WiFi", error);
      } else {
        resolve(nil);
      }
    }];
    
  } else {
    reject(@"ios_error", @"Not supported in iOS<11.0", nil);
  }
}

RCT_EXPORT_METHOD(connectToProtectedSSID:(NSString*)ssid
                  withPassphrase:(NSString*)passphrase
                  isWEP:(BOOL)isWEP
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject) {
  
  if (@available(iOS 11.0, *)) {
    NEHotspotConfiguration* configuration = [[NEHotspotConfiguration alloc] initWithSSID:ssid passphrase:passphrase isWEP:isWEP];
    configuration.joinOnce = true;
    
    [[NEHotspotConfigurationManager sharedManager] applyConfiguration:configuration completionHandler:^(NSError * _Nullable error) {
      if (error != nil) {
        reject(@"nehotspot_error", @"Error while configuring WiFi", error);
      } else {
        resolve(nil);
      }
    }];
    
  } else {
    reject(@"ios_error", @"Not supported in iOS<11.0", nil);
  }
}

RCT_EXPORT_METHOD(disconnectFromSSID:(NSString*)ssid
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject) {
  
  if (@available(iOS 11.0, *)) {
    [[NEHotspotConfigurationManager sharedManager] getConfiguredSSIDsWithCompletionHandler:^(NSArray<NSString *> *ssids) {
      if (ssids != nil && [ssids indexOfObject:ssid] != NSNotFound) {
        [[NEHotspotConfigurationManager sharedManager] removeConfigurationForSSID:ssid];
      }
      resolve(nil);
    }];
  } else {
    reject(@"ios_error", @"Not supported in iOS<11.0", nil);
  }
  
}

RCT_REMAP_METHOD(currentSSID,
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject) {
  
  NSString *kSSID = (NSString*) kCNNetworkInfoKeySSID;
  
  NSArray *ifs = (__bridge_transfer id)CNCopySupportedInterfaces();
  for (NSString *ifnam in ifs) {
    NSDictionary *info = (__bridge_transfer id)CNCopyCurrentNetworkInfo((__bridge CFStringRef)ifnam);
    if (info[kSSID]) {
      resolve(info[kSSID]);
      return;
    }
  }
  
  reject(@"cannot_detect_ssid", @"Cannot detect SSID", nil);
}

- (NSDictionary*)constantsToExport {
  // Officially better to use UIApplicationOpenSettingsURLString
  return @{
           @"settingsURL": @"App-Prefs:root=WIFI"
           };
}

@end

Hi. I'm working on an app similar to yours and it would be great if you could maybe provide some insight into how I might implement this into my app? New to RN and just about to eject. Any help would be appreciated!

Hi. I'm working on an app similar to yours and it would be great if you could maybe provide some insight into how I might implement this into my app? New to RN and just about to eject. Any help would be appreciated!

@rbresjer +1

@rbresjer +1

Here's a library that appears to work on a similar way:

https://www.npmjs.com/package/react-native-iot-wifi

Important IOTWifi uses NEHotspotConfigurationManager. To use the NEHotspotConfigurationManager class, you must enable the Hotspot Configuration capability in Xcode.