SocketFi Integration Troubleshooting and Debugging Guide

// ✓ Correct — called from a click handler
const handleLogin = async () => {
  await socketfi.authenticate();
};

// ✗ Incorrect — called from useEffect
useEffect(() => {
  socketfi.authenticate(); // browser will block this
}, []);

# Check the value in your shell during dev
echo $VITE_SOCKETFI_CLIENT_ID

try {
  await socketfi.authenticate();
} catch (err) {
  if (err.code === "USER_CANCELLED") {
    // User closed the dialog — no action needed, or show "Try again"
    return;
  }
  // All other errors are real failures
  setError("Authentication failed. Please try again.");
}

// On login
const result = await socketfi.authenticate();
localStorage.setItem("socketfi_session", JSON.stringify(result));

// On startup (useEffect in AuthProvider)
const stored = localStorage.getItem("socketfi_session");
if (stored) setSession(JSON.parse(stored));

const response = await fetch("/api/me", { headers: authHeaders });
if (response.status === 401) {
  // Token expired — ask the user to sign in again
  logout();
  navigate("/login");
}

} catch (err) {
  if (err.code === "TRANSACTION_REJECTED" || err.code === "USER_CANCELLED") {
    setStatus({ type: "failed", message: "Transaction cancelled." });
    return; // Don't clear the form — let the user retry
  }
  setStatus({ type: "failed", message: err.message });
}

const queryClient = useQueryClient();

const result = await transactionService.sendTokens(...);
if (result.success) {
  queryClient.invalidateQueries({ queryKey: ["balance", walletAddress] });
}

Authorization: Bearer eyJhbGciOiJSUzI1NiIs...

const token = req.headers.authorization?.replace("Bearer ", "");
// token should be a JWT string, not an object
const result = await verifyAuth(token);

const response = await fetch("/api/me", { headers: authHeaders });
if (response.status === 401) {
  logout();
  navigate("/login");
}

// ✓ Correct — called directly from a click handler
<button onClick={() => socketfi.authenticate()}>Sign in</button>

// ✗ Incorrect — browser will block this
useEffect(() => { socketfi.authenticate(); }, []);

// app.ts
app.use("/api", authMiddleware, profileRoutes); // ✓ middleware before routes

import { clearKeyCache } from "@socketfi/server";

afterEach(() => {
  clearKeyCache();
});

import * as SecureStore from "expo-secure-store";

// Save
await SecureStore.setItemAsync("socketfi_session", JSON.stringify(session));

// Restore on startup
const stored = await SecureStore.getItemAsync("socketfi_session");
if (stored) setSession(JSON.parse(stored));