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.
Quick Start
Get Crefy Connect integrated into your application in just a few steps.
Installation
Install Crefy Connect from npm:
npm install 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.
Visit Crefy Connect Dashboard
Sign Up or Sign In
Create a new account or sign in to your existing account.
Create New Application
Click on “Create New Application” in your dashboard.
Fill Application Details
Fill in your application details (name, description, etc.).
Copy Your App ID
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>
);
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>
);
}
"use client";
import { AuthModal } from "crefy-connect";
export default function Home() {
return (
<main>
<h1>Crefy Connect Example</h1>
<AuthModal />
</main>
);
}
Next Steps
CrefyConnectProvider
Learn about provider configuration and props.
AuthModal
Customize the authentication modal component.
useCrefy Hook
Access authentication state and user details.
Send Transactions
Send ETH and interact with the blockchain.
