Flowfull Clients

Appearance

Session Management ​

This guide covers how to manage user sessions in your application.

Session Storage ​

Flowfull Clients automatically handle session storage based on the platform:

  • React: Uses localStorage for session persistence
  • React Native: Uses Expo SecureStore (with AsyncStorage fallback) for secure session storage
  • Next.js: Uses cookies for server-side sessions and localStorage for client-side

Session Validation ​

Automatic Validation on Startup ​

Configure automatic session validation when the app starts:

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

function App() {
  return (
    <PubflowProvider
      config={{
        baseUrl: 'https://your-backend.com',
        sessionConfig: {
          validateOnStartup: true // Validate session on app start
        }
      }}
    >
      <YourApp />
    </PubflowProvider>
  );
}

Manual Validation ​

Validate the session manually using the validateSession method:

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

function SessionChecker() {
  const { validateSession } = useAuth();
  
  async function checkSession() {
    const result = await validateSession();
    
    if (result.isValid) {
      console.log('Session is valid');
      console.log('Expires at:', result.expiresAt);
    } else {
      console.log('Session is invalid or expired');
      // Redirect to login
    }
  }
  
  return (
    <button onClick={checkSession}>
      Check Session
    </button>
  );
}

Session Expiration Handling ​

Automatic Redirect on Expiration ​

Configure automatic redirect when the session expires:

typescript
import { PubflowProvider } from '@pubflow/react';
import { useNavigate } from 'react-router-dom';

function App() {
  const navigate = useNavigate();
  
  return (
    <PubflowProvider
      config={{
        baseUrl: 'https://your-backend.com'
      }}
      onSessionExpired={() => {
        console.log('Session expired');
        navigate('/login');
      }}
    >
      <YourApp />
    </PubflowProvider>
  );
}

React Native Example ​

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

function App() {
  const navigation = useNavigation();
  
  return (
    <PubflowProvider
      config={{
        baseUrl: process.env.EXPO_PUBLIC_BACKEND_URL!,
        useSecureStorage: true
      }}
      onSessionExpired={() => {
        navigation.navigate('Login');
      }}
    >
      <YourApp />
    </PubflowProvider>
  );
}

Session Refresh ​

Refresh the current user data without re-authenticating:

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

function ProfilePage() {
  const { user, refreshUser } = useAuth();
  
  async function handleRefresh() {
    const updatedUser = await refreshUser();
    console.log('User refreshed:', updatedUser);
  }
  
  return (
    <div>
      <h1>{user?.name}</h1>
      <button onClick={handleRefresh}>Refresh Profile</button>
    </div>
  );
}

TIP

The refreshUser method is available in @pubflow/react-native to fetch fresh user data from the server.

Session Alerts ​

Show alerts when session events occur:

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

function App() {
  return (
    <PubflowProvider
      config={{
        baseUrl: 'https://your-backend.com'
      }}
      showSessionAlerts={true} // Show alerts for session events
    >
      <YourApp />
    </PubflowProvider>
  );
}

Persistent Sessions ​

Sessions are automatically persisted across app restarts. To clear a session, use the logout method:

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

function LogoutButton() {
  const { logout } = useAuth();
  
  async function handleLogout() {
    await logout();
    console.log('Session cleared');
    // User will need to log in again
  }
  
  return <button onClick={handleLogout}>Logout</button>;
}

Next Steps ​