Cotter
  • 🚀Getting Started
  • Features & Concepts
    • 💬Sign In with Email/Phone Number
    • 🔐Sign In with Device
      • How it works
    • 🧬Sign In with WebAuthn
  • 📌Quickstart Guides
    • All Guides & Tutorials
    • HTML – Sign in with Email/Phone
    • React – Sign in with Email/Phone
    • React – WebAuthn
    • ▲ Next.js
    • Angular
    • Webflow
    • Bubble.io
    • Python SDK for a CLI
    • React Native – Sign in with Device
    • iOS – Sign in with Device
    • Flutter – Sign in with Device
  • 📘SDK Reference
    • Web
      • Sign In with Email/Phone Number
        • Customize the Form
        • Checking the email or phone before sending a verification code
        • Sending Code or Link via WhatsApp
        • Styling
        • Older SDK
          • Customize the Form
      • Sign in with Social Login
        • Getting Access Tokens from Social Login Providers
        • Github Instructions
        • Google Instructions
      • Sign In with WebAuthn
        • Register WebAuthn for a logged-in user
      • Sign In with Device
        • Steps for Pop Up Authentication Prompt
        • Advanced Customization for Login Form
        • Advanced Customization for Pop Up Authentication Prompt
      • Getting Access Token and Logged-In User Info
      • Sending Successful Form Submission
      • FAQ & Troubleshooting
    • React Native
      • Installation
      • Sign In with Device
        • Add Email/Phone Verification
        • Authenticate from a Non-Trusted Device
        • Add a new Trusted Device
        • Remove Trusted Device
      • Sign In with Email/Phone Number
      • Getting Stored OAuth Tokens and User Information
      • FAQ
      • Older SDK Versions
        • Sign in with Email/Phone
        • Sending Code via WhatsApp
        • Sign In with Device
          • Authenticate from a Non-Trusted Device
          • Add a new Trusted Device
          • Customization
    • Flutter
      • Sign In with Device
        • Add Email/Phone Verification
        • Authenticate from a Non-Trusted Device
      • Sign in with Email/Phone Number
      • Getting the Logged-in User
      • Getting OAuth Tokens
      • Signing a User Out
    • iOS
      • Sign In with Email/Phone Number
      • Sign In with Device
        • Authenticate from a Non-Trusted Device
        • Push Notification
        • Check if Trusted Device is Enrolled
        • Add a New Trusted Device
        • Remove Trusted Device
      • Older Versions
        • Biometric/Pin
    • Android
      • Sign In with Device
        • Authenticate from a Non-Trusted Device
        • Check if Trusted Device is Enrolled
        • Add a new Trusted Device
        • Remove Trusted Device
        • Customization
      • Sign In with Email/Phone Number
      • Biometric/Pin
        • Advanced Methods
        • Customization
        • Setting Strings
        • Styling
      • Older SDK Version
        • Sign In with Device
          • Authenticate from a Non-Trusted Device
    • Python (for CLI)
    • API for Other Mobile Apps or CLI
      • Verify Email/Phone Number
        • Handling URL Scheme
    • Backend: Handling Response
  • 🛡️ Protecting Your Account
    • Only Allow Your Website/App to Use Your API Key
    • Rate Limit
    • Enable reCAPTCHA to Protect Against Automated Abuse
  • 🗝️ Getting Access Token
    • Cotter's OAuth 2.0 Tokens Specification
    • Getting the Tokens
      • Get Tokens during Authentication
      • Using the Refresh Token
    • Storing and Removing Tokens
    • Renewing Expired Tokens
    • Verifying JWT Tokens
    • Requesting Custom Fields on your JWT Token
    • Older API
      • Using HTTP Requests
      • Getting the Tokens
        • During Authentication
          • During Email/Phone Verification
        • During enrolling Trusted Devices
  • 🔌API Reference
    • User API
      • User Object
    • OAuth Tokens API
      • Verify JWT Token using API (serverless)
      • Requesting Custom Claims on your Access Token
      • Older API
    • OAuth Tokens from Social Login
    • Event Object
    • Reset PIN API
  • Older API
    • Validating Cotter's Identity Token
    • Validating Cotter's Event Response
Powered by GitBook
On this page
  • Steps
  • Step 1: Check if this device is a Trusted Device
  • Step 2: Show the QR Code of the New Device
  • Step 3: Scan the QR Code from a Trusted Device
  • Setup Permission to Allow Camera
  • Scan the QR Code
  1. SDK Reference
  2. React Native
  3. Older SDK Versions
  4. Sign In with Device

Add a new Trusted Device

PreviousAuthenticate from a Non-Trusted DeviceNextCustomization

Last updated 4 years ago

Steps

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

  1. Check if this device is a Trusted Device

  2. of the New Non-Trusted Device

  3. using the 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: ()

  1. Clean up Xcode stale data with npx react-native-clean-project --remove-iOS-build --remove-iOS-pods

📘
Show the QR Code
Scan the New Device's QR Code