> For the complete documentation index, see [llms.txt](https://docs.vechainkit.vechain.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vechainkit.vechain.org/quickstart/provider-configuration.md).
# Provider Configuration
This guide covers how to set up and configure the `VeChainKitProvider` in your application.
### Basic Setup
Wrap your app with the `VeChainKitProvider`:
```typescript
'use client';
import { VeChainKitProvider } from "@vechain/vechain-kit";
export function Providers({ children }) {
return (
{children}
);
}
```
### Next.js Configuration
For Next.js applications, dynamically import the provider to avoid SSR issues:
```typescript
import dynamic from 'next/dynamic';
const VeChainKitProvider = dynamic(
async () => (await import('@vechain/vechain-kit')).VeChainKitProvider,
{ ssr: false }
);
export function Providers({ children }) {
return (
{children}
);
}
```
### Complete Configuration Example
Here's a comprehensive example with all available options:
```typescript
'use client';
import { VeChainKitProvider } from "@vechain/vechain-kit";
export function VeChainKitProviderWrapper({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
### Configuration Options
#### Network Configuration
```typescript
network: {
type: "main" | "test" | "solo" // Select mainnet or testnet or solo
}
```
#### Fee Delegation
Configure transaction fee sponsorship:
```typescript
feeDelegation: {
delegatorUrl: string, // Fee delegation service URL
}
```
#### Login Methods
Configure available authentication methods with a flexible grid layout. Each entry pins a `method`, an optional `gridColumn` (1–4) controlling how many of the 4 columns the button spans, and an optional `isPrimary` flag that promotes the button to the recommended CTA (filled inverted surface + "recommended" green dot). If no entry sets `isPrimary`, the kit falls back to highlighting the first visible method. Only one button per grid is primary; `isPrimary` on the `more` footer link is ignored. The filled treatment currently supports `veworld`, `google`, `apple`, and `github`.
```typescript
loginMethods: [
// --- Wallets (drives @vechain/dapp-kit programmatically; kit owns the UI) ---
{ method: "veworld", gridColumn: 4, isPrimary: true }, // recommended CTA — filled, dot
{ method: "sync2", gridColumn: 4 },
{ method: "wallet-connect", gridColumn: 4 }, // triggers WC's own QR modal
// --- VeChain native ---
{ method: "vechain", gridColumn: 4 }, // VeChain cross-app social login
{ method: "ecosystem", gridColumn: 4 }, // x2earn ecosystem apps footer
// --- Social (routed through VeChain's whitelabel cross-app popup unless you pass `privy`) ---
{ method: "google", gridColumn: 4 }, // works without `privy` (cross-app intent)
{ method: "apple", gridColumn: 4 }, // works without `privy`
{ method: "twitter", gridColumn: 4 }, // works without `privy`
{ method: "discord", gridColumn: 4 }, // works without `privy`
{ method: "github", gridColumn: 4 }, // works without `privy`
{ method: "tiktok", gridColumn: 4 }, // works without `privy`
{ method: "line", gridColumn: 4 }, // works without `privy`
{ method: "email", gridColumn: 4 }, // requires your own `privy` (inline, no popup)
{ method: "passkey", gridColumn: 4 }, // requires your own `privy`
{ method: "sms", gridColumn: 4 }, // requires your own `privy`
{ method: "more", gridColumn: 4 }, // sub-view with overflow socials/wallets/ecosystem
// --- Legacy ---
{ method: "dappkit", gridColumn: 4 }, // Opens dapp-kit's native picker. Preserved for backwards compat.
]
```
**Defaults** (when `loginMethods` is omitted):
* With `privy`: `[veworld, google, apple, more]`
* Without `privy`: `[veworld, sync2, wallet-connect]`
**Gating**: granular wallet methods (`veworld`, `sync2`, `wallet-connect`) only render when their source is also in `dappKit.allowedWallets`.
For the full layout, theming and migration guide, see [Login Customization](/quickstart/login-customization.md).
#### Contract Address Overrides
Override default contract addresses for custom deployments on solo or testnet. Only the provided fields are overridden; the rest use the network defaults.
```typescript
contractAddresses: Partial // Any field from AppConfig can be overridden
```
This is useful when you deploy your own contract instances (e.g., B3TR, VOT3) and need the kit to use those addresses instead of the built-in defaults:
```typescript
{children}
```
To access the merged config (network defaults + your overrides) in your components, use the `useAppConfig` hook:
```typescript
import { useAppConfig } from '@vechain/vechain-kit';
function MyComponent() {
const config = useAppConfig();
console.log(config.b3trContractAddress); // Your overridden address
}
```
### Privy Integration (Optional)
Most social logins work without your own Privy account — the kit routes Google / Apple / X / Discord / GitHub / TikTok / LINE through VeChain's whitelabel cross-app popup automatically. Pass the `privy` prop only if you need email, passkey, SMS, additional OAuth providers, or want the login flow to render entirely inside your dApp instead of in a popup window.
To enable those flows with your own Privy account:
```typescript
{children}
```
### Ecosystem Apps Configuration
Customize which ecosystem apps appear in the login modal:
```typescript
{children}
```
### Best Practices
1. **Dynamic Import**: Always use dynamic import in Next.js to avoid SSR issues
2. **Environment Variables**: Store sensitive configuration in environment variables
3. **Fee Delegation**: Consider your fee delegation strategy based on user experience needs
4. **Login Methods**: Choose login methods that match your target audience
5. **Metadata**: Provide clear app metadata for wallet connection requests
### Next Steps
* Implement Authentication Methods
* Customize UI Theme
* Handle Wallet Interactions