Skip to main content

Configuring Privy for your app

With Privy, you can easily customize your app's onboarding experience, including login options, branding & UIs, and legal policies!

To configure Privy for your app, simply pass a config property to the PrivyProvider, like below:

Configuring Privy for your app
<PrivyProvider
  appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
  config={{
    // Configure your app's login methods
    loginMethods: ['wallet', 'email', 'google', 'twitter'],
    // Configure your app's branding and UIs
    appearance: {
      theme: "dark",
      accentColor: "#676FFF",
      logo: "https://your-logo-url",
      showWalletLoginFirst: true
    },
    // Configure your app's legal policies
    legal: {
      termsAndConditionsUrl: 'https://your-terms-and-conditions-url',
      privacyPolicyUrl: 'https://your-privacy-policy-url'
    }
  }}
>

Read on to see how to construct a config to:

or check out some examples!

info

If you have previously configured login methods, accent color, logo, etc. via the developer console, those settings will still be applied to your app, unless you pass a config property to your PrivyProvider. The settings from the PrivyProvider's config property will override any settings from the developer console.

Login Methods​

To configure your app's login methods, pass in an loginMethods array to the config property.

Configuring login methods for your app
<PrivyProvider
  appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
  config={{
    appearance: {
      // This configures your login modal to show wallet login options above other options.
      showWalletLoginFirst: true,
    },
    // This configures wallet, email, Google, and Twitter login for your app.
    loginMethods: ['wallet', 'email', 'google', 'twitter']
  }}
>

The supported loginMethods are 'wallet', 'email', 'sms', 'google', 'twitter', 'discord', 'github', and 'apple'. You can also customize the ordering of login options on the login modal.

Configure your app with the login methods best suited for your users.

Note that these preferences will only apply to the login modal that appears when login is invoked. Even if you haven't enabled a given login method for your app, you can still prompt a user to link that type of account using the respective link- call, after they've logged in.

Branding​

To customize the look and feel of Privy's UIs to match your brand, pass in an appearance object to the config property.

Example of configuring a theme for the Privy modal
<PrivyProvider
  appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
  config={{
    appearance: {
      theme: "dark",
      accentColor: "#676FFF",
      logo: "https://your-logo-url",
      showWalletLoginFirst: true
    }
  }}
>

In the appearance object, you may include the following three parameters:

  • theme: the overall color scheme of the modal
  • accentColor: the accent color used for active states, CTAs, and more
  • logo: your app's logo
  • showWalletLoginFirst: whether to show wallet login options above or below other login options

Each of these works in concert to match your application's UI and branding; read on to learn how to customize each of these parameters!

Theme​

The theme property sets the background and foreground colors of the Privy modal, and has three potential values:

  • 'light' (standard Privy light theme)
  • 'dark' (standard Privy dark theme)
  • a custom hexadecimal color as a string (e.g. '#13152F')
info

If you'd like to set your modal's theme based on your user's system preferences, check out this guide!

If you set a custom hexadecimal color as the theme, the theme color will be used as the primary background color for the Privy modal. All other colors will be automatically generated by modulating the luminance of the theme color you set. This creates a cohesive palette that matches your app's branding. If you'd like, you may also override these automatically generated colors to better match your brand palette.

tip

If you set a custom hexadecimal color as your theme, we strongly recommend choosing a color that is either light or dark (>80% or <20% luminance, as defined by HSL). This helps ensure there is sufficient contrast between foreground and background colors in the Privy modal.

If you do not explicitly set a theme, the Privy modal will default to the Privy light theme.

Accent Color​

The accentColor property is will be used for active states, calls to action, and accents throughout the application. You may set any hexadecimal color as a string as the accentColor.

If you do not specify an accentColor, Privy will use #696FFD by default.

The logo property is used to display your application's logo on your login modal. You should provide a URL to a hosted image. For best results, we recommend an SVG format with a 4:1 aspect ratio.

Order of Login Options​

The showWalletLoginFirst property is used to determine whether your login modal shows wallet login options above or below other login options (email, SMS, socials). By default, it is true.

If you'd like your app to cater more to newcomers than native users, you can toggle this property to false to prioritize more familiar login methods for your users.

Want to customize Privy's UIs further?

Beyond the configuration properties above, Privy also enables you to explicitly override specific colors in the login modal, to further match your product's design system and color palette. You might use these overrides if you are using a default Privy theme ('light' or 'dark') and wish to tweak a certain color, or if you set a custom theme and want to use your exact brand colors instead of the automatically-generated ones.

To explicitly override colors in your Privy modal, simply add the corresponding CSS variable for the color to the CSS :root of your app, and set it to your custom color. The possible CSS variables are listed below; we encourage you to use your browser's developer tools to experiment with different color combinations to find the right one for your app!

Using :root CSS overrides
:root {
  --privy-border-radius-sm: 'your-custom-value';
  --privy-border-radius-md: 'your-custom-value';
  --privy-border-radius-lg: 'your-custom-value';
  --privy-border-radius-full: 'your-custom-value';
  --privy-color-background: 'your-custom-value';
  --privy-color-background-2: 'your-custom-value';
  --privy-color-foreground: 'your-custom-value';
  --privy-color-foreground-2: 'your-custom-value';
  --privy-color-foreground-3: 'your-custom-value';
  --privy-color-foreground-4: 'your-custom-value';
  --privy-color-foreground-accent: 'your-custom-value';
  --privy-color-accent: 'your-custom-value';
  --privy-color-accent-light: 'your-custom-value';
  --privy-color-accent-dark: 'your-custom-value';
  --privy-color-success: 'your-custom-value';
  --privy-color-error: 'your-custom-value';
}

When users login to your app, you can use Privy to collect their consent to your app's legal policies.

To configure your app's legal policies, pass in a legal object to the config property. In this object, you may provide a termsAndConditionsUrl and/or a privacyPolicyUrl as strings.

Configuring your Terms & Conditions and Privacy Policy
<PrivyProvider
  appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
  config={{
    legal: {
      termsAndConditionsUrl: 'https://your-terms-and-conditions-url',
      privacyPolicyUrl: 'https://your-privacy-policy-url'
    }
  }}
>

These policies will be linked from your app's login modal, and your users must accept them when logging in.

Example UI Configurations​

Below are some example config properties passed to the PrivyProvider.


Example light theme configuration
// Since no appearance.accentColor is specified, the default accentColor (#696FFD) is used.
const config = {
  appearance: {
    theme: 'light',
    logo: 'light-logo-url'
  }
};