Providers

<JazzProvider /> is the core component that connects your Expo 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

Setting up the provider

Wrap your app components with the <JazzProvider /> component:

// App.tsx
import { function JazzProvider(props: JazzProviderProps): React.JSX.ElementJazzProvider } from "jazz-expo";
import { import MyAppAccountMyAppAccount } from "./schema";

export function function MyJazzProvider({ children }: {
    children: React.ReactNode;
}): React.JSX.ElementMyJazzProvider({ children: React.ReactNodechildren }: { children: React.ReactNodechildren: export namespace ReactReact.type React.ReactNode = string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<...> | null | undefinedRepresents all of the things React can render.

Where 
{@link 
ReactElement
}
 only represents JSX, `ReactNode` represents everything that can be rendered.
@see{@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}@example```tsx
// Typing children
type Props = { children: ReactNode }

const Component = ({ children }: Props) => <div>{children}</div>

<Component>hello</Component>
```@example```tsx
// Typing a custom element
type Props = { customElement: ReactNode }

const Component = ({ customElement }: Props) => <div>{customElement}</div>

<Component customElement={<div>hello</div>} />
```ReactNode }) {
  return (
    <function JazzProvider(props: JazzProviderProps): React.JSX.ElementJazzProvider
      sync: SyncConfigsync={{ peer: "wss://cloud.jazz.tools/?key=you@example.com"peer: "wss://cloud.jazz.tools/?key=you@example.com" }}
      AccountSchema?: (CoValueClass<MyAppAccount> & {
    fromNode: (typeof Account)["fromNode"];
} & CoValueFromRaw<MyAppAccount>) | undefinedAccountSchema={import MyAppAccountMyAppAccount}
    >
      {children: React.ReactNodechildren}
    </function JazzProvider(props: JazzProviderProps): React.JSX.ElementJazzProvider>
  );
}

// Register the Account schema so `useAccount` returns our custom `MyAppAccount`
declare module "jazz-expo" {
  interface Register {
    Register.Account: MyAppAccountAccount: import MyAppAccountMyAppAccount;
  }
}

Provider Options

kvStore
- ExpoSecureStoreAdapter (default)
AccountSchema
- Account (default)
CryptoProvider
- PureJSCrypto (default) - Pure JavaScript crypto provider
- RNQuickCrypto - C++ accelerated crypto provider

Authentication in the Provider

<JazzProvider /> works with various authentication methods, with PassphraseAuth being the easiest way to get started for development and testing. For authentication details, refer to our Authentication Overview guide.

The authentication hooks must always be used inside the <JazzProvider /> component.

Implementing PassphraseAuth is straightforward:

Import the wordlist for generating recovery phrases
Use the usePassphraseAuth hook to handle authentication
Create simple registration and sign-in screens

// Example with PassphraseAuth
import { function JazzProvider(props: JazzProviderProps): React.JSX.ElementJazzProvider, function usePassphraseAuth({ wordlist, }: {
    wordlist: string[];
}): {
    readonly state: "signedIn" | "anonymous";
    readonly logIn: (passphrase: string) => Promise<void>;
    readonly signUp: (name?: string) => Promise<string>;
    readonly registerNewAccount: (passphrase: string, name: string) => Promise<string>;
    readonly generateRandomPassphrase: () => string;
    readonly passphrase: string;
}`usePassphraseAuth` hook provides a `JazzAuth` object for passphrase authentication.
@example```ts
const auth = usePassphraseAuth({ appName, appHostname, wordlist });
```@categoryAuth ProvidersusePassphraseAuth } from "jazz-expo";
import { import englishWordlistenglishWordlist } from "./wordlist";

