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

# Privy

> Learn how to integrate Abstract Global Wallet into an existing Privy application

[Privy](https://docs.privy.io/guide/react/quickstart) powers the login screen and
[EOA creation](/abstract-global-wallet/architecture#eoa-creation)
of Abstract Global Wallet, meaning you can use Privy’s features and SDKs natively alongside AGW.

The `agw-react` package provides an `AbstractPrivyProvider` component,
which wraps your application with the [PrivyProvider](https://docs.privy.io/reference/sdk/react-auth/functions/PrivyProvider)
as well as the Wagmi and TanStack Query providers; allowing you to use the features of each library with Abstract Global Wallet.

<Card title="AGW + Privy Example Repo" icon="github" href="https://github.com/Abstract-Foundation/examples/tree/main/agw-privy-nextjs">
  Use our example repo to quickly get started with AGW and Privy.
</Card>

## Installation

Install the required dependencies:

<CodeGroup>
  ```bash npm theme={null}
  npm install @abstract-foundation/agw-react @abstract-foundation/agw-client wagmi viem @tanstack/react-query
  ```

  ```bash yarn theme={null}
  yarn add @abstract-foundation/agw-react @abstract-foundation/agw-client wagmi viem @tanstack/react-query
  ```

  ```bash pnpm theme={null}
  pnpm add @abstract-foundation/agw-react @abstract-foundation/agw-client wagmi viem @tanstack/react-query
  ```

  ```bash bun theme={null}
  bun add @abstract-foundation/agw-react @abstract-foundation/agw-client wagmi viem @tanstack/react-query
  ```
</CodeGroup>

## Usage

This section assumes you have already created an app on the [Privy dashboard](https://docs.privy.io/guide/react/quickstart).

### 1. Enable Abstract Integration

From the [Privy dashboard](https://dashboard.privy.io/),
navigate to **Ecosystem** > **Integrations**.

Scroll down to find **Abstract** and toggle the switch to enable the integration.

<img src="https://mintcdn.com/abstract/jrt2MBQQLuqZic7X/images/privy-integration.png?fit=max&auto=format&n=jrt2MBQQLuqZic7X&q=85&s=4c355c120deb8deb4b0bd78913e040a6" alt="Privy Integration from Dashboard - enable Abstract" width="981" height="158" data-path="images/privy-integration.png" />

### 2. Configure the AbstractPrivyProvider

Wrap your application in the `AbstractPrivyProvider` component, providing your
<Tooltip tip="Available from the Settings tab of the Privy dashboard.">Privy app ID</Tooltip>
as the `appId` prop.

```tsx {1,5,7} theme={null}
import { AbstractPrivyProvider } from "@abstract-foundation/agw-react/privy";

const App = () => {
  return (
    <AbstractPrivyProvider appId="your-privy-app-id">
      {children}
    </AbstractPrivyProvider>
  );
};
```

<Tip>
  **Next.js App Router:** If you are using [Next.js App
  Router](https://nextjs.org/docs), create a new component and add the `use
      client` directive at the top of your file ([see
  example](https://github.com/Abstract-Foundation/examples/blob/main/agw-privy-nextjs/src/components/NextAbstractWalletProvider.tsx))
  and wrap your application in this component.
</Tip>

### 3. Login users

Use the `useAbstractPrivyLogin` hook to prompt users to login with Abstract Global Wallet.

```tsx theme={null}
import { useAbstractPrivyLogin } from "@abstract-foundation/agw-react/privy";

const LoginButton = () => {
  const { login, link } = useAbstractPrivyLogin();
  return <button onClick={login}>Login with Abstract</button>;
};
```

* The `login` function uses Privy's [loginWithCrossAppAccount](https://docs.privy.io/guide/react/cross-app/requester#login)
  function to authenticate users with their Abstract Global Wallet account.

* The `link` function uses Privy's [linkCrossAppAccount](https://docs.privy.io/guide/react/cross-app/requester#linking)
  function to allow authenticated users to link their existing account to an Abstract Global Wallet.

### 4. Use hooks and functions

Once the user has signed in, you can begin to use any of the `agw-react` hooks,
such as [useWriteContractSponsored](/abstract-global-wallet/agw-react/hooks/useWriteContractSponsored)
as well as all of the existing [wagmi hooks](https://wagmi.sh/react/api/hooks); such as [useAccount](https://wagmi.sh/react/api/hooks/useAccount),
[useBalance](https://wagmi.sh/react/api/hooks/useBalance), etc.

All transactions will be sent from the connected AGW smart contract wallet (i.e. the `tx.from` address will be the AGW smart contract wallet address).

```tsx theme={null}
import { useAccount, useSendTransaction } from "wagmi";

export default function Example() {
  const { address, status } = useAccount();
  const { sendTransaction, isPending } = useSendTransaction();

  return (
    <button
      onClick={() =>
        sendTransaction({
          to: "0x273B3527BF5b607dE86F504fED49e1582dD2a1C6",
          data: "0x69",
        })
      }
      disabled={isPending || status !== "connected"}
    >
      {isPending ? "Sending..." : "Send Transaction"}
    </button>
  );
}
```