# Setup Privy (optional)

{% hint style="success" %}
**You do not need a Privy account to ship social login.** By default, VeChain Kit routes Google, Apple, X, Discord, GitHub, TikTok, LINE, and the multi-provider "Continue with VeChain" button through VeChain's whitelabel cross-app popup at [`connect.vechain.org`](https://connect.vechain.org) — branded for VeChain, free, and the user keeps a single identity across every kit-integrated dApp.

Self-host Privy only if you need email / passkey / SMS login, additional OAuth providers, no popup, or branding-inside-your-dApp transaction prompts. See *Pros / Cons* at the bottom of this page.
{% endhint %}

If you have your own Privy app, you can pass an additional prop with your settings.

```javascript
import { VeChainKitProvider } from '@vechain/vechain-kit';

export default function App({ Component, pageProps }: AppProps) {
    return (
        <VeChainKitProvider
            privy={{
                appId: process.env.NEXT_PUBLIC_PRIVY_APP_ID!,
                clientId: process.env.NEXT_PUBLIC_PRIVY_CLIENT_ID!,
                loginMethods: ['google', 'twitter', 'sms', 'email'],
                appearance: {
                    walletList: ['metamask', 'rainbow'],
                    accentColor: '#696FFD',
                    loginMessage: 'Select a social media profile',
                    logo: 'https://i.ibb.co/ZHGmq3y/image-21.png',
                },
                embeddedWallets: {
                    createOnLogin: 'all-users',
                },
                allowPasskeyLinking: true,
            }}
            ...
            //other props
        >
            {children}
        </VeChainKitProvider>
    );
}
```

Go to[ privy.io](https://privy.io) and create an app. You will find the APP ID and the CLIENT ID in the **App Settings** tab.

For further information on how to implement Privy SDK please refer to their docs: <https://docs.privy.io/>

This project uses:

* [*@privy-io/react-auth*](https://www.npmjs.com/package/@privy-io/react-auth) for Privy connection type
* [*@privy-io/cross-app-connect*](https://www.npmjs.com/package/@privy-io/cross-app-connect) for ecosystem cross app connection

You can import privy from the kit as

```typescript
import { usePrivy } from "@vechain/vechain-kit";

const { user } = usePrivy();
```

{% hint style="warning" %}
If you setup your own Privy be sure to go over the recommended security settings provided by Privy:\
<https://docs.privy.io/guide/security/implementation/> and <https://docs.privy.io/guide/security/implementation/csp>
{% endhint %}

{% hint style="info" %}
**Pros of self hosting Privy:**

* No UI confirmations on user transactions (no popup window per signature)
* Allow your users to back up their keys and update security settings directly in your app
* Email / passkey / SMS login (these can't run via the whitelabel popup)
* Additional OAuth providers Privy supports but VeChain's whitelabel doesn't enable (LinkedIn, Spotify, …)
* Your dApp's branding throughout the login modal

**Cons:**

* Price (Privy pricing tiers)
* Responsibility to correctly secure your Privy account, since it contains access to users' wallet settings
* Users have their own wallet scoped to your dApp instead of a single VeChain-wide identity (cross-app linking still possible via ecosystem mode)
  {% endhint %}


---

# 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/setup-privy-optional.md?ask=<question>
```

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.
