npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@pagopa/io-react-native-wallet

v1.0.0

Published

Provide data structures, helpers and API for IO Wallet

Downloads

4,089

Readme

🪪 @pagopa/io-react-native-wallet

Library which provides a high level abstraction to interact with the IT-Wallet ecosystem via a predefined flows, a set of utilities and helpers. Follows the eudi-wallet-it-docs specifications, currently aligned with version 0.7.1.

Dependencies

Installation

# Install the required dependencies specified in the peerDependencies of the package.json

# Library
yarn install @pagopa/io-react-native-wallet

Contexts

The library makes use of contexts to delegate certain aspects of the implementation to the application. Some of these aspects might greatly vary depending on the consumer application. This allows the library to be more flexible by not forcing the application to use a specific implementation and also to focus on the core functionalities.

Currently the library uses the following contexts:

User flows implementions make use of tokens signed using asymmetric key pairs. Such cryptographic keys are managed by the device according to its specifications. It's not the intention of this package to handle such cryptographic assets and their peculiarities; instead, an handy interface is used to provide the right abstraction to allow responsibilities segregation:

  • The application knows who to generate/store/delete keys;
  • The package knows when and where to use them.

The interface is CryptoContext inherited from the @pagopa/io-react-native-jwt package:

The suggested library to manage cryptographic assets is io-react-native-crypto.

export interface CryptoContext {
  /**
   * Retrieves the public key to be used in this context.
   * MUST be the same key at every invocation.
   * @returns The public key to be used
   * @throws If no keys are found
   */
  getPublicKey: () => Promise<JWK>;
  /**
   * Produce a cryptographic signature for a given value.
   * The signature MUST be produced using the private key paired with the public retrieved by getPublicKey()
   * @param value The value to be signed
   * @returns The signature
   * @throws If no keys are found
   */
  getSignature: (value: string) => Promise<string>;
}

This package provides an helper to build a CryptoContext object bound to a given key tag

import { createCryptoContextFor } from "@pagopa/io-react-native-wallet";

const ctx = createCryptoContextFor("my-tag");

The

Be sure the key for my-tag already exists.

In order to ensure the integrity of the device, the library asks the consumer application to provide a way to generate a token that can be used to verify the device integrity. This is done by providing an IntegrityToken object formed as follows:

/**
 * Interface for the integrity context which provides the necessary functions to interact with the integrity service.
 * The functions are platform specific and must be implemented in the platform specific code.
 * getHardwareKeyTag: returns the hardware key tag in a url safe format (e.g. base64url).
 * getAttestation: requests the attestation from the integrity service.
 * getHardwareSignatureWithAuthData: signs the clientData and returns the signature with the authenticator data.
 */
export interface IntegrityContext {
  getHardwareKeyTag: () => string;
  getAttestation: (nonce: string) => Promise<string>;
  getHardwareSignatureWithAuthData: (
    clientData: string
  ) => Promise<HardwareSignatureWithAuthData>;
}

Usually this is achieved by using Google Play Integrity API and Key Attestation on Android, DCAppAttestService on iOS.

The suggested library to manage integrity is io-react-native-integrity.

This package is compatibile with any http client which implements Fetch API. Functions that makes http requests allow for an optional appFetch parameter to provide a custom http client implementation. If not provided, the built-in implementation on the runtime is used.

Flows

Different flows are provided to perform common operations. Each flow is a set of steps that must be executed in a given order. The documentation is provided inside the related folder:

Example

An example app is provided in example folder which demostrates how to implemente these flows. To run it, follow the instructions in the README.

Ecosystem

io-react-native-wallet is designed to be used in io-app and its ecosystem. There are a few libraries that can be used to implement the context required to implement the flows defined by this package. Below there's a list of the libraries and a schema of how they interact with each other:

graph TD;
    ioa[io-app]
    iornw[io-react-native-wallet]
    iornc[io-react-native-crypto]
    iorni[io-react-native-integrity]
    iornss[io-react-native-secure-storage]
    iornjwt[io-react-native-jwt]
    rncie[react-native-cie]
    rnw(react-native-webview)

    ioa --> iornw
    iornw --> iornjwt
    iornw --> rncie
    iornw --> rnw

    subgraph IoApp Deps
      direction TB
      iornc
      iorni
      iornlu
      iornss
    end

    subgraph IoRnWallet Deps
      iornjwt
      rncie
      rnw
    end

    ioa --> |dependency to implement CryptoContext| iornc
    ioa --> |dependency to implement IntegrityContext| iorni
    ioa --> |dependency to implement AuthorizationContext| iornlu
    ioa --> |dependency to store credentials| iornss