Providers

<JazzProvider /> is the core component that connects your Svelte 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 File Share example app provides an implementation of JazzProvider with authentication and real-time data sync.

Setting up the Provider

The <JazzProvider /> accepts several configuration options:

<!-- src/routes/+layout.svelte -->
<script lang="ts" module>
  // Register the Account schema so `useAccount` returns our custom `MyAppAccount`
  declare module 'jazz-svelte' {
    interface Register {
      Account: MyAppAccount;
    }
  }
</script>

<script lang="ts">
  import { JazzProvider } from "jazz-svelte";
  import { MyAppAccount } from "$lib/schema";
  let { children } = $props();
</script>

<JazzProvider
  sync={{ 
    peer: "wss://cloud.jazz.tools/?key=your-api-key",
    when: "always" // When to sync: "always", "never", or "signedUp"
  }}
  AccountSchema={MyAppAccount}
>
  {@render children()}
</JazzProvider>

Provider Options

Sync Options

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

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

const syncConfig: SyncConfig = {
  // Connection to Jazz Cloud or your own sync server
  peer: "wss://cloud.jazz.tools/?key=your-api-key",
  
  // 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:

<!-- src/routes/+layout.svelte -->>
<script lang="ts" module>
  // Register the Account schema so `useAccount` returns our custom `MyAppAccount`
  declare module 'jazz-svelte' {
    interface Register {
      Account: MyAppAccount;
    }
  }
</script>

<script lang="ts">
  import { JazzProvider } from "jazz-svelte";
  import { MyAppAccount } from "$lib/schema";
  let { children } = $props();
</script>

<JazzProvider
  sync={syncConfig}
  AccountSchema={MyAppAccount}
>
  {@render children()}
</JazzProvider>

Additional Options

The provider accepts these additional options:

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { JazzProvider } from "jazz-svelte";
  import { syncConfig } from "$lib/syncConfig";
  let { children } = $props();
  
  // Enable guest mode for account-less access
  const guestMode = false; 
  
  // Default name for new user profiles
  const defaultProfileName = "New User"; 
  
  // Handle user logout
  const onLogOut = () => {
    console.log("User logged out");
  };

  // Handle anonymous account data when user logs in to existing account
  const onAnonymousAccountDiscarded = (account) => {
    console.log("Anonymous account discarded", account.id);
    // Migrate data here
    return Promise.resolve();
  };
</script>

<JazzProvider
  sync={syncConfig}
  {guestMode}
  {defaultProfileName}
  {onLogOut}
  {onAnonymousAccountDiscarded}
>
  {@render children}
</JazzProvider>

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

Authentication

<JazzProvider /> 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.