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

# SocketFi React SDK — Embedded Smart Wallet Overview

> Add passkey-powered embedded smart wallets to any React app with a single SDK — no extensions, no seed phrases, no blockchain knowledge required.

The SocketFi React SDK gives you everything you need to embed a passkey-secured smart wallet directly into your React application. Authentication, transaction approval, and Soroban contract reads all happen through hosted popup flows that your users can complete in seconds — without installing a browser extension or touching a seed phrase.

## What's included

<CardGroup cols={2}>
  <Card title="Embedded Wallet Auth" icon="wallet">
    Resolve or create a Stellar smart wallet for every user automatically during the authentication flow.
  </Card>

  <Card title="Passkey Sign-In & Sign-Up" icon="fingerprint">
    Let users authenticate with a device passkey. The SDK handles both new and returning users with the same `authenticate()` call.
  </Card>

  <Card title="Transaction Approval" icon="circle-check">
    Open a hosted approval popup so users can review and sign Soroban contract writes without leaving your app.
  </Card>

  <Card title="Soroban Contract Reads" icon="magnifying-glass">
    Query on-chain contract state in a single `readContract()` call — no approval popup required.
  </Card>
</CardGroup>

## Requirements

Before integrating the SDK, make sure your environment meets the following requirements.

| Requirement     | Details                                          |
| --------------- | ------------------------------------------------ |
| React           | 18 or later                                      |
| Build tool      | Vite or Next.js                                  |
| Language        | TypeScript (strongly recommended)                |
| Browser support | Any modern browser with WebAuthn/passkey support |
| Production      | HTTPS required (passkeys need a secure context)  |

<Note>
  During local development you can use `localhost`, which browsers treat as a secure context. You only need HTTPS once you deploy to a real domain.
</Note>

## Quick start

The snippet below shows a complete, minimal integration — initialize the client, authenticate the user, and send a transaction.

```typescript theme={null}
import { SocketFi } from "@socketfi/react";
import { useState } from "react";

const socketfi = new SocketFi({
  clientId: import.meta.env.VITE_SOCKETFI_CLIENT_ID,
  network: "TESTNET",
  brand: {
    appName: "My App",
    primaryColor: "#4F46E5",
  },
});

export default function App() {
  const [session, setSession] = useState<{
    userProfile: { id: string };
    socketfiAccessToken: string;
  } | null>(null);

  async function handleLogin() {
    try {
      const result = await socketfi.authenticate();
      setSession(result);
    } catch (error) {
      console.error("Authentication failed:", error);
    }
  }

  async function handleTransfer() {
    try {
      const result = await socketfi.requestTransaction({
        contractId: "CBXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        method: "transfer",
        args: [
          "AAAA...", // recipient address as XDR
          "AAAA...", // amount as XDR i128
        ],
      });
      console.log("Transaction hash:", result.transactionHash);
    } catch (error) {
      console.error("Transaction failed:", error);
    }
  }

  return (
    <main>
      {!session ? (
        <button onClick={handleLogin}>Continue with SocketFi</button>
      ) : (
        <>
          <p>Signed in as {session.userProfile.id}</p>
          <button onClick={handleTransfer}>Send Transfer</button>
        </>
      )}
    </main>
  );
}
```

<Tip>
  Create one shared `socketfi` instance at the module level and import it wherever you need it. Avoid constructing multiple instances inside React components.
</Tip>

## Next steps

Ready to add SocketFi to your project? Head to the installation guide to install the package, configure your environment variables, and initialize the client.

<CardGroup cols={1}>
  <Card title="Install the React SDK" icon="arrow-right" href="/sdk/react/installation">
    Install `@socketfi/react`, set up environment variables, and configure your SocketFi client.
  </Card>
</CardGroup>