# Authenticate from a Non-Trusted Device

## Steps

There are 2 steps that's needed to add a new Trusted Device:

1. Check if this device is a Trusted Device
2. [Show the QR Code](https://docs.cotter.app/android/sign-in-with-device/add-a-new-trusted-device#step-1-show-the-qr-code-of-the-new-device) of the New Non-Trusted Device
3. [Scan the New Device's QR Code](https://docs.cotter.app/android/sign-in-with-device/add-a-new-trusted-device#step-2-scanning-the-qr-code-from-a-trusted-device) using the Trusted Device

## Step 1:  Check if this device is a Trusted Device

```javascript
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:

```javascript
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.&#x20;

## Step 3: Scan the QR Code from a Trusted Device

### Setup Permission to Allow Camera

Update your `Info.plist` in `ios/YourProject/Info.plist`

```markup
<?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:

```markup
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.myawesomeapp">

  <!-- Add Camera Permission -->
  <uses-permission android:name="android.permission.CAMERA" />
  <!-- … -->

</manifest>
```

{% hint style="warning" %}
If you get the error **"Cannot choose between the following variants of project :react-native-camera"**:

Add the following to your`android/app/build.gradle`

```
android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' <-- insert this line
  }
}
```

{% endhint %}

{% hint style="warning" %}
If you get the error **"Execution failed for task ':app:mergeDexDebug'"**

Add the following to your`android/app/build.gradle`

```
android {
  ...
  defaultConfig {
    ...
    multiDexEnabled true     <-- insert this line
  }
}
```

{% endhint %}

### Scan the QR Code

To open the Scanner modal:

```java
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.

{% hint style="danger" %}
&#x20;**If you encounter the error Invalid RNPermission X. Should be one of: ()**

1. Clean up Xcode stale data with `npx react-native-clean-project --remove-iOS-build --remove-iOS-pods`
   {% endhint %}