> ## Documentation Index
> Fetch the complete documentation index at: https://daehan-base.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 설정

> React 애플리케이션에서 Base Account와 함께 Privy 설정하기

export const GithubRepoCard = ({title, githubUrl}) => {
  return <a href={githubUrl} target="_blank" rel="noopener noreferrer" className="mb-4 flex items-center rounded-lg bg-zinc-900 p-4 text-white transition-all hover:bg-zinc-800">
      <div className="flex w-full items-center gap-3">
        <svg height="24" width="24" className="flex-shrink-0 dark:fill-white" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <path fill="currentColor" fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
        </svg>

        <div className="flex min-w-0 flex-grow flex-col">
          <span className="truncate text-base font-medium">{title}</span>
          <span className="truncate text-xs text-zinc-400">{githubUrl}</span>
        </div>

        <svg className="h-5 w-5 flex-shrink-0 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </div>
    </a>;
};

원활한 사용자 인증과 지갑 관리를 위해 Base Account와 함께 Privy를 설정하는 방법을 알아보세요.

## 개요

[Privy](https://www.privy.io/)는 온체인 애플리케이션을 위한 사용자 인증 및 지갑 관리 솔루션을 제공합니다.
Base Account와 Privy를 통합하면 Base Account 사용자에 대한 접근을 유지하면서 모든 Privy 훅과 메서드를 사용할 수 있습니다.

### 달성할 내용

이 가이드를 마치면 다음을 할 수 있습니다:

* Base Account 지원으로 Privy 설정
* Base Account를 주요 인증 옵션으로 설정
* Privy의 React SDK에서 Base Account SDK에 접근

[Base Account Privy 템플릿](https://github.com/base/base-account-privy)으로 바로 시작할 수 있습니다.

<GithubRepoCard title="Base Account Privy 템플릿" githubUrl="https://github.com/base/base-account-privy" />

## 설치

### 1. 새 Next.js 프로젝트 생성

<CodeGroup>
  ```bash npm theme={null}
  npx create-next-app@latest base-account-privy
  cd base-account-privy
  ```

  ```bash yarn theme={null}
  yarn create next-app base-account-privy
  cd base-account-privy
  ```
</CodeGroup>

### 2. Base Account SDK 버전 오버라이드

최신 버전의 Base Account SDK에 접근하려면 package.json 파일에서 Privy가 고정한 버전을 오버라이드해야 합니다.

다음 명령어로 오버라이드할 수 있습니다:

<CodeGroup>
  ```bash npm theme={null}
  npm pkg set overrides.@base-org/account="latest"
  # 또는 package.json에 수동으로 추가:
  # "overrides": { "@base-org/account": "latest" }
  ```

  ```bash pnpm theme={null}
  # pnpm은 package.json에 수동으로 추가해야 합니다:
  # "pnpm": { "overrides": { "@base-org/account": "latest" } }
  ```

  ```bash yarn theme={null}
  # yarn은 resolutions를 사용합니다 - package.json에 수동으로 추가:
  # "resolutions": { "@base-org/account": "latest" }
  ```

  ```bash bun theme={null}
  # bun은 overrides를 지원합니다 - package.json에 수동으로 추가:
  # "overrides": { "@base-org/account": "latest" }
  ```
</CodeGroup>

특정 버전을 사용하려면 오버라이드에 버전을 추가하세요:

<CodeGroup>
  ```bash npm theme={null}
  npm pkg set overrides.@base-org/account="2.2.0"
  # 또는 package.json에 수동으로 추가:
  # "overrides": { "@base-org/account": "2.2.0" }
  ```

  ```bash pnpm theme={null}
  # pnpm은 package.json에 수동으로 추가해야 합니다:
  # "pnpm": { "overrides": { "@base-org/account": "2.2.0" } }
  ```

  ```bash yarn theme={null}
  # yarn은 resolutions를 사용합니다 - package.json에 수동으로 추가:
  # "resolutions": { "@base-org/account": "2.2.0" }
  ```

  ```bash bun theme={null}
  # bun은 overrides를 지원합니다 - package.json에 수동으로 추가:
  # "overrides": { "@base-org/account": "2.2.0" }
  ```
</CodeGroup>

<Tip>
  **새 프로젝트가 아닌 경우**

  오버라이드가 적용되도록 `node_modules`와 `package-lock.json`을 삭제하고 새로 설치해야 합니다.
</Tip>

### 3. 의존성 설치

원하는 패키지 매니저로 의존성을 설치합니다:

<CodeGroup>
  ```bash npm theme={null}
  npm install @privy-io/react-auth @privy-io/chains @privy-io/wagmi-connector wagmi viem @base-org/account-ui react-toastify
  ```

  ```bash pnpm theme={null}
  pnpm add @privy-io/react-auth @privy-io/chains @privy-io/wagmi-connector wagmi viem @base-org/account-ui react-toastify
  ```

  ```bash yarn theme={null}
  yarn add @privy-io/react-auth @privy-io/chains @privy-io/wagmi-connector wagmi viem @base-org/account-ui react-toastify
  ```

  ```bash bun theme={null}
  bun add @privy-io/react-auth @privy-io/chains @privy-io/wagmi-connector wagmi viem @base-org/account-ui react-toastify
  ```
</CodeGroup>

## 설정

### 1. 환경 변수 설정

프로젝트 루트에 `.env.local` 파일을 생성합니다:

```bash theme={null}
NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id
```

Privy App ID는 [Privy 대시보드](https://dashboard.privy.io/)에서 가져옵니다.

### 2. Privy 프로바이더 설정

Base Account를 기본 로그인 방법으로 하는 Privy 설정을 생성하고, `PrivyProvider`를 포함하도록 레이아웃을 업데이트합니다.

<CodeGroup>
  ```tsx 프로바이더 생성 (app/providers.tsx) expandable theme={null}
  "use client";

  import { PrivyProvider } from "@privy-io/react-auth";
  import { base } from "@privy-io/chains";

  export default function Providers({ children }: { children: React.ReactNode }) {
    return (
      <PrivyProvider
        appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID!}
        config={{
          appearance: {
            walletList: ['base_account'],
            showWalletLoginFirst: true
          },
          defaultChain: base,
        }}
      >
        {children}
      </PrivyProvider>
    );
  }
  ```

  ```tsx 레이아웃에 추가 (app/layout.tsx) expandable theme={null}
  import type { Metadata } from "next";
  import { Geist, Geist_Mono } from "next/font/google";
  import "./globals.css";
  import Providers from "./providers";

  const geistSans = Geist({
    variable: "--font-geist-sans",
    subsets: ["latin"],
  });

  const geistMono = Geist_Mono({
    variable: "--font-geist-mono",
    subsets: ["latin"],
  });

  export const metadata: Metadata = {
    title: "Privy Next 데모",
    description: "create next app으로 생성됨",
  };

  export default function RootLayout({
    children,
  }: Readonly<{
    children: React.ReactNode;
  }>) {
    return (
      <html lang="en">
        <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
          <Providers>{children}</Providers>
        </body>
      </html>
    );
  }
  ```
</CodeGroup>

## 사용법

### 1. 앱 페이지 업데이트

인증 플로우를 표시하도록 `app/page.tsx` 파일을 업데이트합니다:

```tsx app/page.tsx expandable theme={null}
"use client";

import { usePrivy } from "@privy-io/react-auth";
import { ToastContainer } from "react-toastify";

function Home() {
  const { ready, authenticated, logout, login } = usePrivy();
  if (!ready) {
    return <div>로딩 중...</div>;
  }

  return (
    <div className="bg-white md:max-h-[100vh] md:overflow-hidden">
      {authenticated ? (
        <section className="w-full flex flex-col md:flex-row md:h-[calc(100vh-60px)]">
          <div className="flex-grow overflow-y-auto h-full p-4 pl-8">
            <button className="button" onClick={logout}>로그아웃</button>
          </div>
        </section>
      ) : (
        <section className="w-full flex flex-row justify-center items-center h-[calc(100vh-60px)] relative bg-gradient-to-b from-blue-600 to-blue-700">
          <div className="z-10 flex flex-col items-center justify-center w-full h-full px-4">
          <div className="flex h-10 items-center justify-center rounded-[20px] border border-white/20 bg-white/10 backdrop-blur-sm px-6 text-lg text-white font-abc-favorit">
            Base × Privy 데모
          </div>
        <div className="text-center mt-4 text-white text-7xl font-medium font-abc-favorit leading-[81.60px]">
          Base 위에서 구축
        </div>
            <div className="text-center text-white/90 text-xl font-normal leading-loose mt-8 max-w-2xl">
              Privy의 인증과 네이티브 Base Account 지원으로 Base 위에서 구축을 시작하세요
            </div>
            <button
              className="bg-white text-black mt-15 w-full max-w-md rounded-full px-4 py-2 font-medium hover:bg-gray-50 transition-colors lg:px-8 lg:py-4 lg:text-xl"
              onClick={() => {
                login();
                setTimeout(() => {
                  (document.querySelector('input[type="email"]') as HTMLInputElement)?.focus();
                }, 150);
              }}
            >
              시작하기
            </button>
          </div>
        </section>
      )}
  
      <ToastContainer
        position="top-center"
        autoClose={5000}
        hideProgressBar
        newestOnTop={false}
        closeOnClick={false}
        rtl={false}
        pauseOnFocusLoss
        draggable={false}
        pauseOnHover
        limit={1}
        aria-label="Toast notifications"
        style={{ top: 58 }}
      />
    </div>
  );
}

export default Home;
```

### 2. 로컬에서 프로젝트 실행

완료되었습니다! 이제 로컬에서 프로젝트를 실행할 수 있습니다:

<CodeGroup>
  ```bash npm theme={null}
  npm run dev
  ```

  ```bash pnpm theme={null}
  pnpm dev
  ```

  ```bash yarn theme={null}
  yarn dev
  ```

  ```bash bun theme={null}
  bun dev
  ```
</CodeGroup>

다음과 같은 페이지가 표시됩니다:

<div style={{ display: 'flex', justifyContent: 'center'}}>
  <img src="https://mintcdn.com/daehan-base/pXKB1jCfk0doXahz/images/base-account/Privy-Base-Account.png?fit=max&auto=format&n=pXKB1jCfk0doXahz&q=85&s=43cc8710e210ea4aa6f2c5df77bd5946" alt="Base × Privy 데모" style={{ width: '600px', height: 'auto' }} width="963" height="681" data-path="images/base-account/Privy-Base-Account.png" />
</div>

### 3. Base Account SDK 인스턴스 가져오기 (선택사항)

`useBaseAccount` 훅을 사용하여 Privy에서 Base Account SDK에 접근할 수 있습니다.

```tsx SDK 인스턴스 가져오기 theme={null}
import { useBaseAccountSdk } from '@privy-io/react-auth';

const { baseAccountSdk } = useBaseAccountSdk();

const provider = baseAccountSdk.getProvider();

const addresses = await provider.request({method: 'wallet_connect'});

```