Customizing Particle Auth

A central value of Particle Network is fundamental customization and application-specificity, especially within Particle Auth, the primary mechanism driving connection (social login) within Particle Network's tech stack. Logos, colors, border weight and sharpness, etc. can all be deeply customized either through a no-code interface or programmatically through either Particle Auth or Particle Auth Core, with Auth Core providing more advanced customization options if needed. This page will go through the different methods of customizing Particle Auth.

‎

Programmatic Customization (Particle Auth Core)

The most popular method of customizing the Particle Auth interface is through programmatic style definition. Within Particle Auth Core (@particle-network/auth-core-modal), or their mobile equivalents, programmatic customization is possible during the process of initializing the SDK.

High-level customization can occur with parameters such as light or dark mode by setting themeType (within AuthCoreContextProvider), setting the language used within the modal through language, the fiat representation in fiatCoin, etc.

Deeper customization is possible through the customStyle parameter (this is in options on AuthCoreContextProvider). customStyle accepts the following parameters:

logo?: string;
projectName?: string;
subtitle?: string;
modalWidth?: number;
modalHeight?: number;
primaryBtnBorderRadius?: number | string;
modalBorderRadius?: number | string;
cardBorderRadius?: number | string;
fontFamily?: string;
theme?: {
	dark?: ThemeStyle;
	light?: ThemeStyle;
};

// ThemeStyle
primaryBtnColor?: string;
primaryBtnBackgroundColor?: string;
secondaryBtnColor?: string;
secondaryBtnBackgroundColor?: string;
textColor?: string;
secondaryTextColor?: string;
themeBackgroundColor?: string;
iconBorderColor?: string;
accentColor?: string;
inputBackgroundColor?: string;
inputBorderColor?: string;
inputPlaceholderColor?: string;
cardBorderColor?: string;
cardUnclickableBackgroundColor?: string;
cardUnclickableBorderColor?: string;
cardDividerColor?: string;
tagBackgroundColor?: string;
modalBackgroundColor?: string;
tipsBackgroundColor?: string;

‎

Each of these options will alter the appearance of the authentication menu and transaction popups. For an example of this customization, see the below graphic:

‎

UI-based Customization (Particle Auth)

When using Particle Auth (@particle-network/auth), the Particle dashboard has a built-in no-code customization menu within which you can apply the same customizations (and more) without defining them within your application. This can be accessed through https://dashboard.particle.network/#/branding. Within this interface, you'll find specific profiles for light and dark mode, alongside various options for colors, border radius, logo, text, etc. This extends to transaction confirmation and email verification menus. You'll also find the settings to alter the verification email and SMS sent out to users upon request, if applicable within your application.

Upon applying these settings, it'll be automatically updated within an instance of Particle Auth using your projectId, clientKey, and appId.

If you'd like to go through the same type of interface, but instead copy the resulting style JSON to be used programmatically, head over to https://core-demo.particle.network/customize.html