Skip to main content

​
useCrefy Hook

The useCrefy hook allows you to access authentication state, user details, wallet info, and methods to log in or out directly from your components.

​
Usage

import { useCrefy } from "crefy-connect";

export default function Dashboard() {
  const { user, walletInfo, logout, isAuthenticated } = useCrefy();

  if (!isAuthenticated) {
    return <p>Please log in to view your dashboard.</p>;
  }

  return (
    <div>
      <h1>Welcome {user?.userData?.email}</h1>
      <p>Wallet Address: {walletInfo?.walletAddress}</p>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

​
Available Exports

NameTypeDescription
isAuthenticatedbooleanWhether the user is currently authenticated
walletInfoWalletInfo | nullThe authenticated user’s wallet information
userCrefyUser | nullThe authenticated user’s profile
tokenstring | nullThe JWT token for authenticated API calls
appIdstringThe Crefy App ID passed to the provider
chainstringThe blockchain network set in the provider
loginMethodsstring[]List of enabled login methods
logout() => voidFunction to log out the current user

​
Type Definitions

​
CrefyUser

interface CrefyUser {
  userData: {
    email?: string;
    name?: string;
    picture?: string;
    // ... other user data fields
  };
  // ... other user fields
}

​
WalletInfo

interface WalletInfo {
  walletAddress: string;
  chain: string;
  // ... other wallet fields
}

​
Examples

​
Basic Authentication Check

import { useCrefy } from "crefy-connect";

export default function ProtectedRoute() {
  const { isAuthenticated } = useCrefy();

  if (!isAuthenticated) {
    return <div>Please log in to access this page.</div>;
  }

  return <div>Protected content here</div>;
}

​
Display User Information

import { useCrefy } from "crefy-connect";

export default function UserProfile() {
  const { user, walletInfo } = useCrefy();

  if (!user) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h2>Profile</h2>
      <p>Email: {user.userData?.email}</p>
      <p>Name: {user.userData?.name}</p>
      {user.userData?.picture && (
        <img src={user.userData.picture} alt="Profile" />
      )}
      {walletInfo && (
        <p>Wallet: {walletInfo.walletAddress}</p>
      )}
    </div>
  );
}

​
Logout Functionality

import { useCrefy } from "crefy-connect";

export default function Header() {
  const { isAuthenticated, user, logout } = useCrefy();

  return (
    <header>
      <nav>
        {isAuthenticated ? (
          <>
            <span>Welcome, {user?.userData?.email}</span>
            <button onClick={logout}>Logout</button>
          </>
        ) : (
          <span>Not logged in</span>
        )}
      </nav>
    </header>
  );
}

​
Using Token for API Calls

import { useCrefy } from "crefy-connect";

export default function ApiExample() {
  const { token, isAuthenticated } = useCrefy();

  const fetchUserData = async () => {
    if (!token) return;

    const response = await fetch("https://api.example.com/user", {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });

    const data = await response.json();
    console.log(data);
  };

  return (
    <div>
      {isAuthenticated && (
        <button onClick={fetchUserData}>Fetch User Data</button>
      )}
    </div>
  );
}

​
Important Notes

Provider Required: The useCrefy hook must be used within a component tree wrapped by CrefyConnectProvider. Otherwise, it will throw an error.
Reactive Updates: The hook automatically updates when authentication state changes, so your components will re-render when users log in or out.