Quick Start

Get Started with Crefy Connect

Follow this guide to integrate Crefy Connect into your application in under 10 minutes.

Prerequisites
What you'll need before getting started

Development Environment

  • Node.js 16+ installed
  • npm or yarn package manager
  • React 18+ or Next.js 13+
  • TypeScript (recommended)

Crefy Account

  • Crefy developer account
  • App ID and API keys
  • Configured redirect URLs
Create Account
1
Install the SDK
Add Crefy Connect to your project

Using npm

npm install @crefy/connect-sdk

Using yarn

yarn add @crefy/connect-sdk
2
Configure Environment
Set up your environment variables and configuration

Environment Variables

.env.localbash
# Crefy Connect Configuration
NEXT_PUBLIC_CREFY_APP_ID=your_app_id_here
NEXT_PUBLIC_CREFY_ENVIRONMENT=sandbox # or 'production'
CREFY_API_SECRET=your_api_secret_here

# Optional: Custom configuration
NEXT_PUBLIC_CREFY_REDIRECT_URI=http://localhost:3000/auth/callback
NEXT_PUBLIC_CREFY_CHAIN_ID=1 # Ethereum mainnet
3
Initialize the SDK
Set up the Crefy Connect client in your application

Create SDK Instance

lib/crefy.jsjavascript
import { CrefyConnect } from '@crefy/connect-sdk'

// Initialize Crefy Connect
export const crefy = new CrefyConnect({
  appId: process.env.NEXT_PUBLIC_CREFY_APP_ID,
  environment: process.env.NEXT_PUBLIC_CREFY_ENVIRONMENT,
  chainId: parseInt(process.env.NEXT_PUBLIC_CREFY_CHAIN_ID || '1'),
  redirectUri: process.env.NEXT_PUBLIC_CREFY_REDIRECT_URI
})

// Optional: Configure additional settings
crefy.configure({
  theme: 'dark',
  socialProviders: ['google', 'twitter', 'discord'],
  enableAnalytics: true
})

React Hook (Optional)

hooks/useCrefy.jsjavascript
import { useState, useEffect } from 'react'
import { crefy } from '../lib/crefy'

export function useCrefy() {
  const [wallet, setWallet] = useState(null)
  const [isConnecting, setIsConnecting] = useState(false)
  const [error, setError] = useState(null)

  const connectWallet = async (provider = 'google') => {
    try {
      setIsConnecting(true)
      setError(null)
      
      const connectedWallet = await crefy.connectWallet({
        provider,
        method: 'social'
      })
      
      setWallet(connectedWallet)
      return connectedWallet
    } catch (err) {
      setError(err.message)
      throw err
    } finally {
      setIsConnecting(false)
    }
  }

  const disconnect = async () => {
    await crefy.disconnect()
    setWallet(null)
  }

  return {
    wallet,
    isConnecting,
    error,
    connectWallet,
    disconnect
  }
}
4
Connect Wallet
Implement wallet connection in your React component

Basic Connection Component

components/WalletConnect.jsxjavascript
import { useCrefy } from '../hooks/useCrefy'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

export function WalletConnect() {
  const { wallet, isConnecting, error, connectWallet, disconnect } = useCrefy()

  if (wallet) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Wallet Connected</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            <p><strong>Address:</strong> {wallet.address}</p>
            <p><strong>Provider:</strong> {wallet.provider}</p>
            <p><strong>Balance:</strong> {wallet.balance} ETH</p>
            <Button onClick={disconnect} variant="outline">
              Disconnect
            </Button>
          </div>
        </CardContent>
      </Card>
    )
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Connect Your Wallet</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          <Button 
            onClick={() => connectWallet('google')}
            disabled={isConnecting}
            className="w-full"
          >
            {isConnecting ? 'Connecting...' : 'Connect with Google'}
          </Button>
          <Button 
            onClick={() => connectWallet('twitter')}
            disabled={isConnecting}
            variant="outline"
            className="w-full"
          >
            Connect with Twitter
          </Button>
          <Button 
            onClick={() => connectWallet('discord')}
            disabled={isConnecting}
            variant="outline"
            className="w-full"
          >
            Connect with Discord
          </Button>
          {error && (
            <p className="text-destructive text-sm">{error}</p>
          )}
        </div>
      </CardContent>
    </Card>
  )
}
5
Test Your Integration
Verify everything is working correctly

Add to Your App

pages/index.js or app/page.jsjavascript
import { WalletConnect } from '../components/WalletConnect'

export default function Home() {
  return (
    <div className="container mx-auto p-8">
      <h1 className="text-2xl font-bold mb-8">My Web3 App</h1>
      <WalletConnect />
    </div>
  )
}

Run Your Application

npm run dev
🎉 Congratulations!
You've successfully integrated Crefy Connect. Here's what to explore next:
Common Issues
Redirect URI Mismatch
Ensure your redirect URI in the dashboard matches your development URL exactly.
Environment Variables Not Loading
Restart your development server after adding environment variables.
CORS Issues
Add your domain to the allowed origins in your Crefy dashboard.

Need Help?

Our team is here to help you succeed with your integration

View FAQJoin DiscordEmail Support