function function JazzAuthentication({ children }: {
    children: ReactNode;
}): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefinedJazzAuthentication({ children: React.ReactNodechildren }: { children: React.ReactNodechildren: type ReactNode = string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | null | undefinedRepresents all of the things React can render.

Where 
{@link 
ReactElement
}
 only represents JSX, `ReactNode` represents everything that can be rendered.
@see{@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}@example```tsx
// Typing children
type Props = { children: ReactNode }

const Component = ({ children }: Props) => <div>{children}</div>

<Component>hello</Component>
```@example```tsx
// Typing a custom element
type Props = { customElement: ReactNode }

const Component = ({ customElement }: Props) => <div>{customElement}</div>

<Component customElement={<div>hello</div>} />
```ReactNode }) {
  const const auth: {
    readonly state: "signedIn" | "anonymous";
    readonly logIn: (passphrase: string) => Promise<void>;
    readonly signUp: (name?: string) => Promise<string>;
    readonly registerNewAccount: (passphrase: string, name: string) => Promise<string>;
    readonly generateRandomPassphrase: () => string;
    readonly passphrase: string;
}auth = function usePassphraseAuth({ wordlist, }: {
    wordlist: string[];
}): {
    readonly state: "signedIn" | "anonymous";
    readonly logIn: (passphrase: string) => Promise<void>;
    readonly signUp: (name?: string) => Promise<string>;
    readonly registerNewAccount: (passphrase: string, name: string) => Promise<string>;
    readonly generateRandomPassphrase: () => string;
    readonly passphrase: string;
}`usePassphraseAuth` hook provides a `JazzAuth` object for passphrase authentication.
@example```ts
const auth = usePassphraseAuth({ appName, appHostname, wordlist });
```@categoryAuth ProvidersusePassphraseAuth({
    wordlist: string[]wordlist: import englishWordlistenglishWordlist,
  });

  // If the user is already signed in, render the App
  if (const auth: {
    readonly state: "signedIn" | "anonymous";
    readonly logIn: (passphrase: string) => Promise<void>;
    readonly signUp: (name?: string) => Promise<string>;
    readonly registerNewAccount: (passphrase: string, name: string) => Promise<string>;
    readonly generateRandomPassphrase: () => string;
    readonly passphrase: string;
}auth.state: "signedIn" | "anonymous"state === "signedIn") {
    return children: React.ReactNodechildren
  }
  
  // Otherwise, show a sign-in screen
  return <function SignInScreen({ auth }: {
    auth: any;
}): nullSignInScreen auth: anyauth={const auth: {
    readonly state: "signedIn" | "anonymous";
    readonly logIn: (passphrase: string) => Promise<void>;
    readonly signUp: (name?: string) => Promise<string>;
    readonly registerNewAccount: (passphrase: string, name: string) => Promise<string>;
    readonly generateRandomPassphrase: () => string;
    readonly passphrase: string;
}auth} />;
}

function function AuthenticatedProvider({ children }: {
    children: ReactNode;
}): React.JSX.ElementAuthenticatedProvider({ children: React.ReactNodechildren }: { children: React.ReactNodechildren: type ReactNode = string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | null | undefinedRepresents all of the things React can render.

Where 
{@link 
ReactElement
}
 only represents JSX, `ReactNode` represents everything that can be rendered.
@see{@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}@example```tsx
// Typing children
type Props = { children: ReactNode }

const Component = ({ children }: Props) => <div>{children}</div>

<Component>hello</Component>
```@example```tsx
// Typing a custom element
type Props = { customElement: ReactNode }

const Component = ({ customElement }: Props) => <div>{customElement}</div>

<Component customElement={<div>hello</div>} />
```ReactNode }) {
  return (
    <function JazzProvider(props: JazzProviderProps): React.JSX.ElementJazzProvider
      sync: SyncConfigsync={{ peer: "wss://cloud.jazz.tools/?key=your-api-key"peer: "wss://cloud.jazz.tools/?key=your-api-key" }}
    >
      <function JazzAuthentication({ children }: {
    children: ReactNode;
}): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefinedJazzAuthentication>
        {children: React.ReactNodechildren}
      </function JazzAuthentication({ children }: {
    children: ReactNode;
}): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefinedJazzAuthentication>
    </function JazzProvider(props: JazzProviderProps): React.JSX.ElementJazzProvider>
  );
}

For a complete example, see the Expo Chat Demo.

Local Persistence

Jazz for Expo includes built-in local persistence using SQLite. Following Expo's best practices, the Expo implementation uses:

Database Storage: expo-sqlite - Expo's official SQLite module
Key-Value Storage: expo-secure-store - Expo's secure storage system

Local persistence is enabled by default with no additional configuration required. Your data will automatically persist across app restarts.

Docs issue?⌝Join Discord⌝

Node.JS / server workers

AI tools

Providers

#Setting up the provider

#Provider Options

#Authentication in the Provider

#Local Persistence

Setting up the provider

Provider Options

Authentication in the Provider

Local Persistence