Quick Start

Get Crefy Connect integrated into your application in just a few steps.

Installation

Install Crefy Connect from npm:

npm install crefy-connect

yarn add crefy-connect

pnpm add crefy-connect

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.

Visit Crefy Connect Dashboard

Visit Crefy Connect Dashboard to get started.

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>
);

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>
  );
}

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.

Need help? Check our GitHub Issues or join our Discord.

Getting Started

APIs & Hooks

Examples

Quick Start

Quick Start

Installation

🪪 Get Your Crefy Connect App ID

Usage

1️⃣ Vite.js + TypeScript

2️⃣ Next.js 13+ (App Router)

Next Steps

CrefyConnectProvider

AuthModal

useCrefy Hook

Send Transactions

​Quick Start

​Installation

​🪪 Get Your Crefy Connect App ID

​Usage

​1️⃣ Vite.js + TypeScript

​2️⃣ Next.js 13+ (App Router)

​Next Steps

CrefyConnectProvider

AuthModal

useCrefy Hook

Send Transactions

Quick Start

Installation

🪪 Get Your Crefy Connect App ID

Usage

1️⃣ Vite.js + TypeScript

2️⃣ Next.js 13+ (App Router)

Next Steps