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

We'll 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.

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 AndroidReact 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 Wrapperimport {connectCotterWrapper} from 'react-native-cotter';
function App() {...}

// 1️⃣ At the bottom: Wrap your root component with Cotter's wrapperexport 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 packageimport { 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 deviceconst onRegister = () => {
    var cotter = new Cotter(
      API_KEY_ID, // 👈 Specify your API KEY ID here
      (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
      (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!

  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.

Made in Typedream