Skip to main content

​
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

​
Setting Up Your Development Environment

1

Install Crefy Connect

npm install crefy-connect
2

Get Your App ID

Visit the Crefy Connect Dashboard and create a new application to get your App ID.
3

Set Up Provider

Wrap your app with CrefyConnectProvider:
import { CrefyConnectProvider } from "crefy-connect";

<CrefyConnectProvider
  appId="<YOUR_CREFY_ID>"
  chain="sepolia"
  loginMethods={["google", "wallet", "email"]}
>
  <App />
</CrefyConnectProvider>

​
Development Patterns

​
Protected Routes

import { useCrefy } from "crefy-connect";

function ProtectedRoute({ children }) {
  const { isAuthenticated } = useCrefy();

  if (!isAuthenticated) {
    return <div>Please log in to access this page.</div>;
  }

  return <>{children}</>;
}

​
Conditional Rendering Based on Auth

import { useCrefy, AuthModal } from "crefy-connect";

function App() {
  const { isAuthenticated, user } = useCrefy();

  return (
    <div>
      {!isAuthenticated ? (
        <div>
          <h1>Welcome to My App</h1>
          <AuthModal />
        </div>
      ) : (
        <div>
          <h1>Welcome back, {user?.userData?.email}!</h1>
          {/* Your authenticated content */}
        </div>
      )}
    </div>
  );
}

​
Transaction Handling

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 (
    <div>
      <input
        value={recipient}
        onChange={(e) => setRecipient(e.target.value)}
        placeholder="Recipient address"
      />
      <button onClick={handleSend} disabled={loading}>
        {loading ? "Sending..." : "Send ETH"}
      </button>
      {error && <p style={{ color: "red" }}>{error}</p>}
      {data && <p>Tx Hash: {data.txHash}</p>}
    </div>
  );
}

​
Framework-Specific Guides

​
Vite.js + TypeScript

// 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(
  <React.StrictMode>
    <CrefyConnectProvider
      appId={import.meta.env.VITE_CREFY_APP_ID}
      chain="sepolia"
      loginMethods={["google", "wallet", "email"]}
    >
      <App />
    </CrefyConnectProvider>
  </React.StrictMode>
);

​
Next.js 13+ (App Router)

// app/layout.tsx
"use client";

import { CrefyConnectProvider } from "crefy-connect";
import "./globals.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <CrefyConnectProvider
          appId={process.env.NEXT_PUBLIC_CREFY_APP_ID!}
          chain="sepolia"
          loginMethods={["google", "wallet", "email"]}
        >
          {children}
        </CrefyConnectProvider>
      </body>
    </html>
  );
}

​
Create React App

// 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(
  <React.StrictMode>
    <CrefyConnectProvider
      appId={process.env.REACT_APP_CREFY_APP_ID!}
      chain="sepolia"
      loginMethods={["google", "wallet", "email"]}
    >
      <App />
    </CrefyConnectProvider>
  </React.StrictMode>
);

​
Environment Variables

For security, use environment variables for your App ID: 
# .env.local
VITE_CREFY_APP_ID=your-app-id-here

// Access in code
const appId = import.meta.env.VITE_CREFY_APP_ID;

​
Testing

​
Mocking Crefy Connect in Tests

// __mocks__/crefy-connect.ts
export const useCrefy = () => ({
  isAuthenticated: true,
  user: { userData: { email: "[email protected]" } },
  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.