We'll go over how to build a React Native app and allow users to "Sign in with device".
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
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.
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>
);
}
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%',
},
});
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 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.
- You'll need your
API_KEY_IDhere. Create a free developer account at Cotter, then create a project and take notes of your API keys. - 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!
- Enter an email address and press Register
- 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:
- Login using your website: Show a prompt in the app that asks the user to approve or deny the login request.
- Add more devices.
- 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)