Bring Your Own Auth

Bring your own auth to your wallet

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

React

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.

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

   
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.

   next.js

   "use client";
   
   import {
       CrossmintProvider,
       CrossmintWalletProvider,
       useCrossmint,
   } from "@crossmint/client-sdk-react-ui";
   
   import { YourAuthProvider } from "@your-auth-provider";
   
   // Get the JWT from your auth provider and pass it to the Crossmint provider
   const { jwt } = useYourAuthProviderHook();
   const { setJwt } = useCrossmint();
   
   useEffect(() => {
       setJwt(jwt);
   }, [jwt]);
   
   export function Providers({ children }: { children: React.ReactNode }) {
       return (
           <YourAuthProvider>
               <CrossmintProvider apiKey="<crossmint-client-api-key>">
                   <CrossmintWalletProvider>
                       {children}
                   </CrossmintWalletProvider>
               </CrossmintProvider>
           </YourAuthProvider>
       );
   }
   

   Configuring the Wallet Provider

   callbacks · object

   A set of callbacks to be called when the wallet is created or a transaction is initiated.

   Show properties

   onWalletCreationStart · function

   A function to be called before the wallet is created onchain.

   onTransactionStart · function

   A function to be called before the transaction is signed.

   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.

   Show properties

   spacingUnit · string

   The spacing unit to use for the modal.

   borderRadius · string

   The border radius to use for the modal.

   colors · object

   The colors to use for the modal.

   Show properties

   inputBackground · string

   The background color of the input.

   buttonBackground · string

   The background color of the button.

   border · string

   The border color of the modal.

   background · string

   The background color of the modal.

   textPrimary · string

   The primary text color of the modal.

   textSecondary · string

   The secondary text color of the modal.

   textLink · string

   The link text color of the modal.

   danger · string

   The danger color of the modal.

   accent · string

   The accent color of the modal.

3. Passthrough the jwt information to the Crossmint provider

   Create the wallet on login once the jwt and the email are available.

   next.js

   "use client";
   
   import { useYourAuthProviderHook } from "@your-auth-provider";
   import { useEffect } from "react";
   import { useCrossmint, useWallet } from "@crossmint/client-sdk-react-ui";
   
   export function YourComponent() {
       const { email } = useYourAuthProviderHook();
       const { jwt } = useCrossmint();
       const { getOrCreateWallet } = useWallet();
   
       useEffect(() => {
           if (email != null && jwt != null) {
               getOrCreateWallet({ signer: { type: "email", email: email } });
           }
       }, [email, jwt]);
   
       // your component logic here
       return (
           <div>
               <h1>Your Component</h1>
           </div>
       );
   }