Particle Auth

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

The most popular method of customizing the Particle Auth interface is through programmatic style definition. Within both Particle Auth (@particle-network/auth) and 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 uiMode for Particle Auth, themeType for Particle Auth Core, setting the language used within the modal through language, the fiat representation in fiatCoin, etc.

Deeper customization is possible through the customStyle parameter (for Particle Auth Core, this is in options on AuthCoreContextProvider, otherwise, for Particle Auth, this is within particle.setAuthTheme). 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

Alternatively, 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 (or Auth Core) 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