Skip to main content

​
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

PropTypeRequiredDescription
appIdstring✅Your Crefy App ID (used as x-api-key for API calls)
chainstring✅Blockchain network identifier (e.g., “sepolia”, “mainnet”)
loginMethodsstring[]✅Array of allowed login methods (“google”, “email”, “wallet”, “github”, etc.)

​
Supported Chains

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

​
Supported Login Methods

  • "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.