The modal implements a dynamic grid layout system that can be customized through the loginMethods configuration.
The modal can be configured through the VeChainKitProvider props.
<VeChainKitProvider
loginModalUI={{
logo: '/your-logo.png',
description: 'Custom login description',
}}
loginMethods={[
{ method: 'vechain', gridColumn: 4 },
{ method: 'dappkit', gridColumn: 4 }, // VeChain wallets, always available
{ method: 'ecosystem', gridColumn: 4 }, // Mugshot, Cleanify, Greencart, ...
{ method: 'email', gridColumn: 2 }, // only available with your own Privy
{ method: 'passkey', gridColumn: 2 }, // only available with your own Privy
{ method: 'google', gridColumn: 4 }, // only available with your own Privy
{ method: 'more', gridColumn: 2 }, // will open your own Privy login, only available with your own Privy
]}
allowCustomTokens={false} // allow the user to manage custom tokens
>
{children}
</VeChainKitProvider>
Login methods selection:
vechain, dappkit, and ecosystem are always available options
The Privy-dependent methods (email, google, passkey, more) are only available when the privy prop is defined
TypeScript will show an error if someone tries to use a Privy-dependent method when privy is not configured
// This will show a type error
const invalidConfig: VechainKitProviderProps = {
// no privy prop specified
loginMethods: [
{ method: 'email' } // ❌ Type error: 'email' is not assignable to type 'never'
],
// ... other required props
};
// This is valid
const validConfig1: VechainKitProviderProps = {
// no privy prop
loginMethods: [
{ method: 'vechain' }, // ✅ OK
{ method: 'dappkit' }, // ✅ OK
{ method: 'ecosystem' } // ✅ OK
],
// ... other required props
};
// This is also valid
const validConfig2: VechainKitProviderProps = {
privy: {
appId: 'xxx',
clientId: 'yyy',
// ... other privy props
},
loginMethods: [
{ method: 'email' }, // ✅ OK because privy is configured
{ method: 'google' }, // ✅ OK because privy is configured
{ method: 'vechain' }, // ✅ OK (always allowed)
{ method: 'ecosystem' } // ✅ OK (always allowed)
],
// ... other required props
};
By default we have a list of default apps that will be shown as ecosystem login options. If you want to customize this list you can pass the allowedApps array prop. You can find the app ids in the Ecosystem tab in the Privy dashboard.
3) Setup Fee Delegation (mandatory if allowing social login)
Fee delegation is mandatory if you want to use this kit with social login. Learn how to setup fee delegation in the following guide:
4) Setup Privy (optional)
If you have your own Privy app, you can pass an additional prop with your settings.
Allow your users to backup their keys and update security settings directly in your app
Targetted social login methods
Cons:
Price
Responsibilities to correctly secure your Privy account, since it contains access to user's wallet settings
Your users will need to login into other apps through ecosystem mode
5) Show the login button
Once you set up the kit provider, you are good to go, and you can allow your users to login, customizing the login experience based on your needs.
Option 1: Use the WalletButton component
You can use this component by importing it from the kit, it will handle for you the connection state and show a login button if the user is disconnected or the profile button when the user is connected.
'use client';
import { WalletButton } from '@vechain/vechain-kit';
export function Page() {
return (
<WalletButton />
);
}
Read more here on how to customize this button here.
Option 2: create your own custom button
Alternatively, you can create your own custom button and invoke the connect modal or account modal based on your needs.
