@coinlist-co/react package is the recommended way to integrate Passage in React and Next.js apps with a backend. It gives you OAuth with PKCE on the client, token exchange and sessions on the server, and ready-made UI for common flows.
For a linear walkthrough, start with SDK quickstart.
Requirements
- React 18+ and React DOM 18+ (peer dependencies)
- A backend you control to store
client_secret, exchange authorization codes, and keep refresh tokens out of the browser
Install
Entry points
The package exposes three canonical entry points:| Path | Use for |
|---|---|
@coinlist-co/react | React client - components (CoinListSignInCard, OffersGrid, OfferCard, RequirementsChecklist), hooks (useCoinList, useOffers, useOfferDetails, useParticipations, useRequirements, useCompleteOAuth), and CoinListClient / createCoinListClient for non-React or advanced wiring |
@coinlist-co/react/server | Node / SSR - CoinListServer, createCoinListServer, session helpers for Next.js route handlers and Server Components |
@coinlist-co/react/shared | Isomorphic domain types - Offer, OfferDetail, Participation, Requirement, ClientId, RedirectUri, pagination helpers, error classes |
@coinlist-co/react. Reach for /server only inside server-side code, and /shared when you want a domain type without pulling the client bundle. Sub-path imports like @coinlist-co/react/client/components and /client/hooks were removed in v0.5.0 - see the React SDK changelog.
Next steps
SDK quickstart
Credentials, install, and architecture in one place.
OAuth recipe
End-to-end sign-in with backend session.