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
  • What you're building
  • Steps
  • Step 1: Import Cotter as a dependency
  • Step 2: Set up Cotter in your Project
  • Step 3: Register user and trust this device
  • Step 4: Authenticate from a Trusted Device and Non-Trusted Device
  • 🎉 You're done!
  1. SDK Reference
  2. React Native

Sign In with Device

Our React Native SDK offers the easiest way to integrate Cotter's Passwordless Login. You can simply call a function and it does most of the heavy lifting and authentication for you.

PreviousInstallationNextAdd Email/Phone Verification

Last updated 4 years ago

Concepts: Learn about how works.

What you're building

Steps

Step 1: Import Cotter as a dependency

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

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

Step 2: Set up Cotter in your Project

To allow Cotter to display modals, wrap your root component with connectCotterWrapper :

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

class MyApp extends Component {
}

MyApp = 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";

class SignUp extends Component {
  ...
  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
      this.onSuccess,
      this.onError,
    );
  };

  onSuccess = resp => {
    alert('Success');
    console.log(resp);
  };
  
  onError = err => {
    alert('Error');
    console.log(err);
  };
  ...
}

Step 4: Authenticate from a Trusted Device and Non-Trusted Device

To request an authentication from Cotter's SDK, you would need to call cotter.signInWithDevice . This will automatically detect whether the current device is a Trusted Device or not.

// Request authentication
var cotter = new Cotter(API_KEY_ID);
cotter.signInWithDevice(
  identifier, // User's email, phone or username
  this.onSuccess,
  this.onError,
);
{
  // OAuth 2.0 Tokens
  "oauth_token": { 
    "access_token": "eyJhbGciOiJFUzI1N...",
    "auth_method": "TRUSTED_DEVICE",
    "expires_in": 3600,
    "id_token": "eyJhbGciOiJFUzI...",
    "refresh_token": "33625:anGsIfvFd...",
    "token_type": "Bearer"
  },
  // Information about the login request
  "ID": 2535926,
  "CreatedAt": "2020-08-01T01:36:24.321921222Z",
  "DeletedAt": "0001-01-01T00:00:00Z",
  "UpdatedAt": "2020-08-01T01:36:24.321921425Z",
  "approved": true, // This login request is approved
  "client_user_id": "abcdefgh-d15c-466f-aaa3-f029a8e534c3",
  "event": "LOGIN",
  "ip": "172.92.5.201",
  "issuer": "<YOUR API KEY ID>",
  "location": "San Francisco",
  "method": "TRUSTED_DEVICE",
  "new": false,
  "signature": "L6x8sLHyPTOMCxudw34YTFGCEO4dGvakJl0g9dIDjUp2gaXbD7Yfxo86Dr7OEtHYmSYegSJkwmZjMzDnPvltDQ==",
  "timestamp": "1596245784",
  "user_id": "00000000-0000-0000-0000-000000000000"
}

Cotter's SDK will find the user from userEmail , this must be the same as the one used to register the user during sign up.

  • use this access_token to protect all of your API endpoints, or

  • you can use your own session tokens. You'll need to validate this access_token before you generate your session tokens in the backend.

Trusted and Non-Trusted Device

When an Authentication Event is requested using method TRUSTED_DEVICE, there are 2 possible cases:

Case 1: The current device is a Trusted Device

If the current device is a Trusted Device, it should automatically be approved, and you will receive an access token.

{
  ...
  "method": "TRUSTED_DEVICE",
  "new": false, // Is this a new pending event (should be false).
  "approved": true // Is this event approved (should be true).
  "signature": "oonMGCAxp3..." // Signature to make sure this event comes from Cotter's server
}

You should see a result that the event is not new, and that it's approved. You'll receive the oauth_token because the user is successfully authenticated, and you can pass this to your backend to authorize access for the user.

Checkout how to verify the OAuth Tokens from Cotter here:

Case 2: The current device is NOT a Trusted Device

We'll cover this in the next guide:

🎉 You're done!

(Optional) Checkout additional steps .

This function returns oauth_token , including an access_token that you should . You can either:

Cotter's SDK automatically stores the OAuth tokens for you. Check out how to .

📘
for Android, React Native < 0.60, and Manual Installation
validate in your backend
get access tokens and logged-in user information
Verifying JWT Tokens
Authenticate from a Non-Trusted Device
Import Cotter as a dependency
Set up Cotter in your Project
Register the current device as a Trusted Device
Authenticate from a Trusted Device and Non-Trusted Device
Sign in with Device
Trusted Devices using Cotter's React Native SDK