@tokenproof/react-native-client-sdk

tokenproof Client SDK

Installation

npm install @tokenproof/react-native-client-sdk

Introduction

tokenproof wallet QR code SDK provides a short set of functionalities that allow developers to seamlessly integrate the issuance of tokenproof Verifiable Credentials (VCs) into their applications. With this SDK, you can generate VCs that adhere to our standard, ensuring interoperability and compatibility with tokenproof Verifier app.

Flows

Onboarding

To start using the tokenproof wallet SDK, you need to first initialize the device by calling initializeDevice, so it ensures the device is registered and linked by means of its DID (decentralized ID). If the app is uninstalled and reinstalled, a new DID will be tied to the device.

The redeem code should be generated by the partner backend API by calling

method: POST 
headers: {x-api-key: <your_api_key>, ...}
url: api.tokenproof.xyz/v1/partneronboarding/<app_id>/create
body: {address: string; credential_type:string;}

whose response is

{redeem_url: <string>}

Then, with a valid redeem code, you can use the redeem method to exchange it by a verifiable credential (VC) issued by tokenproof. Such VC is linked to the device by its DID. The client app is responsible of storing and managing the credential. Also, a redeem code can be used only once, so an error would be thrown should the client attempts to use it more than once, regardless of the device used to exchange it.

QR code generation

Finally, you can use the qrEncodeCredential method to encode the credential as a tokenproof-compatible QR code. Please note that the content of the QR code is timestamped and expires 60 seconds after its generation, so make sure the client app creates as new QR code if necessary. QR encoding works even if the device is offline, so the number of calls to qrEncodeCredential is unlimited. This method does not allow encoding credentials issued for other DIDs, so that an app reinstall requires to go through the onboarding flow again.

Sequence diagram

The diagram below summarizes the whole onboarding flow and the generation of the corresponding QR code:

Getting started

API key

In order to invoke /partneronboarding/create, you will need an API key. If you want to integrate tokenproof Wallet into your app, do not hesitate in contacting us at at [email protected].

React Native

Installation

yarn add @tokenproof/react-native-client-sdk // this could change when v1 is released

SDK methods

/**
* Set up the device DID. 
* If previously initialized, it loads the DID and the key pair used to sign the QR codes
* @returns true if initialization went well, otherwise returns false.
*/
initializeDevice(): Promise<boolean>

/**
* Exchanges a tokenproof redeem code by a VC issued by tokenproof
* @returns the VC as JSON string
* @throws an error if the code is empty, invalid, or already redeemed.
*/
redeem(code: string): Promise<string>

/**
* Signs and encodes a credential as a QR code
* than can be read by tokenproof Verifier.
* @returns the animated QR code as data uri (data:image/gif;base64,...) 
*          that expires in 60 seconds
* Throws an error if the credential is empty, invalid, or issued for another DID
*/
qrEncodeCredential(credential: string)

Example app

Use the following example app as a demonstration the flow described above.

import * as React from 'react';
import {Button, Image, SafeAreaView, StyleSheet, Text, TextInput} from 'react-native';
import {initializeDevice, qrEncodeCredential, redeem} from '@tokenproof/react-native-client-sdk';

export default function App() {
  const [ready, setReady] = React.useState<boolean>(false);
  const [deviceStatus, setDeviceStatus] = React.useState<string>('not initd');
  const [url, setUrl] = React.useState<string>('');
  const [dataUri, setDataUri] = React.useState<string>('');

  React.useEffect(() => {
    initializeDevice().then(
      (r) =>
        Promise.all([setReady(r), setDeviceStatus(r ? 'ready' : 'failed')]),
      (err) => setDeviceStatus(`error: ${err}`)
    );
  });

  const handleRedeem = async () => {
    if (!ready) return;
    try {
      const vc = await redeem(url);
      const dataUri = await qrEncodeCredential(vc);
      setDataUri(dataUri);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text>Initialized?: {deviceStatus}</Text>
      <TextInput onChangeText={setUrl} style={styles.input} />
      <Button title="Redeem" onPress={handleRedeem} />
      {dataUri && <Image source={{ uri: dataUri }} style={styles.image} />}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
  image: {
    width: 400,
    height: 400,
  },
});

Supported devices

Currently, the React Native module only runs on these platforms+architectures:

iOS:

arm64-ios-device

x86_64-ios-simulator

Android:

armv7a-linux-androideabi

aarch64-linux-android

i686-linux-android

x86_64-linux-android

If you need us to support another platform or architecture, please send our support team an email at [email protected] and we will get back with you as soon as possible.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library