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: Make an Authentication Request
  • Case 1: The current device is a Trusted Device
  • Case 2: The current device is NOT a Trusted Device
  • Step 2: How to approve a pending request from a Trusted Device
  • Step 3: Get the access token and validate it in your back end
  1. 📘SDK Reference
  2. React Native
  3. Sign In with Device

Authenticate from a Non-Trusted Device

PreviousAdd Email/Phone VerificationNextAdd a new Trusted Device

Last updated 4 years ago

Steps

There are 2 steps in authenticating a Non-Trusted Device

  1. from the Non-Trusted Device and wait for approval. The SDK will automatically show a prompt asking the user to approve this request from the Trusted Device.

  2. from a Trusted Device. The user should tap a button to check if there's a login request. They can then approve or reject the login request.

  3. When the login request is approved, the Non-Trusted Device will receive oauth_tokens . You should validate these tokens in your backend.

Step 1: Make an Authentication Request

// 1️⃣ Request trusted device authentication
var cotter = new Cotter(API_KEY_ID);
cotter.signInWithDevice(
  identifier,  // User's email, phone or username
  this.onRequestSuccess,
  this.onRequestError,
);

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

Case 1: The current device is a Trusted Device

Case 2: The current device is NOT a Trusted Device

If the current device is not a Trusted Device, then it will create a pending event. This pending event will need to be approved by a Trusted Device.

Step 2: How to approve a pending request from a Trusted Device

To check if there's a pending event for this user, you can call the getNewEvent method from a Trusted Device.

approveLogin = async () => {
    let cotter = new Cotter(API_KEY_ID);
    try {
      let user = await cotter.getLoggedInUser();
      await user.checkNewSignInRequest();
    } catch (err) {
      console.log(err);
    }
}

...
<Button 
  onPress={this.approveLogin} 
  title="Approve Login"
/>

In the future, your app that is installed in a Trusted Device will receive a notification and this method is invoked when the notification is opened.

For now, you should tell your user to press a button and invoke this method when they try to login from a non-trusted device.

The SDK will open a prompt in the Trusted Device asking if the user want to approve or reject the authentication request

In the prompt in the user's Non-Trusted Device (right picture), you can Customize the Prompt to ask them to press a specific button in the Trusted Device to invoke the prompt on the left.

Step 3: Get the access token and validate it in your back end

When the user approved the login request in the Trusted Device, your onSuccess function in the authentication request in step 1 will be invoked and will receive a JSON response with an access token:

{
  // 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"
}

You should pass the access_token to your backend when logging-in users, approving transactions, etc. Learn how to validate the access token:

Verifying JWT Tokens

Same as how it works with , to authenticate a device, call cotter.signInWithDevice . This will automatically detect whether the current device is a Trusted Device or not.

You will be automatically approved if the request is coming from a Trusted Device. This is covered in .

Authenticating from a Trusted Device
Authenticate from a Trusted Device
Make a request
Approve the request
Requesting Login from a Non-Trusted Device
Press a button to approve a login request from the Trusted Device
Prompt to approve request from a Trusted Device
When approved, you'll receive the JSON response