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
  • Sign in with Device
  • Step 1️: Get Cotter SDK
  • Step 2️: Wrap your root component with connectCotterWrapper
  • Step 3️: Register user and trust this device
  • Step 4️: Logging In from a Trusted Device
  • 🎉 You're Done
  • 👉 What's Next?
  • Verify User's Email or Phone Number
  • Logging-in from Another Device
  1. Quickstart Guides

React Native – Sign in with Device

Cotter's Passwordless SDK authenticates your user based on their device. It allows a seamless, fast, and secure way for your user to login to your React Native App.

PreviousReact – WebAuthnNextiOS – Sign in with Device

Last updated 4 years ago

Sign in with Device

In this guide we'll allow users to Sign In with Device using Cotter's SDK.

Make sure you're using react-native version < 0.63

Step 1️: Get Cotter SDK

Head to and allow Trusted Devices in the dashboard.

yarn add react-native-cotter react-native-device-info rn-secure-storage react-native-randombytes react-native-camera react-native-svg react-native-securerandom buffer react-native-inappbrowser-reborn react-native-sha256
npx pod-install ios
npm install  --save react-native-cotter react-native-device-info rn-secure-storage react-native-randombytes react-native-camera react-native-svg react-native-securerandom buffer react-native-inappbrowser-reborn react-native-sha256
npx pod-install ios

Make sure you use version >= 0.2.0. Checkout additional steps , , and .

Step 2️: Wrap your root component with connectCotterWrapper

import {connectCotterWrapper} from 'react-native-cotter';

class MyApp extends Component {...}
export default connectCotterWrapper(MyApp);

Step 3️: Register user and trust this device

This method signUpWithDevice will register the user based on the user's identifier to Cotter and then trust the current device.

import { Cotter } from "react-native-cotter";

const register = (identifier) => {
  // Signup the user and trust this device
  var cotter = new Cotter(API_KEY_ID);
  cotter.signUpWithDevice(
    identifier, // User's email, phone or username
    (response) => {console.log(response)}, // OnSuccess function
    (error) => {console.log(error)}, // OnError function
  );
};
// Returns the newly created User object in Cotter
// along with oauth tokens

{
  "ID": "cccccccc-cccc-cccc-cccc-cccccccccccc",
  "client_user_id": "bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb",
  "created_at": "2020-06-09T03:50:04.005779Z",
  "default_method": "TRUSTED_DEVICE",
  "deleted_at": null,
  "enrolled": [
    "TRUSTED_DEVICE"
  ],
  "identifiers": [
    "hello@cotter.app"
  ],
  "issuer": "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa",
  "oauth_token": {
    "access_token": "eyJhbGciOi...",
    "auth_method": "TRUSTED_DEVICE",
    "expires_in": 3600,
    "id_token": "eyJhbGciOiJFU...",
    "refresh_token": "6177:MufdKMIk2XP...",
    "token_type": "Bearer"
  },
  "update_at": "2020-06-09T03:50:04.77575278Z"
}

Step 4️: Logging In from a Trusted Device

Use the signInWithDevice method to login with the same identifier as the one registered above.

import { Cotter } from "react-native-cotter";

const login = (identifier) => { 
    var cotter = new Cotter(API_KEY_ID);
    cotter.signInWithDevice(
        identifier, // User's email, phone or username
        (response) => {console.log(response)}, // OnSuccess function
        (error) => {console.log(error)}, // OnError function
    );
}
{
  "ID": 1361, // Event ID
  "CreatedAt": "2020-02-27T22:22:48.705212512Z",
  "UpdatedAt": "2020-02-27T22:22:48.705212512Z",
  "DeletedAt": null,
  "client_user_id": "1014", // your client's User ID
  "issuer": "afcabd98-745f-4b9e-98de-af968d9951d3", // your API Key
  "event": "<EVENT NAME>",// requested event (LOGIN, or TRANSACTION, etc)
  "ip": "192.168.232.2", 
  "location": "Unknown",
  "timestamp": "1582842167",
  "method": "TRUSTED_DEVICE", // auth method: TRUSTED_DEVICE (other choices are PIN / BIOMETRIC)
  "new": false, // Is this a new pending event. More explanation below about Non-Trusted Device
  "approved": true, // Is this event approved.
  "signature": "oonMGCAxp3..." // Signature to make sure this event comes from Cotter's server
}

🎉 You're Done

Now you can allow your users to Sign In with Device with just 1 tap. When your sessions expires, you can also Sign In User Silently by just calling the method signInWithDevice above.

Find a more detailed version of this guide in our Trusted Devices section

👉 What's Next?

Verify User's Email or Phone Number

Logging-in from Another Device

📌
https://dev.cotter.app/rules
for Android
React Native < 0.60
Manual Installation
Sign In with Device
Sign In with Email/Phone Number
Authenticate from a Non-Trusted Device