{"id":27924,"library":"littlefish-nft-auth-framework","title":"Littlefish NFT Wallet Auth Framework","description":"An open-source NFT and wallet authentication framework specifically for Cardano blockchain applications. Current stable version is 1.0.1. It provides React components (WalletConnectButton, WalletConnectPage), a WalletProvider context, hooks (useWallet), and utility functions for connecting/disconnecting wallets, fetching assets, and decoding hex data. Designed for Next.js with client-side rendering. Key differentiators: tailored for Cardano ecosystem, supports multiple wallets, TypeScript types included, and offers both client and server functions.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/littlefish-foundation/littlefish-nft-auth-framework","tags":["javascript","react","wallet","cardano","blockchain","nft","auth","typescript"],"install":[{"cmd":"npm install littlefish-nft-auth-framework","lang":"bash","label":"npm"},{"cmd":"yarn add littlefish-nft-auth-framework","lang":"bash","label":"yarn"},{"cmd":"pnpm add littlefish-nft-auth-framework","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for Cardano blockchain interactions and wallet APIs","package":"lucid-cardano","optional":true}],"imports":[{"note":"Client-side components must be imported from '/frontend' subpath. The root package export may not include them.","wrong":"import { WalletProvider } from 'littlefish-nft-auth-framework'","symbol":"WalletProvider","correct":"import { WalletProvider } from 'littlefish-nft-auth-framework/frontend'"},{"note":"Hook is part of the frontend module, not the root index.","wrong":"import { useWallet } from 'littlefish-nft-auth-framework'","symbol":"useWallet","correct":"import { useWallet } from 'littlefish-nft-auth-framework/frontend'"},{"note":"Named export, not default. Also ensure client-side usage with 'use client' directive.","wrong":"import WalletConnectButton from 'littlefish-nft-auth-framework/frontend'","symbol":"WalletConnectButton","correct":"import { WalletConnectButton } from 'littlefish-nft-auth-framework/frontend'"}],"quickstart":{"code":"// app/providers.tsx\n\"use client\";\nimport { WalletProvider } from 'littlefish-nft-auth-framework/frontend';\n\nexport default function Providers({ children }: { children: React.ReactNode }) {\n return {children};\n}\n\n// app/ClientProviders.tsx\n\"use client\";\nimport Providers from './Providers';\nimport { useEffect, useState } from 'react';\n\nexport default function ClientProviders({ children }: { children: React.ReactNode }) {\n const [hasMounted, setHasMounted] = useState(false);\n useEffect(() => { setHasMounted(true); }, []);\n if (!hasMounted) return null;\n return {children};\n}\n\n// app/layout.tsx\nimport ClientProviders from './ClientProviders';\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n return (\n \n {children}\n \n );\n}\n\n// app/page.tsx\n\"use client\";\nimport { WalletConnectButton } from 'littlefish-nft-auth-framework/frontend';\n\nexport default function Home() {\n return ;\n}","lang":"typescript","description":"Sets up WalletProvider with hydration-safe client wrapper and renders WalletConnectButton in Next.js app directory."},"warnings":[{"fix":"Create a ClientProviders component that mounts the WalletProvider only on the client side, as shown in the quickstart.","message":"WalletProvider must be wrapped in a client-only boundary (ClientProviders) to avoid hydration mismatches in Next.js App Router.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use import { Component } from 'littlefish-nft-auth-framework/frontend'.","message":"All UI components (WalletConnectButton, WalletConnectPage) and hooks (useWallet) must be imported from 'littlefish-nft-auth-framework/frontend', not the root package.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Only use in a browser context; ensure code is run client-side only.","message":"The useWallet hook and related components rely on Cardano wallet browser extensions (e.g., Nami, Eternl). They will not work in non-browser environments.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use named imports as shown in the documentation.","message":"The package does not include a default export; all exports are named.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-09T00:00:00.000Z","next_check":"2026-08-07T00:00:00.000Z","problems":[{"fix":"Run npm install littlefish-nft-auth-framework. Ensure imports use correct subpath: 'littlefish-nft-auth-framework/frontend' for frontend components.","cause":"Package not installed or import path incorrect.","error":"Module not found: Can't resolve 'littlefish-nft-auth-framework'"},{"fix":"Wrap WalletProvider in a client-only component as shown in quickstart (ClientProviders).","cause":"WalletProvider renders on server (window not available) causing mismatch.","error":"Error: Hydration failed because the initial UI does not match what was rendered on the server."},{"fix":"Ensure a compatible Cardano wallet (e.g., Nami, Eternl) is installed and enabled in the browser.","cause":"Cardano wallet extension not installed or not detected.","error":"TypeError: Cannot read properties of undefined (reading 'enable' )"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}