# Sign In with Device

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

### What you're building

![Trusted Devices using Cotter's React Native SDK](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-M2k7vbf1vx5ChiypmkE%2F-M2kXnFknrHlQ5gjoZar%2Fimage.png?alt=media\&token=8dea76d7-cd81-43f1-a3de-18c5d298ce5f)

## Steps

1. [Import Cotter as a dependency](#step-1-import-cotter-as-a-dependency)
2. [Set up Cotter in your Project](#step-2-set-up-cotter-in-your-project)
3. [Register the current device as a Trusted Device](#step-4-register-this-device-as-a-trusted-device)
4. [Authenticate from a Trusted Device and Non-Trusted Device](#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*](https://docs.cotter.app/sdk-reference/react-native/installation)*.*

### 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](https://docs.cotter.app/getting-access-token/verifying-jwt-tokens). 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](https://docs.cotter.app/sdk-reference/react-native/getting-stored-oauth-tokens-and-user-information).
{% 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="../../getting-access-token/verifying-jwt-tokens" %}
[verifying-jwt-tokens](https://docs.cotter.app/getting-access-token/verifying-jwt-tokens)
{% endcontent-ref %}

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

We'll cover this in the next guide:

{% content-ref url="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 %}

## 🎉 You're done!