Skip to main content
This guide will walk you through integrating Para SDK into your Vite-powered React application, providing seamless user authentication and wallet management.

​
Prerequisites

Before starting, you’ll need a Para API key which you can obtain from the Para Developer Portal. You can learn to create your account and get your API key from the Developer Portal.

Setup Developer Portal

​
Installation

Install the Para React SDK, React Query, and required polyfills for Vite: 
npm install @getpara/react-sdk@alpha @tanstack/react-query --save-exact && npm install vite-plugin-node-polyfills --save-dev
Then add the polyfill plugin to your vite.config.js:
vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineConfig({
  plugins: [react(), nodePolyfills()],
});

​
Configure Providers

Create a providers component and wrap your application with it: 
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { 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 || "",
        }}
        config={{
          appName: "YOUR_APP_NAME" // Replace with your app name
        }}
      >
        {children}
      </ParaProvider>
    </QueryClientProvider>
  );
}

​
Create a Connect Button

Now create a component that uses Para hooks to manage wallet connection:
ConnectButton.jsx
import { useModal, useAccount, useWallet } from "@getpara/react-sdk";

export function ConnectButton() {
  const { openModal } = useModal();
  const { data: wallet } = useWallet();
  const { isConnected } = useAccount();
  
  return (
    <button onClick={() => openModal()}>
      {isConnected
        ? `Connected: ${wallet?.address?.slice(0, 6)}...${wallet?.address?.slice(-4)}`
        : "Connect Wallet"}
    </button>
  );
}
Testing? Use BETA testing credentials for fast development. Check out the to learn about test emails and phone numbers.

​
Example

Vite + React Example

​
Next Steps

Success you’ve set up Para with Vite! Now you can expand your application with wallet connections, account management, and more.

Use React Hooks

Sign Messages & Transactions

Customize Your Setup

⌘I