Crossmint wallets can be used with all major authentication providers (such as Cognito, Auth0, Firebase, Stytch, etc.) as well as other wallet providers (like Privy and Dynamic). For Privy and Dynamic, you can use their embedded wallets as signers for Crossmint wallets.

​
Prerequisites

  • API Key: Ensure you have an API key with the scopes: wallets.create.

​
Using your own auth provider

1

Configure JWT Authentication in the Crossmint Console

  1. Navigate to your project in the Crossmint Console.
  2. Go to the API Keys section from the sidebar.
  3. Scroll down to the JWT authentication section.
  4. Choose your preferred authentication method:
  • 3P Auth providers: Select from supported providers such as Dynamic, Auth0, Stytch, Privy, or Firebase. Enter any required environment IDs or configuration details.
  • Custom tokens: Opt to issue and manage your own JWTs.
  1. After making your selection and providing any necessary details, click Save JWT auth settings to apply your configuration.
JWT Authentication Settings
2

Add the Crossmint providers to your app

Add the necessary Crossmint providers to your app together with your own auth provider. With the current setup, a wallet will be created automatically on login.
"use client";

import {
    CrossmintProvider,
    CrossmintWalletProvider,
} from "@crossmint/client-sdk-react-ui";

import { YourAuthProvider } from "@your-auth-provider";

export function Providers({ children }: { children: React.ReactNode }) {
    return (
        <YourAuthProvider>
            <CrossmintProvider apiKey="<crossmint-client-api-key>">
                <CrossmintWalletProvider
                    createOnLogin={{
                        chain: "<your-chain>",
                        signer: {
                            type: "<your-signer-type>",
                        },
                    }}
                >
                    {children}
                </CrossmintWalletProvider>
            </CrossmintProvider>
        </YourAuthProvider>
    );
}

​
Configuring the Wallet Provider

​
createOnLogin
object
If set creates a wallet on login using the specified configuration.
​
callbacks
object
A set of callbacks to be called when the wallet is created or a transaction is initiated.
​
showPasskeyHelpers
boolean
Only applies if you are using a passkey as the signer.If true, modals explaining what passkeys are will be shown to the user when creating a wallet and signing a transaction, for a better user experience.
​
appearance
UIConfig
Styles to configure the appearance of the passkey modal.
3

Passthrough the jwt information to the Crossmint provider

Set the user in the auth provider.
"use client";

import { useYourAuthProviderHook } from "@your-auth-provider";
import { useEffect } from "react";
import { useCrossmint } from "@crossmint/client-sdk-react-ui";

const { jwt, email } = useYourAuthProviderHook();
const { experimental_setCustomAuth } = useCrossmint();

export function YourComponent() {
    const { jwt, email } = useYourAuthProviderHook();
    const { experimental_setCustomAuth } = useCrossmint();

    useEffect(() => {
        if (jwt && email) {
            experimental_setCustomAuth({
                jwt,
                email,
            });
        }
    }, [jwt, email]);

    // your component logic here
    return (
        <div>
            <h1>Your Component</h1>
        </div>
    );
}