Say Goodbye To Passwords: The Easy Way to Add Sign In With Device to Your React Native App in 5 Minutes
Tags: guides, tutorials, authentication, react
Published: 2020-07-09 17:07:25

---
title: Say Goodbye To Passwords: The Easy Way to Add Sign In With Device to Your React Native App in 5 Minutes
published: true
date: 2020-05-12 20:01:22 UTC
tags: Guides,Tutorials,Authentication, React
canonical_url: https://blog.cotter.app/say-goodbye-to-passwords-the-easy-way-to-add-sign-in-with-device-to-your-react-native-app-in-5-minutes/
---

We'll go over how to build a React Native app and allow users to "Sign in with device".

 ![Say Goodbye To Passwords: The Easy Way to Add Sign In With Device to Your React Native App in 5 Minutes](https://blog.cotter.app/content/images/2020/05/SignInWithDevice.png)

Let's build a simple React Native app that allows your users to **Sign In with Device**. To follow along with this tutorial, you'll need to install Xcode or Android Studio.

## Create a New React Native App

We'll name our app the **Penguin App.** To create and run a new app:

```
npx react-native init PenguinApp
```
```
cd PenguinApp 
npx react-native run-ios
```

Run `react-native run-android` for Android.

# Styling our App.js

Let's add an **email input field** , a **Register** button, and a **Sign In** button. Copy the code below into your `App.js`.

```react
import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  TextInput,
  TouchableOpacity,
} from 'react-native';
// 1️⃣ Import Cotter's Wrapper
// 👉 Copy Paste Code Here 👈

// 2️⃣ Import Cotter's package
// 👉 Copy Paste Code Here 👈

function App() {
  // 2️⃣ onRegister: Trust this device
// 👉 Copy Paste Code Here 👈

  // 2️⃣ onLogin: Sign in with device
// 👉 Copy Paste Code Here 👈

  const [email, onChangeText] = React.useState(null);

  return (
    <View style={styles.container}>
      <Text style={styles.logo}>🐧</Text>
      <Text style={[styles.text, {fontSize: 20, marginTop: 20}]}>
        Welcome to
      </Text>
      <Text style={[styles.text, {fontSize: 30}]}>Penguin App</Text>

      <Text style={styles.normalText}>Email</Text>
      <TextInput
        style={styles.input}
        onChangeText={(text) => onChangeText(text)}
        value={email}
        placeholder="hello@example.com"
        placeholderTextColor="#c0c0c0"
        autoCapitalize="none"
      />

      {/* 3️⃣ Call onRegister and onLogin on the buttons */}
      {/* 👇 Replace the Code Below 👇 */}
      <TouchableOpacity style={styles.button}>
        <Text style={[styles.text, styles.signupText]}>Register</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.buttonLogin}>
        <Text style={[styles.text, styles.loginText]}>Sign in with device</Text>
      </TouchableOpacity>
    </View>
  );
}
```

and also copy and paste the code below to App.js (these are not two different files, both will be under App.js).

```react
// 1️⃣ Wrap your root component with Cotter's wrapper
// 👇 Replace the Code Below 👇
export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'flex-start',
    justifyContent: 'center',
    backgroundColor: '#FFFFFF',
    padding: 40,
  },
  logo: {
    fontSize: 80,
  },
  text: {
    fontWeight: '700',
    color: '#714EEF',
    fontFamily: 'Avenir',
  },
  button: {
    width: '100%',
    padding: 10,
    borderRadius: 5,
    alignSelf: 'flex-end',
    backgroundColor: '#714EEF',
    marginTop: 'auto',
  },
  buttonLogin: {
    width: '100%',
    padding: 10,
    borderRadius: 5,
    alignSelf: 'flex-end',
    borderColor: '#714EEF22',
    borderWidth: 2,
    marginTop: 10,
  },
  signupText: {
    color: '#FFFFFF',
    textAlign: 'center',
    fontSize: 18,
  },
  loginText: {
    color: '#714EEF',
    textAlign: 'center',
    fontSize: 16,
  },
  normalText: {
    fontWeight: 'normal',
    fontSize: 15,
    marginTop: 'auto',
    fontFamily: 'Avenir',
  },
  input: {
    height: 40,
    borderBottomColor: '#e0e0e0',
    borderBottomWidth: 2,
    width: '100%',
  },
});
```



# Signing users in using their device

### Install Dependencies

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

_(Optional) Check out 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)._

