> **Can't find what you're looking for?** Use `search_docs` on the docs MCP server at `https://www.openfort.io/api/mcp` to find what you need.
>
> **Have feedback?** Use `submit_feedback` on the same MCP server.

# Quickstart React — Password recovery

This guide walks you through the React quickstart with **password recovery** enabled out of the box.

Prefer another recovery flow? Switch to the [automatic guide](https://www.openfort.io/docs/products/embedded-wallet/react) or the [passkey guide](https://www.openfort.io/docs/products/embedded-wallet/react/quickstart/passkey#choose-your-recovery-method).

## Install Openfort with the CLI

:::code-group
```sh [pnpm]
pnpm create openfort
```

```sh [npm]
npm create openfort
```

```sh [yarn]
yarn create openfort
```
:::

The **Openfort CLI** helps you set up a new project with all dependencies and configurations. You can select framework (Vite or Next.js), authentication providers, embedded wallet, and UI theming.

## Install manually (step by step)

::::steps
### Install dependencies

#### Ethereum

Install [@openfort/react](https://www.npmjs.com/package/@openfort/react) with wagmi, TanStack Query, and viem:

:::code-group
```sh [pnpm]
pnpm add @openfort/react wagmi viem@^2.52.2 @tanstack/react-query
```

```sh [npm]
npm install @openfort/react wagmi viem@^2.52.2 @tanstack/react-query
```

```sh [yarn]
yarn add @openfort/react wagmi viem@^2.52.2 @tanstack/react-query
```
:::

#### Solana

Install [@openfort/react](https://www.npmjs.com/package/@openfort/react) with [@solana/kit](https://www.npmjs.com/package/@solana/kit):

:::code-group
```sh [pnpm]
pnpm add @openfort/react @solana/kit@^6 @tanstack/react-query@^5.99.2
```

```sh [npm]
npm install @openfort/react @solana/kit@^6 @tanstack/react-query@^5.99.2
```

```sh [yarn]
yarn add @openfort/react @solana/kit@^6 @tanstack/react-query@^5.99.2
```
:::

### Get your Openfort API keys

In the [API keys](https://dashboard.openfort.io/api-keys) section of [Openfort dashboard](https://dashboard.openfort.io), you will find:

* **Publishable Key**: Safe to expose in client-side environment
* **Secret Key**: Must be kept secure and used only server-side

To generate non-custodial wallets:

1. Scroll to the Shield section and click **Create Shield keys**
2. **Store the encryption share** safely when it appears (you'll only see it once)
3. You'll receive:
   * **Shield Publishable Key**: Safe for client-side use
   * **Shield Secret Key**: Keep secure, server-side only

### Choose your recovery method

Decide which wallet recovery experience you want to ship:

* [Automatic recovery](https://www.openfort.io/docs/products/embedded-wallet/react) — no action from the user required.
* [Passkey recovery](https://www.openfort.io/docs/products/embedded-wallet/react/quickstart/passkey#choose-your-recovery-method) — biometric or device authentication with no backend endpoint.
* **Password recovery** — user sets their own password with no backend endpoint.

### Set up providers

#### Ethereum

Use `getDefaultConfig` from `@openfort/react/wagmi`, wrap with `WagmiProvider`, `QueryClientProvider`, and `OpenfortWagmiBridge`. More information on the wallet configuration can be found [here](https://www.openfort.io/docs/products/embedded-wallet/react/wallet).

:::info
If using Next.js, add `'use client'` at the top of the file.
:::

```tsx [Providers.tsx]
import React from "react";
import {
  AuthProvider,
  OpenfortProvider,
  RecoveryMethod,
} from "@openfort/react";
import { getDefaultConfig, OpenfortWagmiBridge } from "@openfort/react/wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider, createConfig } from "wagmi";
import { baseSepolia } from "viem/chains";

const config = createConfig(
  getDefaultConfig({
    appName: "Openfort Demo App",
    chains: [baseSepolia],
  })
);

const queryClient = new QueryClient();

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={config}>
        <OpenfortWagmiBridge>
          <OpenfortProvider
            publishableKey={"YOUR_OPENFORT_PUBLISHABLE_KEY"}
            walletConfig={{
              shieldPublishableKey: "YOUR_SHIELD_PUBLISHABLE_KEY",
              ethereum: { chainId: 84532 },
            }}
            uiConfig={{
              authProviders: [
                AuthProvider.EMAIL_OTP,
                AuthProvider.GUEST,
                AuthProvider.GOOGLE,
                AuthProvider.WALLET,
                // More: https://www.openfort.io/docs/products/embedded-wallet/react/auth
              ],
              walletRecovery: {
                defaultMethod: RecoveryMethod.PASSWORD,
              },
            }}
          >
            {children}
          </OpenfortProvider>
        </OpenfortWagmiBridge>
      </WagmiProvider>
    </QueryClientProvider>
  );
}
```

<details>
  <summary style={{ margin: '20px 0 12px 0', fontSize: 16, fontWeight: 500 }}>Need WalletConnect support?</summary>

  Add `walletConnectProjectId` to `getDefaultConfig`. Get a project ID from the [WalletConnect dashboard](https://cloud.reown.com/sign-in).
</details>

#### Solana

Use `OpenfortProvider` with `solana` in `walletConfig`. No Wagmi required. More information on the wallet configuration can be found [here](https://www.openfort.io/docs/products/embedded-wallet/react/wallet).

:::info
If using Next.js, add `'use client'` at the top of the file.
:::

```tsx [Providers.tsx]
import React from "react";
import {
  AuthProvider,
  ChainTypeEnum,
  OpenfortProvider,
  RecoveryMethod,
} from "@openfort/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <OpenfortProvider
      publishableKey={"YOUR_OPENFORT_PUBLISHABLE_KEY"}
      walletConfig={{
        shieldPublishableKey: "YOUR_SHIELD_PUBLISHABLE_KEY",
        chainType: ChainTypeEnum.SVM,
        solana: { cluster: "devnet" },
      }}
      uiConfig={{
        authProviders: [
          AuthProvider.EMAIL_OTP,
          AuthProvider.GUEST,
          AuthProvider.GOOGLE,
          // External wallets (WALLET) are not supported on Solana
          // More: https://www.openfort.io/docs/products/embedded-wallet/react/auth
        ],
        walletRecovery: {
          defaultMethod: RecoveryMethod.PASSWORD,
        },
      }}
    >
      {children}
    </OpenfortProvider>
  );
}
```

### You're good to go!

Once you've configured your app, wrap it in the `Providers` component and drop in Openfort UI elements where you need them.

```tsx [App.tsx]
import React from "react";
import { Providers } from "./Providers";
import { OpenfortButton } from "@openfort/react";

export default function App() {
  return (
    <Providers>
      {/* Your app content */}
      <OpenfortButton />
    </Providers>
  );
}
```
::::

## Next steps

Now that you've set up Openfort, you can explore more features and customization options:

* [UI Configuration](https://www.openfort.io/docs/products/embedded-wallet/react/ui)