React Native – Sign in with Device

Cotter's Passwordless SDK authenticates your user based on their device. It allows a seamless, fast, and secure way for your user to login to your React Native App.

Sign in with Device

In this guide we'll allow users to Sign In with Device using Cotter's SDK.

Make sure you're using react-native version < 0.63

Step 1️: Get Cotter SDK

Head to https://dev.cotter.app/rules and allow Trusted Devices in the dashboard.

yarn
npm
yarn
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
npm
npm install --save 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

Make sure you use version >= 0.2.0. Checkout additional steps for Android, React Native < 0.60, and Manual Installation.

Step 2️: Wrap your root component with connectCotterWrapper

import {connectCotterWrapper} from 'react-native-cotter';
​
class MyApp extends Component {...}
export default connectCotterWrapper(MyApp);

Step 3️: Register this device as a Trusted Device

After you register your user in your server, take your user's ID from your database and trust the current device.

JavaScript
Response
JavaScript
import { Cotter } from "react-native-cotter";
​
const registerToMyServer() {
var userID = await axios.post("myserver.com/user/register", ...);
// Enroll Device Using Cotter
var cotter = new Cotter(
<API_KEY_ID>, // πŸ‘ˆ Specify your API KEY ID here
userID, // πŸ‘ˆ Specify your User's ID here
);
cotter.trustedDevice.enrollDevice( // Enroll device as Trusted Device
(resp) => { alert('Register Device Success'), console.log(resp) },
(errMsg, err) => { alert(errMsg), console.log(err) },
);
}
Response
// Returns the newly created User object in Cotter
// along with oauth tokens
​
{
"ID": "cccccccc-cccc-cccc-cccc-cccccccccccc",
"client_user_id": "bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb",
"created_at": "2020-06-09T03:50:04.005779Z",
"default_method": "TRUSTED_DEVICE",
"deleted_at": null,
"enrolled": [
"TRUSTED_DEVICE"
],
"identifiers": [
"hello@cotter.app"
],
"issuer": "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa",
"oauth_token": {
"access_token": "eyJhbGciOi...",
"auth_method": "TRUSTED_DEVICE",
"expires_in": 3600,
"id_token": "eyJhbGciOiJFU...",
"refresh_token": "6177:MufdKMIk2XP...",
"token_type": "Bearer"
},
"update_at": "2020-06-09T03:50:04.77575278Z"
}

Step 4️: Logging In from a Trusted Device

JavaScript
Response
JavaScript
import { Cotter } from "react-native-cotter";
​
​
const loginToMyServer() {
// get the user's id from your server by email
var userID = await getUserIDFromMyServer();
// Requesting an authentication using Cotter
var cotter = new Cotter(
<API_KEY_ID>, // πŸ‘ˆ Specify your API KEY ID here
userID, // πŸ‘ˆ Specify your User's ID here
);
cotter.trustedDevice.requestAuth(
'LOGIN',
(resp) => { alert('Login Success'), console.log(resp) },
(errMsg, err) => { alert(errMsg), console.log(err) },
);
}
Response
{
"ID": 1361, // Event ID
"CreatedAt": "2020-02-27T22:22:48.705212512Z",
"UpdatedAt": "2020-02-27T22:22:48.705212512Z",
"DeletedAt": null,
"client_user_id": "1014", // your client's User ID
"issuer": "afcabd98-745f-4b9e-98de-af968d9951d3", // your API Key
"event": "<EVENT NAME>",// requested event (LOGIN, or TRANSACTION, etc)
"ip": "192.168.232.2",
"location": "Unknown",
"timestamp": "1582842167",
"method": "TRUSTED_DEVICE", // auth method: TRUSTED_DEVICE (other choices are PIN / BIOMETRIC)
"new": false, // Is this a new pending event. More explanation below about Non-Trusted Device
"approved": true, // Is this event approved.
"signature": "oonMGCAxp3..." // Signature to make sure this event comes from Cotter's server
}

πŸŽ‰ You're Done

Now you can allow your users to Sign In with Device with just 1 tap. When your sessions expires, you can also Sign In User Silently by just calling the method requestAuth above.

Find a more detailed version of this guide in our Trusted Devices section

πŸ‘‰ What's Next?

Verify User's Email or Phone Number

Logging-in from Another Device