# Sign In with Device

> **Concepts:** Learn about how [**Sign in with Device**](/features/passwordless-login.md) works.

### What you're building

![Trusted Devices using Cotter's React Native SDK](/files/-M2kXnFknrHlQ5gjoZar)

## Steps

1. [Import Cotter as a dependency](/sdk-reference/react-native/react-native-sdk-passwordless-login.md#step-1-import-cotter-as-a-dependency)
2. [Set up Cotter in your Project](/sdk-reference/react-native/react-native-sdk-passwordless-login.md#step-2-set-up-cotter-in-your-project)
3. [Register the current device as a Trusted Device](/sdk-reference/react-native/react-native-sdk-passwordless-login.md#step-4-register-this-device-as-a-trusted-device)
4. [Authenticate from a Trusted Device and Non-Trusted Device](/sdk-reference/react-native/react-native-sdk-passwordless-login.md#step-5-authenticate-from-a-trusted-device-and-non-trusted-device)

### Step 1: Import Cotter as a dependency

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

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

```java
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 %}

*(Optional) Checkout additional steps* [*for Android, React Native < 0.60, and Manual Installation*](/sdk-reference/react-native/installation.md)*.*

### Step 2: Set up Cotter in your Project

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

```javascript
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.&#x20;

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

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

```javascript
// Request authentication
var cotter = new Cotter(API_KEY_ID);
cotter.signInWithDevice(
  identifier, // User's email, phone or username
  this.onSuccess,
  this.onError,
);
```

{% endtab %}

{% tab title="JSON Response" %}

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

{% endtab %}
{% endtabs %}

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](/getting-access-token/verifying-jwt-tokens.md). 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.

{% hint style="info" %}
Cotter's SDK automatically stores the OAuth tokens for you. Check out how to [get access tokens and logged-in user information](/sdk-reference/react-native/getting-stored-oauth-tokens-and-user-information.md).
{% endhint %}

#### 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.

```java
{
  ...
  "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:

{% content-ref url="/pages/-M4HZPVawEx2QN3qLmnv" %}
[Verifying JWT Tokens](/getting-access-token/verifying-jwt-tokens.md)
{% endcontent-ref %}

#### Case 2: The current device is NOT a Trusted Device

We'll cover this in the next guide:

{% 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 %}

## 🎉 You're done!


---

# 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/sdk-reference/react-native/react-native-sdk-passwordless-login.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.