SyncProvider

React provider component for Gluonic sync client with token management.

Import


import { SyncProvider } from '@gluonic/client'

Signature


function SyncProvider(props: SyncProviderProps): React.ReactElement

Props

Property	Type	Required	Description
`client`	`SyncClientInstance`	Yes	Client instance from `SyncClient()`
`token`	`string \| null`	Yes	JWT auth token (null = not authenticated)
`children`	`React.ReactNode`	Yes	Child components

Token Behavior

SyncProvider automatically handles token changes:

`null` → `token` (Sign In)

Starts sync with new token
Runs bootstrap
Connects WebSocket

`token` → `different token` (Switch User)

Clears all local data (prevents data leakage)
Runs bootstrap with new token
Re-syncs everything

`token` → `null` (Sign Out)

Clears all local data
Stops sync
Disconnects WebSocket

Security: SyncProvider always clears data when token changes to prevent account data mixing.

Examples

Basic Usage


import { SyncProvider } from '@gluonic/client'
import { client } from './sync'
import { useAuth } from './auth'
 
export default function App() {
  const { token } = useAuth()
  
  return (
    <SyncProvider client={client} token={token}>
      <YourApp />
    </SyncProvider>
  )
}

With Auth State


import { useEffect, useState } from 'react'
 
export default function App() {
  const [token, setToken] = useState<string | null>(null)
  
  useEffect(() => {
    // Load stored token on mount
    getStoredToken().then(setToken)
  }, [])
  
  const handleSignIn = (newToken: string) => {
    setToken(newToken)
    // SyncProvider automatically starts sync
  }
  
  const handleSignOut = () => {
    setToken(null)
    // SyncProvider automatically clears data
  }
  
  return (
    <SyncProvider client={client} token={token}>
      <AuthContext.Provider value={{ signIn: handleSignIn, signOut: handleSignOut }}>
        <YourApp />
      </AuthContext.Provider>
    </SyncProvider>
  )
}

With Loading State


export default function App() => {
  const { token, loading } = useAuth()
  
  if (loading) return <Spinner />
  
  return (
    <SyncProvider client={client} token={token}>
      <YourApp />
    </SyncProvider>
  )
}

What SyncProvider Does

Internally, SyncProvider wraps GraphProvider and manages:

GraphBridge initialization - Identity mapping and object graph
Token lifecycle - Watch for token changes
Data clearing - Clear on token change
Sync coordination - Start/stop sync based on token