Bring Your Own Auth

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.

5. After making your selection and providing any necessary details, click Save JWT auth settings to apply your configuration.

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 CrossmintProviders({ children }: { children: React.ReactNode }) {
    return (
        <YourAuthProvider>
            <CrossmintProvider apiKey="<crossmint-client-api-key>">
                <CrossmintWalletProvider>
                    createOnLogin={{
                        chain: "<your-chain>",
                    }}
                >
                {children}
                </CrossmintWalletProvider>
            </CrossmintProvider>
        </YourAuthProvider>
    );
}

Set the user in the auth provider.

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();

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

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.

5. After making your selection and providing any necessary details, click Save JWT auth settings to apply your configuration.

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.

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

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

type ProvidersProps = {
    children: React.ReactNode;
};

export default function CrossmintProviders({ children }: ProvidersProps) {
    const apiKey = process.env.EXPO_PUBLIC_CLIENT_CROSSMINT_API_KEY;

    if (apiKey == null) {
        throw new Error("EXPO_PUBLIC_CLIENT_CROSSMINT_API_KEY is not set");
    }

    return (
        <CrossmintProvider apiKey={apiKey}>
            <YourAuthProvider>
                <CrossmintWalletProvider createOnLogin={{
                    chain: "<your-chain>",
                }}>{children}</CrossmintWalletProvider>
            </YourAuthProvider>
        </CrossmintProvider>
    );
}

Set the user in the auth provider.

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

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

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