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.

Concepts: Learn about how Sign in with Device works.
What you're building
Trusted Devices using Cotter's React Native SDK
Steps
1.​Import Cotter as a dependency​
2.​Set up Cotter in your Project​
3.​Register the current device as a Trusted Device​
4.​Authenticate from a Trusted Device and Non-Trusted Device​
Step 1: Import Cotter as a dependency
Make sure you're using react-native version < 0.63
yarn
npm
1
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
2
npx pod-install ios
Copied!
1
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
2
npx pod-install ios
Copied!
(Optional) Checkout additional steps for Android, React Native < 0.60, and Manual Installation.
Step 2: Set up Cotter in your Project
To allow Cotter to display modals, wrap your root component with connectCotterWrapper :
1
import {connectCotterWrapper} from 'react-native-cotter';
2
​
3
class MyApp extends Component {
4
}
5
​
6
MyApp = connectCotterWrapper(MyApp);
Copied!
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. 
1
import { Cotter } from "react-native-cotter";
2
​
3
class SignUp extends Component {
4
  ...
5
  register = (identifier) => {
6
    // Signup the user and trust this device
7
    var cotter = new Cotter(API_KEY_ID);
8
    cotter.signUpWithDevice(
9
      identifier, // User's email, phone or username
10
      this.onSuccess,
11
      this.onError,
12
    );
13
  };
14
​
15
  onSuccess = resp => {
16
    alert('Success');
17
    console.log(resp);
18
  };
19
  
20
  onError = err => {
21
    alert('Error');
22
    console.log(err);
23
  };
24
  ...
25
}
Copied!
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.
JavaScript
JSON Response
1
// Request authentication
2
var cotter = new Cotter(API_KEY_ID);
3
cotter.signInWithDevice(
4
  identifier, // User's email, phone or username
5
  this.onSuccess,
6
  this.onError,
7
);
Copied!
1
{
2
  // OAuth 2.0 Tokens
3
  "oauth_token": { 
4
    "access_token": "eyJhbGciOiJFUzI1N...",
5
    "auth_method": "TRUSTED_DEVICE",
6
    "expires_in": 3600,
7
    "id_token": "eyJhbGciOiJFUzI...",
8
    "refresh_token": "33625:anGsIfvFd...",
9
    "token_type": "Bearer"
10
  },
11
  // Information about the login request
12
  "ID": 2535926,
13
  "CreatedAt": "2020-08-01T01:36:24.321921222Z",
14
  "DeletedAt": "0001-01-01T00:00:00Z",
15
  "UpdatedAt": "2020-08-01T01:36:24.321921425Z",
16
  "approved": true, // This login request is approved
17
  "client_user_id": "abcdefgh-d15c-466f-aaa3-f029a8e534c3",
18
  "event": "LOGIN",
19
  "ip": "172.92.5.201",
20
  "issuer": "<YOUR API KEY ID>",
21
  "location": "San Francisco",
22
  "method": "TRUSTED_DEVICE",
23
  "new": false,
24
  "signature": "L6x8sLHyPTOMCxudw34YTFGCEO4dGvakJl0g9dIDjUp2gaXbD7Yfxo86Dr7OEtHYmSYegSJkwmZjMzDnPvltDQ==",
25
  "timestamp": "1596245784",
26
  "user_id": "00000000-0000-0000-0000-000000000000"
27
}
Copied!
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.
This function returns oauth_token , including an access_token that you should validate in your backend. You can either:
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.
Cotter's SDK automatically stores the OAuth tokens for you. Check out how to get access tokens and logged-in user information.
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.
1
{
2
  ...
3
  "method": "TRUSTED_DEVICE",
4
  "new": false, // Is this a new pending event (should be false).
5
  "approved": true // Is this event approved (should be true).
6
  "signature": "oonMGCAxp3..." // Signature to make sure this event comes from Cotter's server
7
}
Copied!
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:
Verifying JWT Tokens
Case 2: The current device is NOT a Trusted Device
We'll cover this in the next guide:
Authenticate from a Non-Trusted Device
🎉 You're done!

Installation

Add Email/Phone Verification

Last modified 9mo ago

Copy link

Contents

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!