crefy-connect
v1.0.8
Published
Crefy library for React components and hooks
Downloads
131
Readme
crefy-connect
crefy-connect empowers developers, businesses, and institutions to build seamless onchain experiences through secure, human-centered wallet infrastructure.
We make it simple to connect users, sign transactions, and move value - building trust, accessibility, and inclusion into every digital interaction.
Our goal is to bring a billion people onchain through trusted, intuitive, and inclusive infrastructure.
🚀 Features
🔐 OAuth-style identity connection Secure, user-friendly authentication that feels familiar to Web2 users while fully powered by onchain identity.
⚡ Fast and secure authentication Low-latency authentication flow optimized for both Web2 and Web3 experiences.
🧩 Easy integration Works seamlessly with React, Next.js, or any modern frontend framework.
🔄 Real-time updates Stay in sync with user sessions, balances, and activity through WebSocket-based updates.
🛠 Built for developers Clean, maintainable API and extensible design for rapid prototyping and production-grade builds.
🔏 Supports multiple transaction standards Compatible with ERC-4337, EIP-7702, and other leading onchain signing specifications — enabling next-gen account abstraction and wallet experiences.
🧠 EIP-4361 compliant signatures Fully supports “Sign-In with Ethereum” (SIWE) for consistent and verifiable identity handling.
🌐 Advanced social and multi-factor logins Sign up users via socials, email, Google, or phone/SMS, with upcoming support for passkeys, biometrics, and hardware-based authentication.
💼 Trusted infrastructure at scale Currently in closed internal testing with selected partners, with 1,000+ wallets securely created through Crefy Connect’s infrastructure.
Installation
npm install crefy-connect
# or
yarn add crefy-connect
# or
pnpm add crefy-connect
# or
bun add crefy-connect🪪 Get Your Crefy Connect App ID
Before integrating Crefy Connect, you’ll need an App ID - this uniquely identifies your project when connecting users and managing authentication.
Steps
Visit Crefy Connect Dashboard 👉 https://connect.crefy.xyz/
Sign Up or Sign In to your account
Click on “Create New Application”
Fill in your application details (name, description, etc.)
Once created, copy your App ID - you’ll use it inside the CrefyConnectProvider:
Usage
1️⃣ 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="<YOUR_CREFY_ID>"
chain="sepolia"
loginMethods={["google", "wallet", "email"]}
>
<App />
</CrefyConnectProvider>
</React.StrictMode>
);App.tsx
import { AuthModal } from "crefy-connect";
export default function App() {
return (
<div>
<h1>Crefy Connect Example</h1>
<AuthModal />
</div>
);
}2️⃣ 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="<YOUR_CREFY_ID>"
chain="sepolia"
loginMethods={["google", "wallet", "email"]}
>
{children}
</CrefyConnectProvider>
</body>
</html>
);
}app/page.tsx
"use client";
import { AuthModal } from "crefy-connect";
export default function Home() {
return (
<main>
<h1>Crefy Connect Example</h1>
<AuthModal />
</main>
);
}CrefyConnectProvider Props
| Prop | Type | Required | Description |
| -------------- | ---------- | -------- | ----------- |
| appId | string | ✅ | Your Crefy App ID (used as x-api-key for API calls). |
| chain | string | ✅ | Blockchain network identifier (e.g., "sepolia", "mainnet"). |
| loginMethods | string[] | ✅ | Array of allowed login methods ("google", "email", "wallet", "github", etc.). |
useCrefy Hook
The useCrefy hook allows you to access authentication state, user details, wallet info,
and methods to log in or out directly from your components.
Available Exports
| Name | Type | Description |
| ----------------- | ---------- | ----------- |
| isAuthenticated | boolean | Whether the user is currently authenticated. |
| walletInfo | WalletInfo \| null | The authenticated user's wallet information. |
| user | CrefyUser \| null | The authenticated user's profile. |
| token | string \| null | The JWT token for authenticated API calls. |
| appId | string | The Crefy App ID passed to the provider. |
| chain | string | The blockchain network set in the provider. |
| loginMethods | string[] | List of enabled login methods. |
Example
import { useCrefy } from "crefy-connect";
export default function Dashboard() {
const { user, walletInfo, logout, isAuthenticated } = useCrefy();
if (!isAuthenticated) {
return <p>Please log in to view your dashboard.</p>;
}
return (
<div>
<h1>Welcome {user?.userData?.email}</h1>
<p>Wallet Address: {walletInfo?.walletAddress}</p>
<button onClick={logout}>Logout</button>
</div>
);
}Quick Notes
- Once your app is wrapped in
CrefyConnectProvider, you can calluseCrefy()anywhere to get user details. - The provider must be mounted at the root of your app to work correctly.
🧩 Customizing the AuthModal Button
You can customize the Connect Wallet button rendered by the AuthModal using two optional props:
| Prop | Type | Description |
| ----------------- | --------------------- | ------------ |
| buttonClassName | string | Optional CSS class for the button. |
| buttonStyle | React.CSSProperties | Optional inline style object for custom button styling. |
Example
import { AuthModal } from "crefy-connect";
export default function App() {
return (
<div>
<h1>Custom AuthModal Example</h1>
<AuthModal
buttonClassName="my-custom-btn"
buttonStyle={{
background: "#111",
color: "#fff",
borderRadius: "12px",
padding: "10px 18px",
}}
/>
</div>
);
}You can use either buttonClassName, buttonStyle, or both.
This gives you full flexibility to match the modal’s trigger button with your app’s theme.
🚀 Sending ETH with useSendEth
The useSendEth hook allows you to send native ETH on any supported chain through the Crefy Connect API.
Example (Vite.js + TypeScript)
import React, { useState } from "react";
import { useSendEth } from "crefy-connect";
export default function SendEthExample() {
const { sendEth, loading, error, data } = useSendEth();
const [address, setAddress] = useState("");
const [amount, setAmount] = useState("");
const handleSend = async () => {
try {
await sendEth({
to: address,
value: amount,
chain: "sepolia", // or mainnet
mode: "fast", // transaction speed mode
});
} catch (err) {
console.error("Send ETH failed:", err);
}
};
return (
<div>
<h2>Send ETH</h2>
<input
type="text"
placeholder="Recipient address"
value={address}
onChange={(e) => setAddress(e.target.value)}
/>
<input
type="text"
placeholder="Amount in ETH"
value={amount}
onChange={(e) => setAmount(e.target.value)}
/>
<button onClick={handleSend} disabled={loading}>
{loading ? "Sending..." : "Send ETH"}
</button>
{error && <p style={{ color: "red" }}>Error: {error}</p>}
{data && <p>Transaction sent! Hash: {data.txHash}</p>}
</div>
);
}