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

react-native-giga-mutual-tls

v1.0.7

Published

TODO

Downloads

111

Readme

react-native-mutual-tls

Mutual TLS authentication for HTTP requests in React Native.

The client certificate and associated password are stored securely in the native Keychain.1

Once the module is set up, it applies to all normal react-native HTTP requests (e.g. through fetch, XMLHttpRequest, or any library that uses these) for HTTPS connections that ask for a client certificate. There is no overhead for connections that do not request a client certificate.

Only iOS is supported at this time, but pull requests are welcome if anyone wants to help add support for Android.

Getting started

Install it as a dependency for your react-native project. You'll probably also need the native module for Keychain unless you have some other way of getting the secrets into the keychain:

yarn add react-native-mutual-tls
yarn add react-native-keychain
npx pod-install

Prerequisites

In order to use this module, you'll need a client certificate encoded as a p12 file, encrypted with a password.

The example project in this repository uses this test certificate from badssl.com, but you'll need to provide your own.

The certificate and password are expected to be loaded into the native Keychain at runtime, because it's considered bad practice to hard-code them or embed them as static resources in your app bundle. You'll need to expect the user to supply these, or download them at runtime from some secure source.

Usage

Import the MutualTLS module, as well as the Keychain module.

import MutualTLS from 'react-native-mutual-tls';
import Keychain from 'react-native-keychain';

Optionally, set up debug information and errors from this module to go to the console for troubleshooting purposes. You could also provide different functions here if you wanted to do something else with the events.

If you don't do this, there will be no logging of such events.

MutualTLS.onDebug(console.debug);
MutualTLS.onError(console.error);

Before making a request, you'll need to load the secrets into the Keychain.

Refer to the documentation for the Keychain module for more information about managing secrets in the keychain, how to clear the secrets, and how to check whether the secrets are already loaded to avoid doing work to load them every time the app starts.

const myP12DataBase64 = "YOUR P12 FILE ENCODED AS BASE64 GOES HERE";
const myPassword = "THE PASSWORD TO DECRYPT THE P12 FILE GOES HERE";

await Promise.all([
  Keychain.setGenericPassword('', myP12DataBase64, { service: "my-tls.client.p12" }),
  Keychain.setGenericPassword('', myPassword, { service: "my-tls.client.p12.password" }),
]);

Next you need to call MutualTLS.configure to tell the module where to find the secrets in the keychain.

MutualTLS will not pre-load the secrets when configured - they will be loaded on the fly each time they are needed by an authentication challenge, so there is no need to call MutualTLS.configure more than once even if the secret values change.

If you do not call MutualTLS.configure, then the following defaults are used:

  • keychainServiceForP12: mutual-tls.client.p12
  • keychainServiceForPassword: mutual-tls.client.p12.password

If you're using MutualTLS in a test environment with a proxied connection where the server name does not match the server name in the server certificate, you can also set the insecureDisableVerifyServerInRootDomain option to the root domain for which you want to insecurely trust all subdomains. For example, setting it to example.com would let you insecurely trust servers at a domain like bad.example.com. DO NOT USE THIS SETTING IN A PRODUCTION ENVIRONMENT, as it defeats server authentication security features which form the other half of the "mutual" part of Mutual TLS.

// Use the same service names that were used in `Keychain.setGenericPassword`
await MutualTLS.configure({
  keychainServiceForP12: 'my-tls.client.p12',
  keychainServiceForPassword: 'my-tls.client.p12.password',
});

Assuming you've done all that setup, then you're ready to make secure Mutual TLS requests with a server that is configured to trust the client certificate you provided.

As stated before, any normal react-native HTTP request (e.g. through fetch, XMLHttpRequest, or any library that uses these) for HTTPS connections that ask for a client certificate will work, with no special options needed at request time.

const response = await fetch('https://my-secure.example.com/');

To see and run a fully working demonstration using https://client.badssl.com/ as the test server, see the example project in this repository.