DEV Community

Cotter profile image Putri Karunia
Putri Karunia for Cotter

Posted on • Originally published at blog.cotter.app on

Say Goodbye To Passwords: The Easy Way to Add Sign In With Device to Your React Native App in 5 Minutes

#guides #tutorials #authentication #react

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

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
Enter fullscreen mode Exit fullscreen mode 
cd PenguinApp 
npx react-native run-ios
Enter fullscreen mode Exit fullscreen mode

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.

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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

// 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%',
  },
});
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

(Optional) Check out additional steps for Android, React Native < 0.60, and Manual Installation.

Now close your terminal and re-run

npx react-native run-ios
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

// 2️⃣ Import Cotter's package
import { Cotter } from "react-native-cotter";
Enter fullscreen mode Exit fullscreen mode

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() .

// 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) },
    );
  };
Enter fullscreen mode Exit fullscreen mode

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

  // 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) },
    );
  };
Enter fullscreen mode Exit fullscreen mode

Step 3: Call onRegister and onLogin on button press 

{/* 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>
Enter fullscreen mode Exit fullscreen mode

Try it out!

Sign in with Device
Sign in with device using Cotter's React Native SDK

  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 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. It covers how to:

  1. Login using your website: Show a prompt in the app that asks the user to approve or deny the login request.
  2. Add more devices.
  3. Verify users' email and phone numbers.

Questions & Feedback

If you have any questions or feedback, feel free to join Cotter's Slack Channel 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 and check out our documentation.

Top comments (0)

Read next

gitter4coding profile image

The Fastest Way to Build a React Project in 2025 (with the Latest Tools)

gitter4coding -

igbikisimewari profile image

Best Version Control Practices Every React Development Team Needs To Know

Joseph Abraham -

gyantocode profile image

Building a Custom Audio Player in React: A Step-by-Step Guide

Nilesh Kumar -

dmuraco3 profile image

Guide to Adding Info Text in Sanity Studio

Dylan Muraco -