> ## Documentation Index
> Fetch the complete documentation index at: https://docs.spark.money/llms.txt
> Use this file to discover all available pages before exploring further.

# Privy

> Add embedded wallets and social login to your Spark app with Privy.

export const Button = ({href, children, className = "", target = "_self", outline}) => {
  return <a href={href} target={target} rel="noopener noreferrer" className={`not-prose inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium rounded-xl transition-colors duration-200 ${outline ? "spark-button-outline" : "spark-button"} ${className}`}>
      {children}
    </a>;
};

export const HCard = ({icon, light, dark, href, title, description, target = "_self"}) => {
  return <div className="spark-card rounded-2xl flex justify-center items-center p-4 hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="hcard-row" style={{
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: '1rem'
  }}>
          <div className="hcard-icon" style={{
    flexShrink: 0,
    width: '40px',
    height: '40px'
  }}>
            {light && dark ? <>
                <img src={light} className="icon-light pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />
                <img src={dark} className="icon-dark pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />
              </> : <img src={icon} className="pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />}
          </div>
          <div className="hcard-text" style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '0.5rem'
  }}>
            <h2 className="card-title text font-semibold leading-none" style={{
    margin: 0
  }}>
              {title}
            </h2>
            <p className="card-description text-sm leading-none" style={{
    margin: 0
  }}>
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

export const VCard = ({img, light, dark, icon, href, title, description, target = "_self"}) => {
  return <div className="spark-card overflow-hidden rounded-2xl flex justify-center items-center hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="vcard-col">
          <div className="vcard-image w-full aspect-video relative">
            {light && dark ? <>
                <img src={light} alt={title} className="icon-light w-full h-full object-cover pointer-events-none" />
                <img src={dark} alt={title} className="icon-dark w-full h-full object-cover pointer-events-none" />
              </> : <div className="w-full h-full bg-cover bg-center bg-no-repeat" style={{
    backgroundImage: `url(${img})`
  }} />}
          </div>
          <div className="vcard-content flex flex-col gap-2 p-6">
            <h2 className="card-title text font-semibold leading-none">
              {title}
            </h2>
            <p className="card-description text-sm leading-tight">
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

export const Card = ({icon, iconLight, iconDark, href, title, description, target = "_self"}) => {
  return <div className="spark-card rounded-2xl flex justify-center p-4 hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="flex flex-col gap-12 justify-space-between">
          <div className="w-8 h-8">
            {iconLight && iconDark ? <>
                <img src={iconLight} className="icon-light w-full h-full pointer-events-none" alt={title} width={32} height={32} />
                <img src={iconDark} className="icon-dark w-full h-full pointer-events-none" alt={title} width={32} height={32} />
              </> : <img src={icon} className="w-full h-full pointer-events-none" alt={title} width={32} height={32} />}
          </div>
          <div className="flex flex-col gap-2">
            <h2 className="card-title text font-semibold leading-tight">
              {title}
            </h2>
            <p className="card-description text-sm leading-tight">
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

<Frame className="chill">
  <img src="https://mintcdn.com/lightspark/1qhg2-dutO4_dxVH/images/integrations/privy.png?fit=max&auto=format&n=1qhg2-dutO4_dxVH&q=85&s=b458715619d9ea71618ae933cab5d732" alt="Privy" width="1920" height="1081" data-path="images/integrations/privy.png" />
</Frame>

Integrate Privy for seamless authentication and wallet management in your Spark applications. Privy provides a complete authentication and wallet management solution for Web3 applications, making it easy to onboard users and manage their digital identities on Spark.

<Button href="https://privy.io" outline target="_blank">
  Learn more ->
</Button>

<br />

***

## Use Cases

<Columns cols="3" className="gap-4 chill">
  <Card title="Embedded Wallets" iconDark="/icons/icon-wallet-white.svg" iconLight="/icons/icon-wallet-black.svg" href="/quickstart/create-wallet" description="Create wallets without external wallet extensions" />

  <Card title="User Onboarding" iconDark="/icons/icon-users-white.svg" iconLight="/icons/icon-users-black.svg" href="/quickstart/create-wallet" description="Streamline the user registration process" />

  <Card title="Social Authentication" iconDark="/icons/icon-verified-white.svg" iconLight="/icons/icon-verified-black.svg" href="/wallets/overview" description="Let users login with social accounts" />
</Columns>

***

## Quick Integration

### Installation

Install the Privy React SDK using your package manager of choice:

<CodeGroup>
  ```bash npm theme={null}
  npm install @privy-io/react-auth@latest
  ```

  ```bash pnpm theme={null}
  pnpm install @privy-io/react-auth@latest
  ```

  ```bash yarn theme={null}
  yarn add @privy-io/react-auth@latest
  ```
</CodeGroup>

### Setup

```typescript App.tsx theme={null}
'use client';

import {PrivyProvider} from '@privy-io/react-auth';

export default function Providers({children}: {children: React.ReactNode}) {
  return (
    <PrivyProvider
      appId="your-privy-app-id"
      clientId="your-app-client-id"
      config={{
        // Create embedded wallets for users who don't have a wallet
        embeddedWallets: {
          ethereum: {
            createOnLogin: 'users-without-wallets'
          }
        }
      }}
    >
      {children}
    </PrivyProvider>
  );
}
```

<br />

***

## Documentation

<Columns cols="1">
  <HCard title="Privy Official Docs" icon="/icons/icon-app-privy.svg" description="Official documentation for Privy" href="https://docs.privy.io/" target="_blank" />
</Columns>