Flowfull Clients

Appearance

Authentication ​

This guide covers how to implement authentication in your application using Flowfull Clients.

Setup ​

1. Wrap Your App with PubflowProvider ​

First, wrap your application with the PubflowProvider to enable authentication:

React:

typescript
import { PubflowProvider } from '@pubflow/react';

function App() {
  return (
    <PubflowProvider
      config={{
        baseUrl: 'https://your-backend.com',
        bridgeBasePath: '/bridge',
        authBasePath: '/auth'
      }}
    >
      <YourApp />
    </PubflowProvider>
  );
}

React Native (Expo):

typescript
import { PubflowProvider } from '@pubflow/react-native';

function App() {
  return (
    <PubflowProvider
      config={{
        baseUrl: process.env.EXPO_PUBLIC_BACKEND_URL!,
        bridgeBasePath: '/bridge',
        authBasePath: '/auth',
        useSecureStorage: true // Uses Expo SecureStore
      }}
    >
      <YourApp />
    </PubflowProvider>
  );
}

Next.js:

typescript
import { PubflowProvider } from '@pubflow/nextjs';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <PubflowProvider
          config={{
            baseUrl: process.env.NEXT_PUBLIC_BACKEND_URL!,
            bridgeBasePath: '/bridge',
            authBasePath: '/auth'
          }}
        >
          {children}
        </PubflowProvider>
      </body>
    </html>
  );
}

2. Use the useAuth Hook ​

The useAuth hook provides access to authentication state and methods:

typescript
import { useAuth } from '@pubflow/react'; // or @pubflow/react-native or @pubflow/nextjs

function LoginPage() {
  const { user, isAuthenticated, isLoading, login, logout } = useAuth();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isAuthenticated) {
    return (
      <div>
        <p>Welcome, {user?.name}!</p>
        <button onClick={logout}>Logout</button>
      </div>
    );
  }

  return <LoginForm />;
}

Login ​

Email and Password ​

typescript
const { login } = useAuth();

async function handleLogin(email: string, password: string) {
  try {
    const result = await login({ email, password });
    
    if (result.success) {
      console.log('Logged in:', result.user);
      // Navigate to dashboard
    } else {
      console.error('Login failed:', result.error);
    }
  } catch (error) {
    console.error('Login error:', error);
  }
}

Username and Password ​

typescript
const { login } = useAuth();

async function handleLogin(userName: string, password: string) {
  try {
    const result = await login({ userName, password });
    
    if (result.success) {
      console.log('Logged in:', result.user);
    }
  } catch (error) {
    console.error('Login error:', error);
  }
}

Logout ​

typescript
const { logout } = useAuth();

async function handleLogout() {
  try {
    await logout();
    console.log('Logged out successfully');
    // Navigate to login page
  } catch (error) {
    console.error('Logout error:', error);
  }
}

Session Validation ​

Validate the current session to check if it's still valid:

typescript
const { validateSession } = useAuth();

async function checkSession() {
  const result = await validateSession();
  
  if (result.isValid) {
    console.log('Session is valid, expires at:', result.expiresAt);
  } else {
    console.log('Session is invalid or expired');
    // Redirect to login
  }
}

Next Steps ​