Skip to main content
The paraModalConfig prop passed to ParaProvider controls the modal’s runtime behavior and accepts a number of customization options.
In v3, the partner record is the source of truth for configuration (auth methods, theme, 2FA, guest mode, layout, branding). The matching paraModalConfig props below — such as oAuthMethods, theme, twoFactorAuthEnabled, isGuestModeEnabled, authLayout, logo — are deprecated and act only as a lowest-priority fallback. Configure these in the Developer Portal, and read How Configuration Works for the supported in-code override (configOverrides). The props that remain code-only are runtime/behavior props like currentStepOverride, defaultAuthIdentifier, and onClose.
Para Modal Customization

​
Basic Setup

Pass the paraModalConfig object to your ParaProvider to customize the modal: 
<ParaProvider
  paraClientConfig={{
    apiKey: process.env.REACT_APP_PARA_API_KEY || "",
  }}
  config={{
    appName: "Your App Name"
  }}
  paraModalConfig={{
    logo: "https://yourdomain.com/logo.png",
    theme: {
      foregroundColor: "#007AFF",
      backgroundColor: "#FFFFFF"
    },
    // ... other customization options
  }}
>
  {children}
</ParaProvider>

​
Configuration Options

A full list of available configuration options for the paraModalConfig prop available on the ParaProvider component:

​
Complete Example

Here’s a comprehensive example showcasing multiple configuration options: 
<ParaProvider
  paraClientConfig={{
    apiKey: process.env.REACT_APP_PARA_API_KEY || "",
  }}
  config={{
    appName: "Your App Name"
  }}
  paraModalConfig={{
    // Runtime / behavior props — these stay in code:
    defaultAuthIdentifier: "user@example.com",
    recoverySecretStepEnabled: true,
    currentStepOverride: "AUTH_MAIN",
    onRampTestMode: false,
    onClose: () => {
      console.log('Modal closed');
    },

    // ⚠️ DEPRECATED — these are now configured on the partner record
    // (Developer Portal), or via `configOverrides` on ParaProvider. Shown here
    // only to map the old prop names. See:
    // /v3/react/guides/customization/configuration
    logo: "https://yourdomain.com/logo.png",
    oAuthMethods: ["GOOGLE", "TWITTER", "DISCORD"],
    disablePhoneLogin: false,
    disableEmailLogin: false,
    authLayout: ["AUTH:FULL", "EXTERNAL:CONDENSED"],
    twoFactorAuthEnabled: true,
    isGuestModeEnabled: false,
    theme: {
      foregroundColor: "#007AFF",
      backgroundColor: "#FFFFFF",
      mode: "light",
      borderRadius: "md",
      font: "Inter, sans-serif",
      foregroundMixRatio: 0.04
    },
    supportedAccountLinks: ["EMAIL", "PHONE", "GOOGLE", "TWITTER", "EXTERNAL_WALLET"]
  }}
>
  {children}
</ParaProvider>
Test your modal configuration with our interactive tool:

Modal Designer

​
Next Steps

Explore detailed configuration guides for specific aspects of the modal:

Configure Authentication

Style the Modal