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

Install Crefy Connect

npm install crefy-connect

Get Your App ID

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

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: "test@example.com" } },
  walletInfo: { walletAddress: "0x123..." },
  logout: jest.fn(),
});

export const CrefyConnectProvider = ({ children }) => children;

Best Practices

Always wrap your app with CrefyConnectProvider at the root level
Use environment variables for App IDs in production
Handle loading states when using transaction hooks
Provide user feedback for authentication and transaction states
Validate inputs before sending transactions

Development Mode: Use “sepolia” testnet during development to avoid spending real ETH on transactions.

Getting Started

APIs & Hooks

Examples

Development

Developing with Crefy Connect

Prerequisites

Setting Up Your Development Environment

Development Patterns

Protected Routes

Conditional Rendering Based on Auth

Transaction Handling

Framework-Specific Guides

Vite.js + TypeScript

Next.js 13+ (App Router)

Create React App

Environment Variables

Testing

Mocking Crefy Connect in Tests

Best Practices

​Developing with Crefy Connect

​Prerequisites

​Setting Up Your Development Environment

​Development Patterns

​Protected Routes

​Conditional Rendering Based on Auth

​Transaction Handling

​Framework-Specific Guides

​Vite.js + TypeScript

​Next.js 13+ (App Router)

​Create React App

​Environment Variables

​Testing

​Mocking Crefy Connect in Tests

​Best Practices

Developing with Crefy Connect

Prerequisites

Setting Up Your Development Environment

Development Patterns

Protected Routes

Conditional Rendering Based on Auth

Transaction Handling

Framework-Specific Guides

Vite.js + TypeScript

Next.js 13+ (App Router)

Create React App

Environment Variables

Testing

Mocking Crefy Connect in Tests

Best Practices