This guide will walk you through the process of integrating the ParaProvider with the ParaModal into your Next.js application,providing a seamless way to manage user authentication and wallets.

If you haven’t already set up your Next.js app, you can get started by creating a new project via the Next.js official 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

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

​
Setting Up Para Package Polyfills

The Para react-sdk providers a setup cli tool that must be run following package installation to ensure any missing Para wallet packages are properly polyfilled. It is recommended to include this on your postinstall step in your package.json

{
  "scripts": {
    "postinstall": "yarn setup-para"
    //...rest of your scripts
  }
  //...rest of your package.json
}

​
Setting Up the Para SDK

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

​
Create a Providers Component

First, create a Providers component that will wrap your application with both the QueryClientProvider (required for Para) and the ParaProvider:

"use client";

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

const queryClient = new QueryClient();

export function Providers({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaProvider
        paraClientConfig={{
          apiKey: process.env.NEXT_PUBLIC_PARA_API_KEY || "",
          env: Environment.BETA,
        }}
        config={{
          appName: "Your App Name"
        }}
        paraModalConfig={{
          // ParaModal config
          logo: "https://yourdomain.com/logo.png"
          // ... other modal config
        }}
        externalWalletConfig={{
          wallets: []
        }}
        >
        {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”

Next, wrap your root layout with the Providers component:

import { Providers } from './providers';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

​
Controlling the Para Modal

Now you can use the ParaProvider hooks to control the state of the modal:

"use client";

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

export function ParaButton() {
  const { openModal } = useModal();

  return (
    <>
      <button onClick={openModal}>
        Sign in with Para
      </button>
    </>
  );
}

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.

​
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.

To customize the modal appearance, pass any modal customization props to the paraModalConfig prop of the ParaProvider:

paraModalConfig={{
  logo: "https://yourdomain.com/logo.png"
  theme: { backgroundColor: "#ffffff", foregroundColor: "#000000" }
  oAuthMethods: ["GOOGLE", "TWITTER", "DISCORD"]
  // ... other modal config
}}

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

Customizing the Para Modal

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

​
Alternative Approach: Standalone Para Modal

​
Examples

For practical implementation of the Para SDK in Next.js applications, explore our Examples Hub repository. It contains a variety of examples showcasing how to integrate the Para SDK with Next.js:

React NextJS Examples

Explore our repository containing React project examples using Para SDK for authentication and wallet management.

​
Troubleshooting

If you encounter issues during the integration or usage of the Para Modal in Next.js, here are some common problems and their solutions:

Troubleshooting

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

​
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.