Now **close your terminal** and re-run

```
npx react-native run-ios
```

### Step 1️: Wrap `App` inside `App.js` with `connectCotterWrapper`

```react
// App.js
// 1️⃣ Import Cotter's Wrapper
import {connectCotterWrapper} from 'react-native-cotter';
```
```react
function App() {...}

// 1️⃣ At the bottom: Wrap your root component with Cotter's wrapper
export default connectCotterWrapper(App);
```

### Step 2: Enable "Sign in with device".

**Get API Keys and Enable "Trusted Device" for your project.**

1. You'll need your `API_KEY_ID`  here. [Create a free developer account at Cotter](https://dev.cotter.app/), then create a project and take notes of your API keys. 
2. Go to **Rules** , and switch on **Trusted Devices**.

**Import Cotter's Package in `App.js` and define the register and login functions.**

```react
// 2️⃣ Import Cotter's package
import { Cotter } from "react-native-cotter";
```

**Register:** When a user makes an account for the first time, we will automatically register the current device as trusted to allow sign in with device by calling `cotter.trustedDevice.enrollDevice()` .

```react
// 2️⃣ onRegister: Trust this device
const onRegister = () => {
    var cotter = new Cotter(
      API_KEY_ID, // 👈 Specify your API KEY ID here
      email,
    );
    cotter.trustedDevice.enrollDevice(
      (resp) => { alert('Register Device Success'), console.log(resp) },
      (errMsg, err) => { alert(errMsg), console.log(err) },
    );
  };
```

**Login:** After that, call `cotter.trustedDevice.requestAuth()` on login to sign in with device.

```react
  // 2️⃣ onLogin: Sign In with Device
  const onLogin = () => {
    var cotter = new Cotter(
      API_KEY_ID, // 👈 Specify your API KEY ID here
      email,
    );
    cotter.trustedDevice.requestAuth(
      'LOGIN',
      (resp) => { alert('Login Success'), console.log(resp) },
      (errMsg, err) => { alert(errMsg), console.log(err) },
    );
  };
```

### Step 3: Call `onRegister` and `onLogin` on button press

```react
{/* 3️⃣ Call onRegister and onLogin on the buttons */}
<TouchableOpacity style={styles.button} onPress={onRegister}>
    <Text style={[styles.text, styles.signupText]}>Register</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonLogin} onPress={onLogin}>
    <Text style={[styles.text, styles.loginText]}>Sign in with device</Text>
</TouchableOpacity>
```

# Try it out!
![Sign in with Device](https://dev-to-uploads.s3.amazonaws.com/i/tc8jfpgcx85lxj1loc9r.gif)<figcaption>Sign in with device using Cotter's React Native SDK</figcaption>

1. Enter an email address and press **Register**
2. Enter the same email address and press **Login** , you should be able to successfully login with the device.

**That's it!** From now on, you can always log in using that email by just pressing the Login button. The SDK will automatically handle the cryptographic function used to verify your device.

### How it works

Check out our [documentation about Passwordless Login](https://docs.cotter.app/trusted-devices/what-is-a-trusted-device) to find out how our SDK authenticates users based on their device.

# What's Next?

Find [the complete guide for **Sign in with Device** in our documentation](https://docs.cotter.app/trusted-devices/react-native-sdk). It covers how to:

1. [Login using your website](https://docs.cotter.app/trusted-devices/javascript-sdk-web): Show a prompt in the app that asks the user to approve or deny the login request.
2. [Add more devices](https://docs.cotter.app/trusted-devices/react-native-sdk/add-a-new-trusted-device).
3. [Verify users' email and phone numbers](https://docs.cotter.app/verify-email-and-phone-number/react-native-sdk).

* * *

### Questions & Feedback

If you have any questions or feedback, feel free to join [Cotter's Slack Channel](https://join.slack.com/t/askcotter/shared_invite/zt-dxzf311g-5Mp3~odZNB2DwYaxIJ1dJA) and chat us there.

### Ready to use Cotter?

If you enjoyed this tutorial and want to integrate Cotter into your website or app, you can [create a free account](https://dev.cotter.app/) and [check out our documentation](https://docs.cotter.app/).