CrefyConnectProvider

The CrefyConnectProvider is the root component that wraps your application and provides Crefy Connect functionality to all child components.

Usage

import { CrefyConnectProvider } from "crefy-connect";

function App() {
  return (
    <CrefyConnectProvider
      appId="<YOUR_CREFY_ID>"
      chain="sepolia"
      loginMethods={["google", "wallet", "email"]}
    >
      {/* Your app components */}
    </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.)

Supported Chains

"sepolia" - Ethereum Sepolia testnet
"mainnet" - Ethereum mainnet
More chains coming soon…

"google" - Google OAuth authentication
"email" - Email/password authentication
"wallet" - External wallet connection (MetaMask, WalletConnect, etc.)
"github" - GitHub OAuth authentication
More methods coming soon…

Example: Vite.js Setup

// 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-app-id-here"
      chain="sepolia"
      loginMethods={["google", "wallet", "email"]}
    >
      <App />
    </CrefyConnectProvider>
  </React.StrictMode>
);

Example: 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-app-id-here"
          chain="sepolia"
          loginMethods={["google", "wallet", "email"]}
        >
          {children}
        </CrefyConnectProvider>
      </body>
    </html>
  );
}

Important Notes

Provider Placement: The CrefyConnectProvider must be mounted at the root of your app to work correctly. All child components can then use Crefy Connect hooks.

App ID Security: Never expose your App ID in client-side code if it contains sensitive permissions. For production apps, consider using environment variables.

Getting Started

APIs & Hooks

Examples

CrefyConnectProvider

CrefyConnectProvider

Usage

Props

Supported Chains

Example: Vite.js Setup

Example: Next.js 13+ (App Router)

Important Notes

​CrefyConnectProvider

​Usage

​Props

​Supported Chains

​Supported Login Methods

​Example: Vite.js Setup

​Example: Next.js 13+ (App Router)

​Important Notes

CrefyConnectProvider

Usage

Props

Supported Chains

Supported Login Methods

Example: Vite.js Setup

Example: Next.js 13+ (App Router)

Important Notes