Skip to main content

​
Quick Start

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

​
Installation

Install Crefy Connect from npm: 
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.
1

Visit Crefy Connect Dashboard

Visit Crefy Connect Dashboard to get started.
2

Sign Up or Sign In

Create a new account or sign in to your existing account.
3

Create New Application

Click on “Create New Application” in your dashboard.
4

Fill Application Details

Fill in your application details (name, description, etc.).
5

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.