# React Native – Sign in with Device

## Sign in with Device

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

{% hint style="info" %}
Make sure you're using `react-native` version **< 0.63**
{% endhint %}

### Step 1️: Get Cotter SDK <a href="#step-1-get-cotter-sdk" id="step-1-get-cotter-sdk"></a>

**Head to** [**https://dev.cotter.app/rules**](https://dev.cotter.app/rules) **and allow Trusted Devices in the dashboard.**

{% tabs %}
{% tab title="yarn" %}

```
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
```

{% endtab %}

{% tab title="npm" %}

```
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
```

{% endtab %}
{% endtabs %}

**Make sure you use version >= 0.2.0.** Checkout additional steps [for Android](https://docs.cotter.app/trusted-devices/react-native-sdk#for-android), [React Native < 0.60](https://docs.cotter.app/trusted-devices/react-native-sdk#using-react-native-less-than-0-60), and [Manual Installation](https://docs.cotter.app/trusted-devices/react-native-sdk#manual-installation).

### Step 2️: Wrap your root component with `connectCotterWrapper`

```javascript
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.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
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
  );
};
```

{% endtab %}

{% tab title="Response" %}

```javascript
// 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"
}
```

{% endtab %}
{% endtabs %}

### Step 4️: Logging In from a Trusted Device

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

{% tabs %}
{% tab title="JavaScript" %}

```javascript
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
    );
}
```

{% endtab %}

{% tab title="Response" %}

```javascript
{
  "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
}
```

{% endtab %}
{% endtabs %}

## 🎉 You're Done

![](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-M750-7Gw5SxZ8a0tKfy%2F-M7506mlkqL9gr-du1gI%2FpasswordlessLogin.gif?alt=media\&token=126bfafa-1ef0-4a4a-968b-b42e0bde0c97)

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

{% content-ref url="../sdk-reference/react-native/react-native-sdk-passwordless-login" %}
[react-native-sdk-passwordless-login](https://docs.cotter.app/sdk-reference/react-native/react-native-sdk-passwordless-login)
{% endcontent-ref %}

## 👉 What's Next? <a href="#whats-next" id="whats-next"></a>

### Verify User's Email or Phone Number

{% content-ref url="../sdk-reference/react-native/react-native-sdk-verify-email-phone" %}
[react-native-sdk-verify-email-phone](https://docs.cotter.app/sdk-reference/react-native/react-native-sdk-verify-email-phone)
{% endcontent-ref %}

### Logging-in from Another Device

{% content-ref url="../sdk-reference/react-native/react-native-sdk-passwordless-login/authenticate-from-a-non-trusted-device" %}
[authenticate-from-a-non-trusted-device](https://docs.cotter.app/sdk-reference/react-native/react-native-sdk-passwordless-login/authenticate-from-a-non-trusted-device)
{% endcontent-ref %}