Para with Create React App (CRA)

WARNING: Create React App (CRA) has been officially deprecated by Meta. We recommend using Vite or Next.js for new projects. For more details on the deprecation, refer to the CRA deprecation notice

This guide will walk you through the process of integrating the Para Modal into a Create React App (CRA) project that uses CRACO, ensuring a seamless way to manage user authentication and wallets. If you haven’t already created your React app with CRA, follow the official CRA docs to scaffold a new project. Once you’ve set up CRA, you can install and configure CRACO: CRACO docs.

Prerequisites

To use Para, you need an API key. This key authenticates your requests to Para services and is essential for integration.

Don’t have an API key yet? Request access to the Developer Portal to create API keys, manage billing, teams, and more.

Installing Dependencies

First, install the Para React SDK and React Query using your preferred package manager:

npm install @getpara/react-sdk @tanstack/react-query

Setting Up Polyfills in CRACO

Para relies on certain Node.js modules that are not available in the browser by default (e.g., crypto, buffer, stream). You’ll need to configure polyfills via CRACO’s config to ensure those modules work properly. Install the necessary polyfill packages before updating your configuration:

npm install crypto-browserify buffer stream-browserify

Then, modify your craco.config.js:

const webpack = require("webpack");

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.resolve.fallback = {
        ...webpackConfig.resolve.fallback,
        crypto: require.resolve("crypto-browserify"),
        buffer: require.resolve("buffer/"),
        stream: require.resolve("stream-browserify"),
      };
      webpackConfig.plugins = [
        ...webpackConfig.plugins,
        new webpack.ProvidePlugin({
          process: "process/browser",
          Buffer: ["buffer", "Buffer"],
        }),
      ];
      return webpackConfig;
    },
  },
};

This configuration ensures that the Para SDK can properly utilize the necessary Node.js modules in your CRA environment.

You can adjust the polyfill configuration based on your specific needs and the requirements of your project. You’re welcome to use different polyfill packages or modify the fallback settings as needed.

Setting Up the Para SDK

Now that you’ve installed the necessary dependencies, let’s set up the Para SDK in your CRA project using the recommended ParaProvider approach.

Create a Providers Component

Create a providers component that will wrap your application with both the QueryClientProvider (required for Para) and the ParaProvider:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Environment, ParaProvider } from "@getpara/react-sdk";
import "@getpara/react-sdk/styles.css";

const queryClient = new QueryClient();

export function Providers({ children }) {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaProvider
        paraClientConfig={{
          apiKey: process.env.REACT_APP_PARA_API_KEY || "",
          env: Environment.BETA,
        }}>
        {children}
      </ParaProvider>
    </QueryClientProvider>
  );
}

Para offers two hosted environments: Environment.BETA (alias Environment.DEVELOPMENT) for testing, and Environment.PROD (alias Environment.PRODUCTION) for live use. Select the environment that matches your current development phase.

Wrap Your App with Providers

Now, wrap your main app component with the Providers component in your index.js or App.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Providers } from './providers';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Providers>
      <App />
    </Providers>
  </React.StrictMode>
);

Add the Para Modal

Now you can include the ParaModal component in any component within your application and use the ParaProvider hooks to control it:

import { ParaModal, useModal } from "@getpara/react-sdk";

function LoginButton() {
  const { openModal } = useModal();

  return (
    <>
      <button onClick={() => openModal()}>
        Sign in with Para
      </button>
      
      <ParaModal 
        appName="Your App Name"
        logo="/logo.png" 
      />
    </>
  );
}

export default LoginButton;

The ParaModal will automatically connect to the ParaProvider context, so you don’t need to pass any additional props for functionality. You only need to customize its appearance.

Beta Testing Credentials In the BETA Environment, you can use any email ending in @test.getpara.com (like dev@test.getpara.com) or US phone numbers (+1) in the format (area code)-555-xxxx (like (425)-555-1234). Any OTP code will work for verification with these test credentials. These credentials are for beta testing only. You can delete test users anytime in the beta developer console to free up user slots.

