Providers

Introduction

<JazzProvider /> is the core component that connects your React Native 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-react-native";
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 | 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=you@example.com"peer: "wss://cloud.jazz.tools/?key=you@example.com" }}
      AccountSchema?: AccountClass<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-react-native" {
  interface Register {
    Register.Account: MyAppAccountAccount: import MyAppAccountMyAppAccount;
  }
}

Provider Options

kvStore
- MMKVStoreAdapter (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<import("/vercel/path0/packages/jazz-tools/dist/internal").ID<import("/vercel/path0/packages/jazz-tools/dist/exports").Account>>;
    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-react-native";
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<import("/vercel/path0/packages/jazz-tools/dist/internal").ID<import("/vercel/path0/packages/jazz-tools/dist/exports").Account>>;
    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<import("/vercel/path0/packages/jazz-tools/dist/internal").ID<import("/vercel/path0/packages/jazz-tools/dist/exports").Account>>;
    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<import("/vercel/path0/packages/jazz-tools/dist/internal").ID<import("/vercel/path0/packages/jazz-tools/dist/exports").Account>>;
    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<import("/vercel/path0/packages/jazz-tools/dist/internal").ID<import("/vercel/path0/packages/jazz-tools/dist/exports").Account>>;
    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>
  );
}

Local Persistence

Jazz for React Native includes built-in local persistence using SQLite. This implementation uses:

Database Storage: @op-engineering/op-sqlite - A high-performance SQLite implementation
Key-Value Storage: react-native-mmkv - A fast key-value storage system

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

Providers

#Introduction

#Setting up the provider

#Provider Options

#Authentication in the Provider

#Local Persistence

Introduction

Setting up the provider

Provider Options

Authentication in the Provider

Local Persistence