Encrypting data in React applications with Basis Theory

Challenges with encrypting, securing, and maintaining sensitive data—like card numbers, social security numbers, API keys, and bank account numbers—tend to compound with growth. These headaches consume time, money, and cognitive load [usually at the least ideal times possible]. Basis Theory’s developer-friendly tools, hosting services, and integrations satisfy compliance and security requirements while protecting your roadmap from these disruptions once-and-for-all.

React is all about simplicity, but securing data in the browser can be anything but simple. Most JavaScript encryption libraries out there require a lot of boilerplate code and, even so, usually don't fit your use case nicely, leading to more customization.

Today, we’re launching Basis Theory React, a thin open-source React wrapper for our JavaScript SDK. The new module allows front-end developers to safely collect, store, and encrypt any type of data in minutes—all without the risks or time-sucks of securing and maintaining it themselves. That means development and security teams no longer have worry about “which encryption algorithm” to use, “how to secure the data in memory,” or “how to pass secured data to my backend safely.” The module handles all of this for you. It accepts any entered form data, secures it with encryption, and provides your system a tokenId to reference.

Here's how to get started, a few examples of how companies use it today, and a video walkthrough. Want to jump straight in? Check out our documentation and guides.

How does Basis Theory React work?

Before we walk through how to use the new module, let's take a look first at the final working example.

import { TextElement, useBasisTheory } from '@basis-theory/basis-theory-react';

const MyForm = () => {
  const { bt } = useBasisTheory('test_1234567890', { elements: true });

  const submit = async () => {
    const tokens = await bt.tokenize({
      text:  bt.getElement('text'),
    });
  
    console.log(tokens); //returns your token identifiers
  }

  return <BasisTheoryProvider bt={bt}> <TextElement id="text" placeholder="Any Text" /> <div> <button type="submit" onClick={submit} disabled={!bt}>Submit</button> </div> </BasisTheoryProvider>;
}

How to use the Basis Theory React module.

Now that you've seen the final version, let's walk through it step-by-step.

1. Install the package with npm or yarn

yarn add @basis-theory/basis-theory-react	
npm install @basis-theory/basis-theory-react --save

2. Call the useBasisTheory hook to get a bt instance ready to go and pass it to your component tree using BasisTheoryProvider.

const { bt } = useBasisTheory('test_1234567890', { elements: true });

return <BasisTheoryProvider bt={bt}> … </BasisTheoryProvider>

3. Next, you will use that context to create an input field to collect data from your users.

<TextElement id="text" placeholder="Any Text" />

Bonus: Our Elements provide out-of-the-box support for masking fields. For example, SSNs that only meets the “999-99-9999” format.

4. Once your user has entered data, you’ll call directly into our Tokenize API to retrieve your tokens back in return.

const submit = async () => {
  const tokens = await bt.tokenize({
    text: bt.getElement('text'),
  });
   
  console.log(tokens); //returns your token identifiers 
}

5. Success 🎉 — You’re now ready to store the tokenIds in your database and can retrieve the raw values whenever you need to use them by using our Token Retrieve API.

Real Examples of Basis Theory React in action

Securing Personal Identifiable Information

Securing PII (Personal Identifiable Information) yourself takes time, research, and expertise in encryption, with Basis Theory React you’re able to secure this data by using our TextElement as a replacement for normal input fields. Once your customers have filled out your form, Basis Theory React will tokenize the raw data allowing you to store a non-sensitive identifier in your system instead of the original value. Finally, Basis Theory allows your server-side code to read the raw value when you need it and keeps it safe when you don’t.

import { TextElement, useBasisTheory } from '@basis-theory/basis-theory-react';

const ssnMask = [/\\d/, /\\d/, /\\d/, "-", /\\d/, /\\d/, "-", /\\d/, /\\d/, /\\d/, /\\d/];

const MyForm = () => {
  const {bt} = useBasisTheory('test_1234567890', { elements: true });
  
  const submit = async () => {
    const tokens = await bt.tokenize({
      fullName: bt.getElement('fullName'),
      ssn: {
        type: 'social_security_number',
        data: bt.getElement('ssn'),
      },
    });

    console.log(tokens); //returns your token identifiers
  }  

  return <BasisTheoryProvider bt={bt}> <TextElement id="fullName" placeholder="Full name" aria-label="Full name" /> <TextElement id="ssn" placeholder="SSN" aria-label="Social Security Number" mask={ssnMask} transform={/[-]/} /> <div> <button type="submit" onClick={submit} disabled={!bt}>Submit</button> </div> </BasisTheoryProvider>;
}

Collecting and storing Credit Card Numbers

PCI-DSS requires organizations to be PCI Level 1 compliant before collecting and using credit or debit card data within their systems. By using our Serverless Reactors, Basis Theory React, and our PCI-compliant vault, organizations can act on their customers’ card numbers—as if they were within their systems—without needing to become PCI Level 1 themselves.

import { CardElement, useBasisTheory } from '@basis-theory/basis-theory-react';

const MyForm = () => {
  const { bt } = useBasisTheory('test_1234567890', { elements: true });
  
  const submit = async () => {
    const token = await bt.atomicCards.create({
      card: bt.getElement('customerCard')
    });
    console.log(token); //returns your token identifiers
  }
  
  return <BasisTheoryProvider bt={bt}> <CardElement id="customerCard" /> <div> <button type="submit" onClick={submit} disabled={!bt}>Submit</button> </div> </BasisTheoryProvider>;
}

‍Where to start

Securing data in React entails a number of complex decisions, installations and hours coding. With Basis Theory React we provide a way to do it in a few minutes—not days or weeks.

We’d love you to test drive this yourself and start securing as much of your data as possible, get started now by creating a free Basis Theory account! Want to jump straight in? Check out our documentation and guides.

‍