# 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
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.vechainkit.vechain.org/quickstart/provider-configuration.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.