Notre avis
Ce skill permet de configurer et d'utiliser le SDK Thirdweb v5 pour la connexion de portefeuilles, l'authentification sociale, l'authentification SIWE et la mise en place du fournisseur Thirdweb dans une application.
Points forts
- Gère correctement les imports sous-chemin de Thirdweb v5
- Intègre l'authentification SIWE avec génération de JWT
- Facilite la configuration des portefeuilles comme inAppWallet et MetaMask
Limites
- Nécessite des variables d'environnement spécifiques (client ID, secret key, etc.)
- Ciblé uniquement sur le réseau Celo (chain ID 42220)
Utilisez ce skill lorsque vous devez intégrer Thirdweb v5 pour la connexion de portefeuilles, l'authentification sociale ou SIWE dans une application web.
Évitez ce skill si vous utilisez une version antérieure de Thirdweb ou si vous n'avez pas besoin d'authentification ou de connexion de portefeuille.
Analyse de sécurité
SûrThe skill provides safe guidance on using the thirdweb SDK, including proper import paths, environment variable setup, and authentication flows. There are no instructions that could lead to code execution, data exfiltration, or system damage.
Aucun point d'attention détecté
Exemples
Set up Thirdweb v5 with wallet connection including inAppWallet for email and social login, MetaMask, and Coinbase wallets. Use the correct sub-path imports and configure the provider stack with QueryClientProvider.Implement SIWE authentication using Thirdweb v5. Create an admin account from private key, set up createAuth, and generate payload, verify, and create JWT. Use the provided environment variables for client and secret key.Use Thirdweb v5 to connect a wallet with social login options like Google and Apple. Use the useConnect hook and configure inAppWallet with auth options.name: thirdweb description: 'Thirdweb v5 SDK usage in AutoClaw. Use when working with wallet connection, social login, SIWE authentication, or thirdweb client/provider setup. Triggers on: "thirdweb", "wallet connect", "inAppWallet", "social login", "SIWE", "ConnectButton", "thirdweb auth", "thirdweb provider".'
Critical: Thirdweb v5 Sub-Path Imports
Thirdweb v5 uses sub-path imports. Never import from the root thirdweb package for specialized modules:
// CORRECT
import { createThirdwebClient } from 'thirdweb';
import { inAppWallet, createWallet } from 'thirdweb/wallets';
import { darkTheme } from 'thirdweb/react';
import { createAuth } from 'thirdweb/auth';
import { privateKeyToAccount } from 'thirdweb/wallets';
// WRONG — do not import wallet/auth/react from root
import { inAppWallet } from 'thirdweb'; // ❌
Project Setup
Client (Web — apps/web/src/lib/thirdweb.ts)
import { createThirdwebClient } from 'thirdweb';
export const client = createThirdwebClient({
clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID!,
});
Client (API — apps/api/src/lib/thirdweb.ts)
import { createThirdwebClient } from 'thirdweb';
export const thirdwebClient = createThirdwebClient({
secretKey: process.env.THIRDWEB_SECRET_KEY,
});
Wallets Configuration
import { inAppWallet, createWallet } from 'thirdweb/wallets';
export const wallets = [
inAppWallet({
auth: { options: ['email', 'google', 'apple', 'passkey'] },
}),
createWallet('io.metamask'),
createWallet('com.coinbase.wallet'),
createWallet('walletConnect'),
];
SIWE Auth (Server-Side)
import { createAuth } from 'thirdweb/auth';
import { privateKeyToAccount } from 'thirdweb/wallets';
const adminAccount = privateKeyToAccount({
client: thirdwebClient,
privateKey: process.env.THIRDWEB_ADMIN_PRIVATE_KEY as `0x${string}`,
});
export const thirdwebAuth = createAuth({
domain: process.env.AUTH_DOMAIN,
client: thirdwebClient,
adminAccount,
});
Auth flow: thirdwebAuth.generatePayload() → client signs → thirdwebAuth.verifyPayload() → JWT via thirdwebAuth.generateJWT().
Provider Stack (Web)
Wrap app with QueryClientProvider (from @tanstack/react-query) + ThirdwebProvider:
import { ThirdwebProvider } from 'thirdweb/react';
<QueryClientProvider client={queryClient}>
<ThirdwebProvider>{children}</ThirdwebProvider>
</QueryClientProvider>
Theme
This project uses darkTheme() from thirdweb/react with custom indigo accent colors. See apps/web/src/lib/thirdweb.ts for the full theme config.
Environment Variables
| Variable | Location | Description |
|---|---|---|
| NEXT_PUBLIC_THIRDWEB_CLIENT_ID | Web | Public client ID |
| THIRDWEB_SECRET_KEY | API | Server-side secret key |
| THIRDWEB_ADMIN_PRIVATE_KEY | API | Admin wallet for SIWE signing |
| AUTH_DOMAIN | API | SIWE auth domain |
Key Hooks
useActiveAccount()— Get connected wallet accountuseActiveWallet()— Get connected wallet instanceuseConnect()— Connect a wallet programmaticallyuseDisconnect()— Disconnect current wallet
Chain Configuration
This project targets Celo mainnet (chain ID 42220). When using ConnectButton, set chain={celo} from thirdweb/chains.
Expert Next.js App Router
Developpement
Un skill qui transforme Claude en expert Next.js App Router.
Générateur de README
Developpement
Crée des README.md professionnels et complets pour vos projets.
Rédacteur de Documentation API
Developpement
Génère de la documentation API complète au format OpenAPI/Swagger.