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

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.

Signing-in users 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) Checkout additional steps for Android, React Native < 0.60, and Manual Installation.

Now close your terminal and re-run

npx react-native run-ios

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

// App.js
// 1️⃣ Import Cotter's Wrapper
import {connectCotterWrapper} from 'react-native-cotter';
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, 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";

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) },
    );
  };

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) },
    );
  };

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>

Try it out!

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.