Say Goodbye To Passwords: 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 a new app:

Run the app with react-native run-ios or react-native run-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

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

Now close your terminal and re-run

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

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.

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 the device by calling cotter.trustedDevice.enrollDevice() .

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

Step 3: Call onRegister and onLogin on button press

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.

Originally published at https://blog.cotter.app on May 12, 2020.