react-native-u2f
v1.1.6
Published
U2F for React Native
Downloads
7
Maintainers
Readme
react-native-u2f
This module is a simple wrapper to Android's U2fApiClient https://developers.google.com/android/reference/com/google/android/gms/fido/u2f/U2fApiClient
There is no implementation for iOS. Feel free to contribute with an iOS native module.
Getting started
React Native 0.60 or later
Simply install with:
$ yarn add react-native-u2f
or$ npm install react-native-u2f
React Native before 0.60
$ npm install react-native-u2f --save
Mostly automatic installation
$ react-native link react-native-u2f
Manual installation
- Open up
android/app/src/main/java/[...]/MainApplication.java
- Add
import com.ReactNativeU2f.U2fPackage;
to the imports at the top of the file - Add
new U2fPackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':react-native-u2f' project(':react-native-u2f').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-u2f/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:compile project(':react-native-u2f')
Usage
Error codes
//Some error occurred on the Java code
const errorNames = {
"0": "NATIVE_ERROR"
};
//Those are from FIDO specs and will come from the security key
const errorNames = {
"1": "OTHER_ERROR",
"2": "BAD_REQUEST",
"3": "CONFIGURATION_UNSUPPORTED",
"4": "DEVICE_INELIGIBLE",
"5": "TIMEOUT"
};
Sign
import React from "react";
import u2f from "react-native-u2f";
function SampleComponent(props) {
React.useEffect(() => {
// ...
// Call your server to get registered keys info
// registeredKeys is a collection (array of objects)
// Each object need to have all these 4 keys
// (challenge, appId, version and keyHandle)
const registeredKeys_MANDATORY = [
{
challenge:
"2e4c8364b5e51d79b18a6c0da9da79dae6c2b54681d1bf3d204aec0e9bd8db7a",
appId: "https://your.server/app-id.json",
version: "U2F_V2",
keyHandle:
"oZYCAaj9ILtqDB54SBK2MpN9dSBKPPUa0fP0lLuvVVovVRgWXXmLZGCUjfV5KSWWneGWTUTYW36O2Dlq2zDv-Q"
}
//... As many registered keys you have
];
const timeout_OPTIONAL = 59; //request timeout in seconds. Default is 60 seconds
u2f
.sign(registeredKeys_MANDATORY, timeout_OPTIONAL)
.then(res => {
// If it reaches here, the security key responded with no error.
// "res" is a JSON string containing the security key response
// ...
// Now post your "res" string to your authentication server
})
.catch(err => {
// Errors can come from security key (error codes 1, 2, 3, 4 or 5) or from the native code (error code 0)
// err is an Error object
// err.message -> Can be specific of just a standard message
// err.metaData.code -> error code (see above)
// err.metaData.type -> error description (see above)
});
}, []);
}
Register
import React from "react";
import u2f from "react-native-u2f";
function SampleComponent(props) {
React.useEffect(() => {
// ...
// Call your server to get register requests and registered keys info
// registerRequests is a collection (array of objects)
// each object need to have all these 3 keys
// (challenge, appId, version)
const registerRequests_MANDATORY = [
{
challenge:
"2e4c8364b5e51d79b18a6c0da9da79dae6c2b54681d1bf3d204aec0e9bd8db7a",
appId: "https://your.server/app-id.json",
version: "U2F_V2"
}
];
//registeredKeys is same thing as on sign
const registeredKeys_MANDATORY = [
// ...
];
const timeout_OPTIONAL = 59; //request timeout in seconds. Default is 60 seconds
u2f
.register(
registerRequests_MANDATORY,
registeredKeys_MANDATORY,
timeout_OPTIONAL
)
.then(res => {
// If it reaches here, the security key responded with no error.
// "res" is a JSON string containing the security key response
// ...
// Now post your "res" string to your authentication server
})
.catch(err => {
// Errors can come from security key (error codes 1, 2, 3, 4 or 5) or from the native code (error code 0)
// err is an Error object
// err.message -> Can be specific of just a standard message
// err.metaData.code -> error code (see above)
// err.metaData.type -> error description (see above)
});
}, []);
}
Credits
Credits for inspiration/parts of the code in this package:
u2f-api https://github.com/grantila/u2f-api
Android security-samples https://github.com/android/security-samples/tree/master/Fido
React Native - Native Modules Guide https://facebook.github.io/react-native/docs/native-modules-android