> ## Documentation Index > Fetch the complete documentation index at: https://docs.crefy.xyz/llms.txt > Use this file to discover all available pages before exploring further. # Development > Build applications with Crefy Connect # Developing with Crefy Connect Learn how to build applications with Crefy Connect and integrate wallet functionality into your projects. ## Prerequisites **Requirements**: * Node.js version 16 or higher * npm, yarn, pnpm, or bun package manager * React 16.8+ (for hooks support) * A Crefy Connect App ID from the [Dashboard](https://connect.crefy.xyz) ## Setting Up Your Development Environment ```bash theme={null} npm install crefy-connect ``` Visit the [Crefy Connect Dashboard](https://connect.crefy.xyz) and create a new application to get your App ID. Wrap your app with `CrefyConnectProvider`: ```tsx theme={null} import { CrefyConnectProvider } from "crefy-connect"; ``` ## Development Patterns ### Protected Routes ```tsx theme={null} import { useCrefy } from "crefy-connect"; function ProtectedRoute({ children }) { const { isAuthenticated } = useCrefy(); if (!isAuthenticated) { return
Please log in to access this page.
; } return <>{children}; } ``` ### Conditional Rendering Based on Auth ```tsx theme={null} import { useCrefy, AuthModal } from "crefy-connect"; function App() { const { isAuthenticated, user } = useCrefy(); return (
{!isAuthenticated ? (

Welcome to My App

) : (

Welcome back, {user?.userData?.email}!

{/* Your authenticated content */}
)}
); } ``` ### Transaction Handling ```tsx theme={null} import { useSendEth } from "crefy-connect"; import { useState } from "react"; function SendTransaction() { const { sendEth, loading, error, data } = useSendEth(); const [recipient, setRecipient] = useState(""); const handleSend = async () => { try { await sendEth({ to: recipient, value: "0.1", chain: "sepolia", mode: "fast", }); alert("Transaction sent successfully!"); } catch (err) { console.error("Transaction failed:", err); } }; return (
setRecipient(e.target.value)} placeholder="Recipient address" /> {error &&

{error}

} {data &&

Tx Hash: {data.txHash}

}
); } ``` ## Framework-Specific Guides ### Vite.js + TypeScript ```tsx theme={null} // main.tsx import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import { CrefyConnectProvider } from "crefy-connect"; import "./index.css"; ReactDOM.createRoot(document.getElementById("root")!).render( ); ``` ### Next.js 13+ (App Router) ```tsx theme={null} // app/layout.tsx "use client"; import { CrefyConnectProvider } from "crefy-connect"; import "./globals.css"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } ``` ### Create React App ```tsx theme={null} // src/index.tsx import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import { CrefyConnectProvider } from "crefy-connect"; import "./index.css"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( ); ``` ## Environment Variables For security, use environment variables for your App ID: ```bash theme={null} # .env.local VITE_CREFY_APP_ID=your-app-id-here ``` ```tsx theme={null} // Access in code const appId = import.meta.env.VITE_CREFY_APP_ID; ``` ## Testing ### Mocking Crefy Connect in Tests ```tsx theme={null} // __mocks__/crefy-connect.ts export const useCrefy = () => ({ isAuthenticated: true, user: { userData: { email: "test@example.com" } }, walletInfo: { walletAddress: "0x123..." }, logout: jest.fn(), }); export const CrefyConnectProvider = ({ children }) => children; ``` ## Best Practices 1. **Always wrap your app** with `CrefyConnectProvider` at the root level 2. **Use environment variables** for App IDs in production 3. **Handle loading states** when using transaction hooks 4. **Provide user feedback** for authentication and transaction states 5. **Validate inputs** before sending transactions **Development Mode**: Use "sepolia" testnet during development to avoid spending real ETH on transactions.