Integrate SocketFi Wallets into Your React Application

​

Prerequisites

• React 18 or later
• TypeScript (recommended)
• A SocketFi application and Client ID from the SocketFi Dashboard

​

Protected routes

import { Navigate } from "react-router-dom";
import { useAuth } from "../auth/context";
import { ReactNode } from "react";

export function ProtectedRoute({ children }: { children: ReactNode }) {
  const { loading, authenticated } = useAuth();

  if (loading) return <p>Loading…</p>;
  if (!authenticated) return <Navigate to="/login" replace />;

  return <>{children}</>;
}

​

Recommended project structure

src/
├── socketfi/
│   └── client.ts        # SocketFi instance
├── auth/
│   ├── context.ts        # Context type + useAuth hook
│   ├── provider.tsx      # AuthProvider component
│   └── hooks.ts          # useWalletAddress, useAccessToken
├── components/
│   ├── LoginButton.tsx
│   ├── WalletCard.tsx
│   └── ProtectedRoute.tsx
├── services/
│   └── token.ts          # requestTransaction wrappers
└── server/
    └── middleware/
        └── auth.ts        # verifyAuth middleware

​

Production tips

• Never trust client-side state alone. Always verify socketfiAccessToken with @socketfi/server before granting access to sensitive backend resources.
• Use localStorage for convenience, sessionStorage for stricter security. For highly sensitive applications, clear the session on tab close.
• Wrap every SDK call in try/catch. Users can cancel passkey prompts, network requests can time out, and contracts can revert.
• Show descriptive intent before transactions. Users should understand exactly what they are signing — display the recipient, amount, and contract clearly in your UI before calling requestTransaction.
• Monitor errors in production. Pipe onError events to your observability tool (Sentry, Datadog, etc.) so you catch auth failures and transaction errors before users report them.