This guide will walk you through the process of integrating the Para Modal into a Vite-powered React application, providing a seamless way to manage user authentication and wallets.

If you haven’t already created a new Vite project, you can follow the official Vite docs to get started.

​

Prerequisites

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

​

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 with Vite

Some Node.js modules that Para relies on (e.g., crypto, buffer, stream) may need to be polyfilled in a Vite environment. One easy option is to use the vite-plugin-node-polyfills and configure it in your Vite project.

npm install vite-plugin-node-polyfills --save-dev

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineConfig({
  plugins: [react(), nodePolyfills()],
  // Additional Vite configurations if needed
});

This ensures Node-specific modules are properly polyfilled in the browser environment.

​

Setting Up the Para SDK

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: import.meta.env.VITE_PARA_API_KEY || "",
          env: Environment.BETA,
        }}>
        {children}
      </ParaProvider>
    </QueryClientProvider>
  );
}

import { Providers } from './providers';
import YourApp from './YourApp';

function App() {
  return (
    <Providers>
      <YourApp />
    </Providers>
  );
}

export default App;

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;

​

Customizing the Para Modal

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:

​

Alternative Approach: Standalone Para Modal

​

Examples

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

​

Troubleshooting

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

​

Next Steps

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