Privy
How to integrate Privy as an external signer for Crossmint Smart Wallets
Overview
This guide shows how to integrate Privy as an external signer for Crossmint Smart Wallets. Users authenticate with Privy, and their Privy wallet serves as a signer for a Crossmint Smart Wallet.
Create an API Key
The first step for integrating Privy is to obtain a client-side API key.
Navigate to the "Integrate" section on the left navigation bar, and ensure you're on the "API Keys" tab.
Within the Client-side keys section, click the "Create new key" button in the top right.
On the authorized origins section, enter http://localhost:3000
and click "Add origin".
Next, check the scopes labeled wallets.create
, wallets.read
, users.create
.
Check the "JWT Auth" box.
Finally, create your key and save it for subsequent steps.
Configure Privy for your API Key
After the key is generated, you need to set it to accept Privy auth tokens for authorization.
- Go to the Privy dashboard at https://dashboard.privy.io/
- Select an existing project or create a new one
When you’re ready to move to production/mainnet with Privy, you will need to complete the “Upgrade to production” steps in the Privy dashboard (Settings > Basic > Application state).
- Select the “Settings” link from left-hand navigation to find your Privy App ID.
- Copy the Privy App ID and return to the Crossmint developer console
- Within the JWT authentication section, select “3P Auth providers” option, and then select Privy
- Add your App ID and click the “Save JWT auth settings” button
Install Required Dependencies
Install the Crossmint React UI SDK and shadcn UI components:
Then, set up shadcn UI components:
Install the button and card components:
Configure Environment Variables
Add your Crossmint client-side API key and Privy App ID to your environment file:
Create the Provider Components
First, create a CrossmintPrivyProvider component that will wrap your application:
Now create a custom hook that connects Privy with Crossmint:
Update Your Layout
Update your app’s layout to use the CrossmintPrivyProvider:
Create UI Components
Create a component that uses the Privy connector and displays wallet information:
Create Your Main Page
Create your main page that uses the WalletCard component:
Launch and Test
- Start your development server:
- Visit http://localhost:3000 in your browser
- Click the “Log In with Privy” button to start the authentication flow
- Follow the prompts to authenticate using Privy
- Once logged in, you should see both your Privy embedded wallet address and your Crossmint Smart Wallet address
How It Works
The integration between Privy and Crossmint involves these key components:
-
Wallet Integration Flow:
- User logs in using Privy’s authentication
- Privy creates a wallet for the user
- The Crossmint SDK uses the JWT from Privy to authenticate with Crossmint
-
Wallet Creation:
- The
usePrivyConnector
hook finds the Privy wallet - It retrieves the Ethereum provider from the Privy wallet to use as a signer
- It creates a Crossmint Smart Wallet using the Privy wallet as the signer
- The
-
Key Benefits:
- Users leverage their existing Privy authentication
- No new key management required
- The Privy wallet serves as a signer for the Crossmint Smart Wallet
- Cross-chain support through Crossmint’s infrastructure (EVM now, Solana coming soon)
Understanding Wallet Relationships
Understanding Wallet Relationships
- Privy Embedded Wallet: The primary signer that controls the Crossmint Smart Wallet
- Crossmint Smart Wallet: A fully-featured EVM wallet with gas sponsorship capabilities
- The user authenticates with Privy, but gains access to Crossmint’s advanced wallet infrastructure
Handling JWT Authentication
Handling JWT Authentication
The integration relies on JWT tokens for secure authentication:
- Privy issues a JWT token upon user authentication
- The Crossmint SDK uses this JWT to authenticate the user with Crossmint
- The JWT handling is abstracted away in the
useCrossmint
hook - Tokens are automatically refreshed as needed
Best Practices
Best Practices
- Always handle authentication state properly (loading, error states)
- Initialize wallet providers at the root of your application
- Use environment variables for sensitive keys and IDs
- Consider implementing error boundaries to gracefully handle authentication failures
- Test the integration thoroughly across different browsers and devices
Learn More
For more information on working with Crossmint Smart Wallets, check out these resources: