Appearance
Documentation / react-auth / PrivyClientConfig
Interface: PrivyClientConfig
Properties
additionalChains?
additionalChains?:
Chain
[]
Deprecated
use supportedChains
instead.
appearance?
appearance?:
Object
All UI and theme related configuration
Type declaration
accentColor?
accentColor?: `#${string}`
Accent color for the privy UI. Used for buttons, active borders, etc. This will generate light and dark variants. This overrides the server setting accent_color
.
landingHeader?
landingHeader?:
string
Header text for the landing screen of the Privy login modal. We strongly recommend using a string of length 35 or less. Strings longer than the width of the login modal will be ellipsified.
Defaults to 'Log in or sign up'.
loginMessage?
loginMessage?:
string
Subtitle text for the landing screen of the Privy login modal.
This text will renders below the logo and will be capped at 100 characters.
Defaults to undefined.
logo?
logo?:
string
|ReactElement
<any
,string
|JSXElementConstructor
<any
>>
Logo for the main privy modal screen. This can be a string (url) or an img / svg react element. If passing an element, Privy will overwrite the style
props, to ensure proper rendering. This overrides the server setting logo_url
showWalletLoginFirst?
showWalletLoginFirst?:
boolean
Determines the order of the login options in the privy modal. If true, the wallet login will render above social and email / sms login options. This overrides the server setting show_wallet_login_first
theme?
theme?:
"light"
|"dark"
| `#${string}`
Primary theme for the privy UI. This dictates the foreground and background colors within the UI.
'light' (default): The privy default light UI. 'dark': The privy default dark UI. custom hex code (i.e. '#13152F'): A custom background. This will generate the remainder of the foreground and background colors for the UI by modulating the luminance of the passed color. This value should be either dark or light (<20% or >
80% luminance), for accessibility.
walletChainType?
walletChainType?:
"ethereum-and-solana"
|"ethereum-only"
|"solana-only"
Determines which external wallet types to show in the modal. By default, only Ethereum external wallets are shown. If you want to show Solana wallets, set this to 'solana-only' or 'ethereum-and-solana'.
When 'ethereum-and-solana' is set, Solana wallets will have a badge indicating that they are Solana wallets.
Defaults
'ethereum-only'
walletList?
walletList?:
WalletListEntry
[]
An array of wallet names to configure the wallet buttons shown within the login
, connectWallet
, and linkWallet
modals. Privy will show buttons for each option present in the list, in the order in which they are configured.
On 'detected_wallets':
- This option serves as a fallback to include all wallets that detected by Privy, that might not be individually configured in the
walletList
. Browser extension wallets that are not explicitly configured in thewalletList
will fall into this category. - If Privy detects a wallet, and that wallet is configured within the
walletList
(e.g. 'metamask'), the order of the wallet's explicit name (e.g. 'metamask') in thewalletList
will take priority over the order of 'detected_wallets'.
Defaults to ['detected_wallets', 'metamask', 'coinbase_wallet', 'rainbow', 'wallet_connect']
Default
ts
['detected_wallets', 'metamask', 'coinbase_wallet', 'rainbow', 'wallet_connect']
captchaEnabled?
captchaEnabled?:
boolean
customAuth?
customAuth?:
Object
This property is only required for apps that use a third-party authentication provider.
Type declaration
enabled?
enabled?:
boolean
If true, enable custom authentication integration. This enables a JWT from a custom auth provider to be used to authenticate Privy embedded wallets. Defaults to true.
Default
ts
true
getCustomAccessToken
getCustomAccessToken: () =>
Promise
<undefined
|string
>
A callback that returns the user's custom auth provider's access token as a string. Can be left blank if using cookies to store and send access tokens
Returns
Promise
<undefined
| string
>
Example
ts
const {getAccessTokenSilently} = useAuth();
<PrivyProvider
{...props}
config={{
customAuth: {
getCustomAccessToken: getAccessTokenSilently
},
}}
/>
isLoading
isLoading:
boolean
Custom auth providers loading state
Example
ts
const {isLoading} = useAuth();
<PrivyProvider
{...props}
config={{
customAuth: {
isLoading,
},
}}
/>
defaultChain?
defaultChain?:
Chain
When supplied, the defaultChain
will be the default chain used throughout the application.
For external wallets, it will be used if the user's wallet it not within the supportedChains
(or default chains) list.
For embedded wallets, it will be used upon initialization, when the user hasn't switched to another supported chain.
embeddedWallets?
embeddedWallets?:
Object
All embedded wallets configuration
Type declaration
createOnLogin?
createOnLogin?:
EmbeddedWalletCreateOnLoginConfig
Whether an embedded wallet should be created for the user on login. This overrides the deprecated createPrivyWalletOnLogin
.
For all-users
, the user will be prompted to create a Privy wallet after successfully logging in. If they cancel or are visiting after this flag was put in place, they will be prompted to create a wallet on their next login.
For users-without-wallets
, the user will be prompted to create a Privy wallet after
successfully logging in, only if they do not currently have any wallet associated with their user object - for example if they have linked an external wallet.
For off
, an embedded wallet is not created during login. You can always prompt the user to create one manually with your app.
Defaults to 'off'.
extendedCalldataDecoding?
extendedCalldataDecoding?:
boolean
If true, Privy will attempt to additional decoding calldata for 721 and 1155 appoval, transfer, and mint sendTransaction calls, in addition to the default ERC20 transfer
and approve
decoding. If false, Privy will only decode transfer
and approve
calldata for ERC20 tokens.
Default
ts
false
@experimental This is an experimental config that is subject to breaking changes without a major version bump of the SDK.
noPromptOnSignature?
noPromptOnSignature?:
boolean
@deprecated. Instead, use the server-driven configuration found in the Privy console: https://dashboard.privy.io/apps/YOUR_APP_ID/embedded. or the client-side 'embeddedWallets.showWalletUIs' configuration. If true, Privy will not prompt or instantiate any UI for embedded wallet signatures and transactions. If false, embedded wallet actions will raise a modal and require user confirmation to proceed.
Defaults to false.
priceDisplay?
priceDisplay?:
PriceDisplayOptions
Options to customize the display of transaction prices in the embedded wallet's transaction prompt. You may configure a primary currency to emphasize, and a secondary currency to show as subtext. Defaults to emphasizing the price in fiat currency, and showing the price in the native token as subtext.
You may either set:
{primary: 'fiat-currency', secondary: 'native-token'}
to emphasize fiat currency prices, showing native token prices as subtext. This is the default.{secondary: 'native-token', secondary: null}
to show native token prices only, with no subtext.
Privy does not currently support:
- emphasizing native token prices over fiat currency prices
- showing prices only in fiat currency, without native token prices
requireUserPasswordOnCreate?
requireUserPasswordOnCreate?:
boolean
@deprecated. Instead, use the server-driven configuration found in the Privy console: https://dashboard.privy.io/apps/YOUR_APP_ID/embedded. This client-side setting is currently honored, but will be fully removed in a future release.
If true, Privy will prompt users to create a password for their Privy embedded wallet. If false, embedded wallets will be created without the need of password.
Defaults to false.
showWalletUIs?
showWalletUIs?:
boolean
Override any settings for the embedded wallet's UI to show or hide the wallet UIs.
If true, wallet UIs will always be shown. If false, wallet UIs will always be hidden.
If not set, the default behavior will match the server configuration.
waitForTransactionConfirmation?
waitForTransactionConfirmation?:
boolean
This setting is only honored when using the EIP-1193 Ethereum Provider to interface with the embedded wallet, i.e. using getEthereumProvider
or getEthersProvider
. This setting is only honored when used alongside showWalletUIs: false
If true, calls to sendTransaction
will wait for the transaction to be confirmed before resolving. If false, calls to sendTransaction
will resolve once the transaction has been submitted.
Defaults to true.
Example
ts
<PrivyProvider
config={{
embeddedWallets: {
showWalletUIs: false,
waitForTransactionConfirmation: false,
},
}}
>
{children}
</PrivyProvider>
externalWallets?
externalWallets?:
ExternalWalletsConfig
Options for connecting to external wallets like Coinbase Wallet, MetaMask, etc.
This is an experimental config that is subject to breaking changes without a major version bump of the SDK.
fiatOnRamp?
fiatOnRamp?:
Object
@deprecated. Use fundingMethodConfigurations -> moonpay -> useSandbox
instead. Setting associated with fiat-on-ramp flows
Type declaration
useSandbox?
useSandbox?:
boolean
Determines whether to use the sandbox flow.
Defaults to false.
fundingMethodConfig?
fundingMethodConfig?:
Object
Settings associated with funding methods
Type declaration
moonpay
moonpay:
Object
moonpay.paymentMethod?
moonpay.paymentMethod?:
MoonpayPaymentMethod
Determines the payment method for each Moonpay transaction.
Defaults to Moonpay's default.
moonpay.uiConfig?
moonpay.uiConfig?:
MoonpayUiConfig
Determines the UI settings for each Moonpay transaction.
Defaults to Moonpay's default.
moonpay.useSandbox?
moonpay.useSandbox?:
boolean
Determines whether to use the Moonpay sandbox flow.
Defaults to false.
intl?
intl?:
Object
Options for internationalization of the privy modal
Type declaration
defaultCountry
defaultCountry:
CountryCode
This property is used to configure formatting and validation for the phone number input used when phone
is enabled as a login method. Must be a valid two-leter ISO country code (e.g. 'US'). Defaults to 'US'.
Default
ts
'US'
legal?
legal?:
Object
All legal configuration
Type declaration
privacyPolicyUrl?
privacyPolicyUrl?:
null
|string
URL to the privacy policy page for your application. Rendered as a link in the privy modal footer. This overrides the server setting privacy_policy_url
termsAndConditionsUrl?
termsAndConditionsUrl?:
null
|string
URL to the terms and conditions page for your application. Rendered as a link in the privy modal footer. This overrides the server setting terms_and_conditions_url
loginMethods?
loginMethods?: (
"sms"
|"google"
|"discord"
|"twitter"
|"github"
|"spotify"
|"instagram"
|"tiktok"
|"linkedin"
|"apple"
|"email"
|"farcaster"
|"telegram"
|"wallet"
)[]
Login methods for the privy modal.
This parameter enables you to display a subset of the login methods specified in the developer dashboard. loginMethods
cannot be an empty array if specified. The order of this array does not dictate order of the login methods in the UI.
Note that any login method included in this parameter must also be enabled as a login method in the developer dashboard.
If both loginMethodsAndOrder
and loginMethods
are defined, loginMethodsAndOrder
will take precedence.
loginMethodsAndOrder?
loginMethodsAndOrder?:
Object
Login methods for the Privy modal. This will override carefully designed defaults and should be used with caution.
This parameter enables you to display a subset of the login methods specified in the developer dashboard. Login methods will be rendered in the order they appear in the array. The first 4 options specified in the primary
list will render on the default screen of the login experience. Options in the overflow
list will appear on the following screen.
Note that any login method included in this parameter must also be enabled as a login method in the developer dashboard.
If both loginMethodsAndOrder
and loginMethods
are defined, loginMethodsAndOrder
will take precedence.
Type declaration
overflow?
overflow?:
LoginMethodOrderOption
[]
primary
primary:
NonEmptyArray
<LoginMethodOrderOption
>
mfa?
mfa?:
Object
All multi-factor authentication configuration
Type declaration
noPromptOnMfaRequired?
noPromptOnMfaRequired?:
boolean
If true, Privy will not prompt or instantiate any UI for MFA Verification. The developer must handle MFA verification themselves. If false, any action that requires MFA will raise a modal and require user to verify MFA before proceeding.
Defaults to false.
rpcConfig?
rpcConfig?:
RpcConfig
Deprecated
use supportedChains[number].rpcUrls.privyWalletOverride
instead.
RPC overrides to customize RPC URLs and timeout durations.
solanaClusters?
solanaClusters?:
SolanaCluster
[]
A list of SolanaCluster objects, used to specify which RPC URLs should be used for each cluster.
If a cluster is not specified, the default RPC URL for that cluster will be used.
supportedChains?
supportedChains?:
Chain
[]
A list of supported chains, used to specify which chains should be used throughout the application.
Calling sendTransaction
or switchChain
on an unsupported network will throw an error.
For external wallets, if the wallet's current chain post-connection (during connect-only or siwe flows) is not within the supported chains list, the user will be prompted to switch to the defaultChain
(if set) or first supplied. If the chain switching process does not fully succeed, the user will not be blocked from the application (and the wallet's current chainId
can always be observed and acted upon accordingly).
For embedded wallets, the wallet will automatically default to the defaultChain
(if set) or first supplied supportedChain
.
walletConnectCloudProjectId?
walletConnectCloudProjectId?:
string