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 and content.

<CrossmintAuthProvider
    authModalTitle="Sign in to My App"
    termsOfServiceText={
        <p>
            By continuing, you agree to our <a href="/terms">Terms of Service</a> and{" "}
            <a href="/privacy">Privacy Policy</a>
        </p>
    }
    appearance={{
        spacingUnit: "8px",
        borderRadius: "12px",
        colors: {
            inputBackground: "#fffdf9",
            buttonBackground: "#fffaf2",
            border: "#835911",
            background: "#FAF5EC",
            textPrimary: "#5f2c1b",
            textSecondary: "#835911",
            textLink: "#1400cb",
            danger: "#ff3333",
            accent: "#602C1B",
        },
    }}
>
    {children}
</CrossmintAuthProvider>

Modal props

Prop	Type	Description
authModalTitle	string	Custom title displayed at the top of the authentication modal
termsOfServiceText	string | ReactNode	Custom terms of service text displayed below the authentication form
appearance	UIConfig	Styling configuration for the modal (see example above)

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.

When customizing email text, avoid using terms like “airdrop”, “token”, or “crypto” as these can trigger spam filters and hurt email deliverability.