> ## 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.

# useCrefy Hook

> Access authentication state and user details

# 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

```tsx theme={null}
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

| Name              | Type               | Description                                 |
| ----------------- | ------------------ | ------------------------------------------- |
| `isAuthenticated` | boolean            | Whether the user is currently authenticated |
| `walletInfo`      | WalletInfo \| null | The authenticated user's wallet information |
| `user`            | CrefyUser \| null  | The authenticated user's profile            |
| `token`           | string \| null     | The JWT token for authenticated API calls   |
| `appId`           | string             | The Crefy App ID passed to the provider     |
| `chain`           | string             | The blockchain network set in the provider  |
| `loginMethods`    | string\[]          | List of enabled login methods               |
| `logout`          | `() => void`       | Function to log out the current user        |

## Type Definitions

### CrefyUser

```typescript theme={null}
interface CrefyUser {
  userData: {
    email?: string;
    name?: string;
    picture?: string;
    // ... other user data fields
  };
  // ... other user fields
}
```

### WalletInfo

```typescript theme={null}
interface WalletInfo {
  walletAddress: string;
  chain: string;
  // ... other wallet fields
}
```

## Examples

### Basic Authentication Check

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

<Tip>
  **Provider Required**: The `useCrefy` hook must be used within a component tree wrapped by `CrefyConnectProvider`. Otherwise, it will throw an error.
</Tip>

<Note>
  **Reactive Updates**: The hook automatically updates when authentication state changes, so your components will re-render when users log in or out.
</Note>