thirdwebDocs
GitHub

Get Started with Connect

Connect offers multiple ways to integrate wallet functionality in your application:

  • External Wallets - Connect to existing wallets like MetaMask, Coinbase Wallet, etc.
  • In-App Wallets - Create wallets with social/email login.
  • Ecosystem Wallets - Create wallets with social/email login that is shareable across various applications.

These methods can be used independently or together in the same application to provide the best experience for your users.

Get your Client ID

To use wallet features in your applications, you will need a client ID. Generate one for free at your thirdweb dashboard.

Your client ID authenticates your application with thirdweb's services and provides access to infrastructure like RPC endpoints, IPFS gateways, and wallet services.

Live Playground

Before diving into the implementation, check out our playground to see all the various capabilities of Connect:

Try the demo

Play around with various wallet connection options

Choose Your Framework/Language

Installation

Install the thirdweb SDK in your TypeScript project:

npm install thirdweb
# or
yarn add thirdweb
# or
pnpm add thirdweb

Set up the Client

First, create a client instance to connect with thirdweb services:

import { createThirdwebClient } from "thirdweb";
 
// For client-side applications:
const client = createThirdwebClient({
  clientId: "YOUR_CLIENT_ID", // Get from your thirdweb dashboard
});
 
// For server-side scripts (Never expose secret keys in client code):
// const client = createThirdwebClient({
//   secretKey: process.env.THIRDWEB_SECRET_KEY,
// });

Connect External Wallets

Enable users to connect their existing wallets:

import { createThirdwebClient, walletConnect } from "thirdweb";
 
// Create the client (do this once and reuse it)
const client = createThirdwebClient({
  clientId: "YOUR_CLIENT_ID",
});
 
// Connect WalletConnect
const wallet = walletConnect({
  projectId: "YOUR_WALLETCONNECT_PROJECT_ID", // Get from WalletConnect dashboard
});
 
// Connect the wallet
const walletInstance = await wallet.connect();
const address = await walletInstance.getAddress();
console.log("Connected to:", address);
 
// Read wallet balance
import { getWalletBalance, ethereum } from "thirdweb";
 
const balance = await getWalletBalance({
  client,
  chain: ethereum,
  address: walletInstance.getAddress(),
});
console.log(`Balance: ${balance.displayValue} ${balance.symbol}`);

Setup In-App Wallet

Create wallets with email or social login:

import { createThirdwebClient, embeddedWallet } from "thirdweb";
 
// Create the client (do this once and reuse it)
const client = createThirdwebClient({
  clientId: "YOUR_CLIENT_ID",
});
 
// Initialize embedded wallet
const wallet = embeddedWallet({
  client,
});
 
// Connect with email
const emailWallet = await wallet.connect({
  strategy: "email",
  email: "user@example.com",
});
 
// Connect with social login
const googleWallet = await wallet.connect({
  strategy: "google",
});

Setup Ecosystem Wallet

Create shareable wallets across multiple applications:

import { createThirdwebClient, ecosystemWallet } from "thirdweb";
 
// Create the client (do this once and reuse it)
const client = createThirdwebClient({
  clientId: "YOUR_CLIENT_ID",
});
 
// Initialize ecosystem wallet
const wallet = ecosystemWallet({
  client,
  ecosystemId: "YOUR_ECOSYSTEM_ID", // Get from your ecosystem dashboard
});
 
// Connect with email
const emailWallet = await wallet.connect({
  strategy: "email",
  email: "user@example.com",
});

Performance Considerations

Optimize your wallet implementation:

  • Create Client Once

    • Initialize the thirdweb client once and reuse it
    • Avoid recreating the client for each operation

  • Caching

    • Use built-in React query capabilities
    • Avoid polling or constant refetching
    • Implement proper state management

  • Lazy Loading

    • The SDK loads wallet connectors on demand
    • Modularity reduces bundle size
    • Only import what you need

Next Steps

After setting up wallet functionality, explore these advanced topics:

Explore Full SDK Documentation

For comprehensive guides on implementing the full thirdweb SDK, explore our language-specific documentation:

TypeScript

TypeScript

React

React

React

React Native

.NET

DotNet

Unity

Unity

Unreal Engine

Unreal Engine