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
Try the live demo to explore authentication flows and customize your modal before integrating.Try Demo

​
Installation

Install the Para React SDK, React Query, and required polyfills for Vite: 
npm install @getpara/react-sdk @tanstack/react-query graz @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet wagmi@^2 viem @farcaster/mini-app-solana @farcaster/miniapp-sdk @farcaster/miniapp-wagmi-connector @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js --save-exact && npm install vite-plugin-node-polyfills --save-dev
Using wagmi v3? See additional dependencies required.
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:
The import "@getpara/react-sdk/styles.css" is required for the Para modal to display correctly. Without this import, the modal will not be visible.
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>
  );
}
If you’re using a legacy API key (one without an environment prefix) you must provide a value to the paraClientConfig.environment. You can retrieve your updated API key from the Para Developer Portal at https://developer.getpara.com/
You can learn more about the ParaProvider and its definition in the .
The ParaProvider utilizes libraries like Wagmi, Graz, and Solana Wallet Adapter, to power wallet connections. Meaning you can use any of the hooks provided by these libraries when within the ParaProvider context. You can learn more about using external wallets in the .

​
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>
  );
}
Learn more about the hooks used in this example:
  • - Control the Para modal programmatically
  • - Access the current wallet data
  • - Get account connection status and details
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