Steps
There are 2 steps that's needed to add a new Trusted Device:
Check if this device is a Trusted Device
of the New Non-Trusted Device
Step 1: Check if this device is a Trusted Device
componentDidMount() {
var cotter = new Cotter(
API_KEY_ID,
userID,
);
this.cotter = cotter;
this.checkIfThisDeviceTrusted();
}
checkIfThisDeviceTrusted = () => {
this.cotter.trustedDevice
.trustedDeviceEnrolled()
.then(trusted => {
// trusted = True or False
this.setState({trusted: trusted});
})
.catch(err => console.log(err));
};
Step 2: Show the QR Code of the New Device
To show the QR Code of the new device:
trustThisDevice = () => {
this.cotter.trustedDevice.trustThisDevice(this.onSuccessTrust, this.onErrorTrust);
};
onSuccessTrust = () => {
alert('Success');
};
onErrorTrust = (errmsg, err) => {
alert(errmsg);
};
...
<Button onPress={this.trustThisDevice} title="Make Device a Trusted Device" />
This will open a modal with a QR Code that can be scanned from the Trusted Device.
Step 3: Scan the QR Code from a Trusted Device
Setup Permission to Allow Camera
Update your Info.plist
in ios/YourProject/Info.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<!-- Add Camera Permission -->
<key>NSCameraUsageDescription</key>
<string>YOUR TEXT</string>
<!-- … -->
</dict>
</plist>
Android
Add the permission below to your app android/app/src/main/AndroidManifest.xml
file:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.myawesomeapp">
<!-- Add Camera Permission -->
<uses-permission android:name="android.permission.CAMERA" />
<!-- … -->
</manifest>
If you get the error "Cannot choose between the following variants of project :react-native-camera":
Add the following to yourandroid/app/build.gradle
android {
...
defaultConfig {
...
missingDimensionStrategy 'react-native-camera', 'general' <-- insert this line
}
}
If you get the error "Execution failed for task ':app:mergeDexDebug'"
Add the following to yourandroid/app/build.gradle
android {
...
defaultConfig {
...
multiDexEnabled true <-- insert this line
}
}
Scan the QR Code
To open the Scanner modal:
scanQRCode = () => {
this.cotter.trustedDevice.scanQRCode();
};
...
<Button onPress={this.scanQRCode} title="Add New Device" />
This will open a modal where the user can scan the QR Code displayed on the new device.
If you encounter the error Invalid RNPermission X. Should be one of: ()
Clean up Xcode stale data with npx react-native-clean-project --remove-iOS-build --remove-iOS-pods