> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Get Your API Key

> Get your API key and configure your Para integration through the developer portal.

export const Card = ({imgUrl, title, description, href, horizontal = false, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  const handleClick = e => {
    e.preventDefault();
    if (newTab) {
      window.open(href, '_blank', 'noopener,noreferrer');
    } else {
      window.location.href = href;
    }
  };
  return <div className={`not-prose relative my-2 p-[1px] rounded-xl transition-all duration-300 ${isHovered ? 'bg-gradient-to-r from-[#FF4E00] to-[#874AE3]' : 'bg-gray-200'}`} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <a href={href} onClick={handleClick} className={`not-prose flex ${horizontal ? 'flex-row' : 'flex-col'} font-normal h-full bg-white overflow-hidden w-full cursor-pointer rounded-[11px] no-underline`}>
        {imgUrl && <div className={`relative overflow-hidden flex-shrink-0 ${horizontal ? 'w-[30%] rounded-l-[11px]' : 'w-full'}`} onClick={e => e.stopPropagation()}>
            <img src={imgUrl} alt={title} className="w-full h-full object-cover pointer-events-none select-none" draggable="false" />
            <div className="absolute inset-0 pointer-events-none" />
          </div>}
        <div className={`flex-grow px-6 py-5 ${horizontal ? 'w-[70%]' : 'w-full'} flex flex-col ${horizontal && imgUrl ? 'justify-center' : 'justify-start'}`}>
          {title && <h2 className="font-semibold text-base text-gray-800 m-0">{title}</h2>}
          {description && <div className={`font-normal text-gray-500 re leading-6 ${horizontal || !imgUrl ? 'mt-0' : 'mt-1'}`}>
              <p className="m-0 text-xs">{description}</p>
            </div>}
        </div>
      </a>
    </div>;
};

export const Link = ({href, label, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  return <a href={href} target={newTab ? '_blank' : '_self'} rel={newTab ? 'noopener noreferrer' : undefined} className="not-prose inline-block relative text-black font-semibold cursor-pointer border-b-0 no-underline" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      {label}
      <span className={`absolute left-0 bottom-0 w-full rounded-sm bg-gradient-to-r from-orange-600 to-purple-600 transition-all duration-300 ${isHovered ? 'h-0.5' : 'h-px'}`} />
    </a>;
};

Get your API key and configure your Para integration through the <Link label="Developer Portal" href="https://developer.getpara.com" />. Your API key is required to initialize the Para SDK and enables you to manage your application's settings including supported networks, allowed domains, and email configuration.

<Tip>Prefer the terminal? The <Link label="Para CLI" href="/v2/cli/overview" /> lets you create API keys with `para keys create`, configure security and branding with `para keys config`, and validate your setup with `para doctor`.</Tip>

## Get Your API Key

1. Sign up or log in at <Link label="developer.getpara.com" href="https://developer.getpara.com" />
2. Create a new project or select an existing one
3. Copy your API key from the dashboard

Your API key includes an environment prefix (`BETA_` or `PROD_`) that determines which Para environment you're connecting to. Use `BETA_` keys during development for access to test credentials.

<Tip>
  Check out the <Link label="Testing Guide" href="/v2/react/testing-guide" /> to learn about test emails and phone numbers available in the BETA environment.
</Tip>

## Environment Configuration

Set up your development environment to match your application's framework and package manager preferences. This will provide you with tailored integration examples and installation commands or visit the <Link label="Quickstart Guide" href="/v2/react/quickstart" /> for a general overview.

<Frame>
  <img src="https://mintcdn.com/getpara/Yc456VjJn0ZAAvY0/images/v2/developer-portal-environment-setup.png?fit=max&auto=format&n=Yc456VjJn0ZAAvY0&q=85&s=6113ef07e61c602873841fc148b1d25c" alt="Developer Portal Environment Setup" width="808" height="186" data-path="images/v2/developer-portal-environment-setup.png" />
</Frame>

### Framework Selection

Choose your primary framework to receive tailored integration examples:

* **React**: For React applications and Next.js projects
* **Vue**: For Vue.js applications and Nuxt projects
* **Svelte**: For Svelte and SvelteKit applications
* **React Native**: For mobile applications
* **Flutter**: For cross-platform mobile development

### Package Manager

Select your preferred package manager for installation commands:

* **npm**: Default Node.js package manager
* **yarn**: Alternative package manager with workspace support
* **pnpm**: Fast, disk space efficient package manager

## Network Configuration

Configure which blockchain networks your application supports and require users to connect.

<Note>
  This will configure which wallet options are available during user authentication. Your app will receive wallets for each required network.
</Note>

<Frame>
  <img src="https://mintcdn.com/getpara/Yc456VjJn0ZAAvY0/images/v2/developer-portal-networks-configuration.png?fit=max&auto=format&n=Yc456VjJn0ZAAvY0&q=85&s=91bc382124935b749e614ec9752747f8" alt="Developer Portal Networks Configuration" width="808" height="365" data-path="images/v2/developer-portal-networks-configuration.png" />
</Frame>

### Available Networks

* **Ethereum (EVM)**: Includes Ethereum Layer 2 networks
* **Solana**: Solana blockchain network
* **Cosmos**: Cosmos ecosystem networks

### Network Requirements

Toggle "Required" for networks where users must connect at least one wallet of that type during login. This ensures users have the necessary wallet connections for your application's functionality.

## Domain Security

Configure allowed origins to secure your API requests and prevent unauthorized access.

<Tip>
  This prevents unauthorized domains from making API requests to your Para integration. Allowed Origins are only supported for web integrations, not server or mobile.
</Tip>

<Frame>
  <img src="https://mintcdn.com/getpara/Yc456VjJn0ZAAvY0/images/v2/developer-portal-allowed-origins.png?fit=max&auto=format&n=Yc456VjJn0ZAAvY0&q=85&s=cf9a69b97c94a7208bfdb0fe056819ab" alt="Developer Portal Allowed Origins Configuration" width="808" height="345" data-path="images/v2/developer-portal-allowed-origins.png" />
</Frame>

### Origin URLs

Add your application's domains to the allowed origins list:

```
www.yourapp.com, app.yourapp.com, localhost:3000
```

### Security Best Practices

* Add only necessary domains to minimize attack surface
* Include all environments (development, staging, production)
* Separate multiple domains with commas
* Use HTTPS in production environments

## Email Configuration

Configure email settings for user verification and communication.

<Frame>
  <img src="https://mintcdn.com/getpara/Yc456VjJn0ZAAvY0/images/v2/developer-portal-email-configuration.png?fit=max&auto=format&n=Yc456VjJn0ZAAvY0&q=85&s=01fceffa0e421205c628c4ab63e9ef97" alt="Developer Portal Email Configuration" width="808" height="414" data-path="images/v2/developer-portal-email-configuration.png" />
</Frame>

Configure the theming of emails sent to your users on the <Link label="Email Branding" href="/v2/react/guides/customization/developer-portal-email-branding" /> page.

### Verification URL

Set the redirect URL displayed in verification emails that users receive. This should point to your application where users complete the authentication process.

### Email Types

Choose which emails Para sends to your users:

* **Welcome Email Only**: Send only welcome emails to new users
* **Welcome Email + Backup Kit**: Include backup kit instructions for new wallets
* **No Email**: Disable all automated emails (except OTP emails)

## Pricing

Para's free tier includes 1,200 monthly active users at no cost — no credit card required to get started. This gives you plenty of room to build and test your integration before considering a paid plan.

<Tip>
  You can monitor your MAU usage in the Developer Portal dashboard. Upgrade to a paid plan anytime if you need more capacity.
</Tip>

## Next Steps

<CardGroup cols={2}>
  <Card title="Email Branding" description="Customize the appearance of Welcome and OTP emails with your brand colors, fonts, and logos." href="/v2/react/guides/customization/developer-portal-email-branding" />

  <Card title="Payment Integration" description="Configure payment providers and transaction features for buying and selling crypto." href="/v2/react/guides/customization/developer-portal-payments" />

  <Card title="Security Settings" description="Set up authentication methods, session management, and transaction permissions." href="/v2/react/guides/customization/developer-portal-security" />
</CardGroup>