To provide the best experience for your users, you can customize the appearance of the Para Modal to match your application’s branding. When rendering the ParaModal component, you can pass props to customize its appearance:

<ParaModal
  appName="Your App Name"
  logo="/logo.png"
  theme={{ backgroundColor: "#ffffff", foregroundColor: "#000000" }}
  oAuthMethods={["GOOGLE", "TWITTER", "DISCORD"]}
/>

For a full list of available ParaModalProps, refer to the customization guide:

Detailed Customization Guide

Customizing the Para Modal and SDK, including advanced theming options, branding configurations, and more.

Standalone Para Modal Setup

While the ParaProvider approach is recommended, you can also use the ParaModal as a standalone component. This approach requires you to create and manage a Para client instance manually.

Creating a Para Client Instance

You can create the Para client instance in a dedicated file:

import Para, { Environment } from "@getpara/react-sdk";

const para = new Para(Environment.BETA, process.env.REACT_APP_PARA_API_KEY);

export default para;

Once you have created your Para client instance, you can integrate the Para Modal into your React component:

import React, { useState } from "react";
import { ParaModal } from "@getpara/react-sdk";
import para from "./clients/para"; // Adjust the path to where your para instance is located
import "@getpara/react-sdk/styles.css";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Sign in with Para</button>
      <ParaModal
        para={para}
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
      />
    </div>
  );
}

export default App;

This creates a button that, when clicked, opens the Para Modal for user authentication. The Para Modal handles all aspects of user authentication and wallet management.

Examples

For practical implementation of the Para SDK in CRACO applications, explore our example repository. This repository contains real-world examples to help you get started.

Para React Integration Examples

Explore our repository containing React and CRACO implementations, along with shared UI components demonstrating Para integration.

Next Steps

After integrating Para, you can explore other features and integrations to enhance your Para experience.

EVM Integration

Learn how to use Para with EVM-compatible libraries like ethers.js, viem, and wagmi.

Solana Integration

Discover how to integrate Para with solana-web3.js.

Cosmos Integration

Explore Para integration with Cosmos ecosystem using CosmJS, Cosmos Kit, and Graz.

Troubleshooting

If you encounter issues during the integration or usage of the Para Modal in a CRACO-based app, here are some common problems and their solutions:

ParaModal Not Rendering or Not Visible

Modal Appears but Styles Are Missing or Incorrect

Authentication Fails or API Requests Are Rejected

Polyfill-Related Errors or Undefined Functions

For a more comprehensive list of solutions, visit our troubleshooting guide:

Troubleshooting

Our troubleshooting guide provides solutions to common integration and usage problems.

Integration Support

If you’re experiencing issues that aren’t resolved by our troubleshooting resources, please contact our team for assistance. To help us resolve your issue quickly, please include the following information in your request:

1
A detailed description of the problem you’re encountering.
2
Any relevant error messages or logs.
3
Steps to reproduce the issue.
4
Details about your system or environment (e.g., device, operating system, software version).

Providing this information will enable our team to address your concerns more efficiently.

Core Methods

React Hooks

Types & Interfaces

Para with Create React App (CRA)

Prerequisites

Installing Dependencies

Setting Up Polyfills in CRACO

Setting Up the Para SDK

Detailed Customization Guide

Examples

Para React Integration Examples

Next Steps

EVM Integration

Solana Integration

Cosmos Integration

Troubleshooting

Troubleshooting

Integration Support

Core Methods

React Hooks

Types & Interfaces

​Prerequisites

​Installing Dependencies

​Setting Up Polyfills in CRACO

​Setting Up the Para SDK

​Customizing the Para Modal

Detailed Customization Guide

​Alternative Approach: Standalone Para Modal

​Examples

Para React Integration Examples

​Next Steps

EVM Integration

Solana Integration

Cosmos Integration

​Troubleshooting

Troubleshooting

​Integration Support

Prerequisites

Installing Dependencies

Setting Up Polyfills in CRACO

Setting Up the Para SDK

Customizing the Para Modal

Alternative Approach: Standalone Para Modal

Examples

Next Steps

Troubleshooting

Integration Support