Code Examples

Complete, runnable examples showing how to use Crefy Connect in various scenarios.

Basic Setup

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

function App() {
  return (
    <CrefyConnectProvider
      appId="<YOUR_CREFY_ID>"
      chain="sepolia"
      loginMethods={["google", "wallet", "email"]}
    >
      <AuthModal />
    </CrefyConnectProvider>
  );
}

Authentication Examples

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

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

  return (
    <div>
      {!isAuthenticated ? (
        <div>
          <h1>Welcome! Please log in.</h1>
          <AuthModal />
        </div>
      ) : (
        <div>
          <h1>Welcome, {user?.userData?.email}!</h1>
          <p>You are successfully authenticated.</p>
        </div>
      )}
    </div>
  );
}

Custom Logout Button

import { useCrefy } from "crefy-connect";

function LogoutButton() {
  const { logout, isAuthenticated } = useCrefy();

  if (!isAuthenticated) {
    return null;
  }

  return (
    <button onClick={logout} style={{ padding: "10px 20px" }}>
      Logout
    </button>
  );
}

User Profile Display

import { useCrefy } from "crefy-connect";

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

  if (!isAuthenticated) {
    return <p>Please log in to view your profile.</p>;
  }

  return (
    <div>
      <h2>Profile</h2>
      {user?.userData?.picture && (
        <img src={user.userData.picture} alt="Profile" />
      )}
      <p>Email: {user?.userData?.email}</p>
      <p>Name: {user?.userData?.name}</p>
      {walletInfo && (
        <div>
          <p>Wallet Address: {walletInfo.walletAddress}</p>
          <p>Chain: {walletInfo.chain}</p>
        </div>
      )}
    </div>
  );
}

Transaction Examples

Simple Send ETH

import { useSendEth } from "crefy-connect";
import { useState } from "react";

function SendEthForm() {
  const { sendEth, loading, error, data } = useSendEth();
  const [recipient, setRecipient] = useState("");
  const [amount, setAmount] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
      await sendEth({
        to: recipient,
        value: amount,
        chain: "sepolia",
        mode: "fast",
      });
      // Reset form on success
      setRecipient("");
      setAmount("");
    } catch (err) {
      console.error("Transaction failed:", err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Recipient address"
        value={recipient}
        onChange={(e) => setRecipient(e.target.value)}
        required
      />
      <input
        type="text"
        placeholder="Amount (ETH)"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        required
      />
      <button type="submit" disabled={loading}>
        {loading ? "Sending..." : "Send ETH"}
      </button>
      {error && <p style={{ color: "red" }}>{error}</p>}
      {data && (
        <p>
          Transaction sent! Hash:{" "}
          <a
            href={`https://sepolia.etherscan.io/tx/${data.txHash}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            {data.txHash}
          </a>
        </p>
      )}
    </form>
  );
}

Transaction with Speed Selection

import { useSendEth } from "crefy-connect";
import { useState } from "react";

function SpeedSelector() {
  const { sendEth, loading } = useSendEth();
  const [mode, setMode] = useState<"slow" | "standard" | "fast">("standard");
  const [recipient, setRecipient] = useState("");

  const handleSend = async () => {
    await sendEth({
      to: recipient,
      value: "0.1",
      chain: "sepolia",
      mode: mode,
    });
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Recipient address"
        value={recipient}
        onChange={(e) => setRecipient(e.target.value)}
      />
      <select
        value={mode}
        onChange={(e) =>
          setMode(e.target.value as "slow" | "standard" | "fast")
        }
      >
        <option value="slow">Slow (Lower fee)</option>
        <option value="standard">Standard</option>
        <option value="fast">Fast (Higher fee)</option>
      </select>
      <button onClick={handleSend} disabled={loading}>
        Send with {mode} mode
      </button>
    </div>
  );
}

Complete Application Examples

Dashboard with Authentication

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

function Dashboard() {
  const { isAuthenticated, user, walletInfo, logout } = useCrefy();
  const { sendEth, loading, error, data } = useSendEth();
  const [recipient, setRecipient] = useState("");
  const [amount, setAmount] = useState("");

  if (!isAuthenticated) {
    return (
      <div>
        <h1>Welcome to My Dashboard</h1>
        <AuthModal />
      </div>
    );
  }

  const handleSend = async () => {
    await sendEth({
      to: recipient,
      value: amount,
      chain: "sepolia",
    });
  };

  return (
    <div>
      <header>
        <h1>Dashboard</h1>
        <p>Welcome, {user?.userData?.email}</p>
        <button onClick={logout}>Logout</button>
      </header>

      <section>
        <h2>Wallet Info</h2>
        <p>Address: {walletInfo?.walletAddress}</p>
        <p>Chain: {walletInfo?.chain}</p>
      </section>

      <section>
        <h2>Send ETH</h2>
        <input
          type="text"
          placeholder="Recipient"
          value={recipient}
          onChange={(e) => setRecipient(e.target.value)}
        />
        <input
          type="text"
          placeholder="Amount"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />
        <button onClick={handleSend} disabled={loading}>
          {loading ? "Sending..." : "Send"}
        </button>
        {error && <p style={{ color: "red" }}>{error}</p>}
        {data && <p>Tx Hash: {data.txHash}</p>}
      </section>
    </div>
  );
}

Protected Route Component

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

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { isAuthenticated } = useCrefy();

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

  return <>{children}</>;
}

// Usage
function App() {
  return (
    <ProtectedRoute>
      <Dashboard />
    </ProtectedRoute>
  );
}

Custom Styled AuthModal

import { AuthModal } from "crefy-connect";

function CustomAuthButton() {
  return (
    <AuthModal
      buttonClassName="custom-connect-btn"
      buttonStyle={{
        background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
        color: "white",
        border: "none",
        borderRadius: "12px",
        padding: "12px 24px",
        fontSize: "16px",
        fontWeight: "600",
        cursor: "pointer",
      }}
    />
  );
}

Full Examples: These examples are ready to use. Just replace "<YOUR_CREFY_ID>" with your actual App ID from the Crefy Connect Dashboard.

Getting Started

APIs & Hooks

Examples

Code Examples

Code Examples

Basic Setup

Authentication Examples

Custom Logout Button

User Profile Display

Transaction Examples

Simple Send ETH

Transaction with Speed Selection

Complete Application Examples

Dashboard with Authentication

Protected Route Component

Custom Styled AuthModal

​Code Examples

​Basic Setup

​Authentication Examples

​Simple Login Flow

​Custom Logout Button

​User Profile Display

​Transaction Examples

​Simple Send ETH

​Transaction with Speed Selection

​Complete Application Examples

​Dashboard with Authentication

​Protected Route Component

​Custom Styled AuthModal

Code Examples

Basic Setup

Authentication Examples

Simple Login Flow

Custom Logout Button

User Profile Display

Transaction Examples

Simple Send ETH

Transaction with Speed Selection

Complete Application Examples

Dashboard with Authentication

Protected Route Component

Custom Styled AuthModal