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.
What is Basis Theory React?
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.
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 <span class="code">npm</span> or <span class="code">yarn</span>
2. Call the <span class="code">useBasisTheory</span> hook to get a bt instance ready to go and pass it to your component tree using <span class="code">BasisTheoryProvider</span>.
3. Next, you will use that context to create an input field to collect data from your users.
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.
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.
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.
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.