> ## 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.
# CrefyConnectProvider
> Root provider component for Crefy Connect
# CrefyConnectProvider
The `CrefyConnectProvider` is the root component that wraps your application and provides Crefy Connect functionality to all child components.
## Usage
```tsx theme={null}
import { CrefyConnectProvider } from "crefy-connect";
function App() {
return (
{/* Your app components */}
);
}
```
## 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...
## 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
```tsx theme={null}
// 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(
);
```
## Example: Next.js 13+ (App Router)
```tsx theme={null}
// app/layout.tsx
"use client";
import { CrefyConnectProvider } from "crefy-connect";
import "./globals.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
## 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.