# 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

![](/files/-M7506mlkqL9gr-du1gI)

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="/pages/-M2kTuM6W90CT9IpIxHq" %}
[Sign In with Device](/sdk-reference/react-native/react-native-sdk-passwordless-login.md)
{% endcontent-ref %}

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

### Verify User's Email or Phone Number

{% content-ref url="/pages/-M1dk\_Rosjlkj52Hq\_6R" %}
[Sign In with Email/Phone Number](/sdk-reference/react-native/react-native-sdk-verify-email-phone.md)
{% endcontent-ref %}

### Logging-in from Another Device

{% content-ref url="/pages/-M2pWufvpIxKQcm3t4RP" %}
[Authenticate from a Non-Trusted Device](/sdk-reference/react-native/react-native-sdk-passwordless-login/authenticate-from-a-non-trusted-device.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cotter.app/quickstart-guides/react-native-quickstart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.