Customization

Customize the authentication flow and email templates

With Crossmint Auth, you can customize the authentication flow and email templates with your brand’s identity.

Modal Customization

The CrossmintAuthProvider component allows you to customize the authentication modal appearance.

<CrossmintAuthProvider
    appearance={{
        spacingUnit: "8px",
        borderRadius: "12px",
        colors: {
            inputBackground: "#fffdf9",
            buttonBackground: "#fffaf2",
            border: "#835911",
            background: "#FAF5EC",
            textPrimary: "#5f2c1b",
            textSecondary: "#835911",
            danger: "#ff3333",
            accent: "#602C1B",
        },
    }}
>
    {children}
</CrossmintAuthProvider>

The modal will also use your display name configured in the Crossmint Console. To learn more, see the “Email Customization” section below.

Embedded Login

For a more integrated experience, you can use our embedded login component, which offers flexibility to display the login form in your own modal or as part of a split login screen.

import { EmbeddedAuthForm, useAuth } from "@crossmint/client-sdk-react-ui";

export default function Home() {
const { user, status } = useAuth(); // "in-progress" | "logged-in" | "logged-out"

return (
	<div className="max-w-[150px]">
		{status === "logged-in" ? user.email : <EmbeddedAuthForm/>}
	</div>
)
}

Email Customization

Email OTP is a login method that allows users to sign in to your app using their email address. They receive a one-time code via email that they can use to log in.

You can customize the email template to align with your brand’s identity. We strongly recommend doing so, as it increases user trust and security. To modify the email template:

1. In the Crossmint Console, click on Settings, and navigate to the Branding tab.
2. Here, you can customize:
   • The logo displayed in the email with your logo.
   • The display name textbox to include your brand’s name.