Flowfull Clients

Appearance

What are Flowfull Clients? ​

Flowfull Clients are a suite of frontend integration libraries that make it easy to build modern applications with the Pubflow ecosystem. They provide a unified developer experience across React, React Native, and Next.js while handling authentication, API calls, data fetching, and state management automatically.

🚀 Quick Start with Starter Kits

Want to get started quickly? Check out our Official Starter Kits - production-ready templates for TanStack Start (React) and React Native Expo with authentication, routing, and best practices already configured!

The Pubflow Ecosystem ​

Flowfull Clients are part of the larger Pubflow ecosystem, which consists of three main components:

1. Flowless - Authentication Service ​

A managed authentication backend deployed and maintained by Pubflow. It handles:

  • User registration and login
  • Session management
  • Social authentication (Google, Facebook, etc.)
  • Token-based authentication
  • Email/SMS verification
  • Password recovery

You don't deploy Flowless - it's a managed service at pubflow.com.

2. Flowfull - Your Backend ​

Your custom backend built with the Flowfull framework. It contains:

  • Your business logic
  • Custom API endpoints
  • Database models
  • Background jobs
  • File uploads

You deploy Flowfull - it's your application backend.

3. Flowfull Clients - Frontend Libraries ​

The client libraries that connect your frontend to Flowless and Flowfull:

  • @pubflow/core - Platform-agnostic core
  • @pubflow/react - React integration
  • @pubflow/react-native - React Native integration
  • @pubflow/nextjs - Next.js integration

Why Use Flowfull Clients? ​

🚀 Rapid Development ​

Get authentication, API calls, and data fetching working in minutes, not days. No need to write boilerplate code for common patterns.

typescript
// That's it! Authentication is ready
<PubflowProvider url="https://your-backend.com">
  <App />
</PubflowProvider>

🔐 Security Built-in ​

Automatic session management, token refresh, and secure storage. No need to worry about security best practices - they're built in.

📱 Cross-Platform ​

Write once, deploy everywhere. The same API works across web, mobile, and server-rendered applications.

🎯 Type-Safe ​

Full TypeScript support with comprehensive type definitions. Catch errors at compile time, not runtime.

⚡ Performance Optimized ​

Built-in caching, request deduplication, and optimistic updates for lightning-fast user experiences.

🛠️ Developer Experience ​

Intuitive APIs, helpful error messages, and comprehensive documentation make development a breeze.

Package Comparison ​

Feature@pubflow/core@pubflow/react@pubflow/react-native@pubflow/nextjs
PlatformAnyReact WebReact NativeNext.js
Authentication✅✅✅✅
API Client✅✅✅✅
Hooks❌✅✅✅
Components❌✅✅✅
SWR Integration❌✅✅✅
SSR Support❌❌❌✅
Offline Support❌❌✅❌
StorageAbstractLocalStorageAsyncStorageCookies

How It Works ​

1. Setup Provider ​

Wrap your app with PubflowProvider to configure the connection to your backend:

typescript
<PubflowProvider url="https://your-backend.com">
  <App />
</PubflowProvider>

2. Use Authentication ​

Access authentication state and methods with the useAuth hook:

typescript
const { user, login, logout, isAuthenticated } = useAuth();

3. Make API Calls ​

Use the Bridge API to interact with your backend:

typescript
const { data, error, isLoading } = useBridgeQuery('/api/users');

4. Handle Forms ​

Use pre-built form components with automatic validation:

typescript
<BridgeForm
  endpoint="/api/users"
  method="POST"
  onSuccess={(data) => console.log('User created:', data)}
/>

Architecture ​

Flowfull Clients use a layered architecture:

  • Components Layer: Pre-built UI components (BridgeView, BridgeForm, etc.)
  • Hooks Layer: React hooks for data fetching and state management
  • Service Layer: AuthService, BridgeService for business logic
  • Core Layer: Platform-agnostic functionality
  • Storage Layer: Platform-specific storage adapters
  • HTTP Layer: API client with automatic authentication

Next Steps ​

Ready to get started? Choose your path:

Need Help? ​