Skip to main content
Configure how users authenticate through the Para Modal, including OAuth providers, email/phone options, and layout customization.

​
OAuth Methods

paraModalConfig={{
  oAuthMethods: ["GOOGLE", "TWITTER", "DISCORD", "APPLE"]
}}
Available OAuth providers:
  • GOOGLE - Google OAuth
  • TWITTER - Twitter/X OAuth
  • APPLE - Apple OAuth
  • DISCORD - Discord OAuth
  • FACEBOOK - Facebook OAuth
  • FARCASTER - Farcaster OAuth
  • TELEGRAM - Telegram OAuth
  • CUSTOM_OIDC - Your own OpenID Connect provider
CUSTOM_OIDC is enabled here like any other method, but its provider details (issuer, client ID, secret) are configured on your partner record, not via paraModalConfig. See Set up Custom OIDC.

​
Email and Phone Login

paraModalConfig={{
  disableEmailLogin: false,
  disablePhoneLogin: true, // Only allow email and OAuth
  oAuthMethods: ["GOOGLE", "TWITTER"]
}}

​
Default Authentication Identifier

paraModalConfig={{
  defaultAuthIdentifier: "user@example.com" // or "+15555555555"
}}
Phone numbers should be in international format: +15555555555
You can also pass defaultAuthIdentifier directly to openModal() for dynamic scenarios where the identifier is known at the time of opening: 
const { openModal } = useModal();

// Pass identifier at open time instead of at the provider level
openModal({ defaultAuthIdentifier: "user@example.com" });

​
Authentication Layout

paraModalConfig={{
  authLayout: ["AUTH:CONDENSED", "EXTERNAL:FULL"]
}}
Available layout options:
  • AUTH:FULL - Full authentication component
  • AUTH:CONDENSED - Condensed authentication component
  • EXTERNAL:FULL - Full external wallet component
  • EXTERNAL:CONDENSED - Condensed external wallet component
Use our to visualize different layout configurations before implementing them.

​
Guest Mode

paraModalConfig={{
  isGuestModeEnabled: true
}}
Guest mode allows users to interact with your application without completing full authentication. Users receive provisional wallets that can later be upgraded to full accounts.

​
Complete Authentication Example

<ParaProvider
  paraClientConfig={{
    apiKey: process.env.REACT_APP_PARA_API_KEY || "",
  }}
  config={{
    appName: "Your App Name"
  }}
  paraModalConfig={{
    // OAuth providers
    oAuthMethods: ["GOOGLE", "TWITTER", "DISCORD"],

    // Email/phone configuration
    disablePhoneLogin: false,
    disableEmailLogin: false,
    defaultAuthIdentifier: "user@example.com",

    // Layout
    authLayout: ["AUTH:FULL", "EXTERNAL:CONDENSED"],

    // Guest mode
    isGuestModeEnabled: false
  }}
>
  {children}
</ParaProvider>