Providers

<JazzReactProvider /> is the core component that connects your React application to Jazz. It handles:

• Data Synchronization: Manages connections to peers and the Jazz cloud
• Local Storage: Persists data locally between app sessions
• Schema Types: Provides APIs for the AccountSchema
• Authentication: Connects your authentication system to Jazz

Our Chat example app provides a complete implementation of JazzReactProvider with authentication and real-time data sync.

#Setting up the Provider

The provider accepts several configuration options:

#Provider Options

#Sync Options

The sync property configures how your application connects to the Jazz network:

import { type SyncConfig } from "jazz-tools";

export const syncConfig: SyncConfig = {
  // Connection to Jazz Cloud or your own sync server
  peer: `wss://cloud.jazz.tools/?key=${apiKey}`,

  // When to sync: "always" (default), "never", or "signedUp"
  when: "always",
};

See Authentication States for more details on how the when property affects synchronization based on authentication state.

#Account Schema

The AccountSchema property defines your application's account structure:

#Additional Options

The provider accepts these additional options:

See Authentication States for more information on authentication states, guest mode, and handling anonymous accounts.

#Authentication

The Jazz Provider works with various authentication methods to enable users to access their data across multiple devices. For a complete guide to authentication, see our Authentication Overview.

#Need Help?

If you have questions about configuring the Jazz Provider for your specific use case, join our Discord community for help.