TypeScript Types
Crefy Connect is fully typed with TypeScript. Here are all the available types and interfaces.
Provider Types
CrefyConnectProviderProps
interface CrefyConnectProviderProps {
appId: string;
chain: string;
loginMethods: string[];
children: React.ReactNode;
}
Hook Return Types
useCrefy Return Type
interface UseCrefyReturn {
isAuthenticated: boolean;
walletInfo: WalletInfo | null;
user: CrefyUser | null;
token: string | null;
appId: string;
chain: string;
loginMethods: string[];
logout: () => void;
}
useSendEth Return Type
interface UseSendEthReturn {
sendEth: (params: SendEthParams) => Promise<void>;
loading: boolean;
error: string | null;
data: SendEthResponse | null;
}
User Types
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
}
Transaction Types
SendEthParams
interface SendEthParams {
to: string;
value: string; // Amount in ETH as string (e.g., "0.1")
chain: "sepolia" | "mainnet";
mode?: "slow" | "standard" | "fast";
}
SendEthResponse
interface SendEthResponse {
txHash: string;
// ... other response fields
}
Component Props Types
AuthModalProps
interface AuthModalProps {
buttonClassName?: string;
buttonStyle?: React.CSSProperties;
}
Usage Examples
Type-Safe Component Props
import { CrefyConnectProvider } from "crefy-connect";
interface AppProps {
appId: string;
chain: "sepolia" | "mainnet";
}
function App({ appId, chain }: AppProps) {
return (
<CrefyConnectProvider
appId={appId}
chain={chain}
loginMethods={["google", "wallet", "email"]}
>
{/* Your app */}
</CrefyConnectProvider>
);
}
Type-Safe Hook Usage
import { useCrefy } from "crefy-connect";
function UserProfile() {
const { user, walletInfo }: UseCrefyReturn = useCrefy();
// TypeScript knows the exact shape
if (user?.userData?.email) {
console.log(user.userData.email); // ✅ Type-safe
}
if (walletInfo?.walletAddress) {
console.log(walletInfo.walletAddress); // ✅ Type-safe
}
return null;
}
Type-Safe Transaction Sending
import { useSendEth } from "crefy-connect";
function SendButton() {
const { sendEth } = useSendEth();
const handleSend = async () => {
// TypeScript enforces correct parameter types
await sendEth({
to: "0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb",
value: "0.1", // ✅ Must be string
chain: "sepolia", // ✅ Must be "sepolia" | "mainnet"
mode: "fast", // ✅ Optional, must be "slow" | "standard" | "fast"
});
};
return <button onClick={handleSend}>Send</button>;
}
Custom Type Guards
function isAuthenticatedUser(
user: CrefyUser | null
): user is CrefyUser {
return user !== null && user.userData !== undefined;
}
// Usage
const { user } = useCrefy();
if (isAuthenticatedUser(user)) {
// TypeScript now knows user is CrefyUser, not null
console.log(user.userData.email);
}
Generic Utility Types
// Optional utility type for extending user data
type ExtendedUserData = CrefyUser["userData"] & {
customField?: string;
};
// Chain type for better type safety
type SupportedChain = "sepolia" | "mainnet";
// Login method type
type LoginMethod = "google" | "email" | "wallet" | "github";
Type Safety: All Crefy Connect APIs are designed with TypeScript first, ensuring compile-time type checking and excellent IDE support with autocomplete.