> For the complete documentation index, see [llms.txt](https://city-protocol.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://city-protocol.gitbook.io/docs/software-development-kit/wallet/react-setup.md).

# React Setup

#### Wrap Your App

`PrivyProvider` must sit at the root of your component tree. It initialises the Privy session, manages login state, and optionally creates an embedded wallet for users who do not bring their own.

```
import { PrivyProvider } from "@privy-io/react-auth";
import React from "react";
import ReactDOM from "react-dom/client";

import { App } from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <PrivyProvider
    appId={import.meta.env.VITE_PRIVY_APP_ID}
    config={{
      loginMethods: ["wallet"],
      embeddedWallets: {
        createOnLogin: "users-without-wallets",
      },
    }}
  >
    <App />
  </PrivyProvider>,
);
```

#### **Config notes:**

* `loginMethods: ["wallet"]` restricts the UI to wallet-based auth. Add `"email"`, `"sms"`, or `"google"` to the array if your product supports other entry points.
* `createOnLogin: "users-without-wallets"` tells Privy to spin up an embedded wallet automatically when a user has no external wallet. Set to `"off"` if every user is expected to connect their own.