Skip to main content

Platform and authentication

This guide explains how QuickplayPlatformProvider initializes platform services, manages access tokens, and exposes auth-aware playback utilities. Use it when you need to understand provider configuration or custom token flows.

Provider responsibilities​

QuickplayPlatformProvider centralizes the service wiring that QuickplayPlayer needs for Quickplay-hosted playback.

  • Initializes platform authorization and content authorization clients
  • Manages access token lifecycle
  • Maintains device identity across sessions
  • Exposes provider state through useQuickplayPlatform
  • Applies optional analytics session configuration

Configure with remote config​

Remote config is the recommended setup. You pass one configUrl, and the provider discovers the required endpoints.

import { QuickplayPlatformProvider } from '@quickplay/player-react';

<QuickplayPlatformProvider
  configUrl="https://api.example.com/config"
  headers={{ 'X-Property-Id': 'property-id' }}
>
  <App />
</QuickplayPlatformProvider>;

With remote config, token initialization is automatic. The provider reads guestFlatURL and creates an anonymous token manager for you.

Configure analytics​

Analytics is optional and can be enabled at provider level. The full AnalyticsConfig structure is:

interface AnalyticsConfig {
  enabled: boolean;
  application: {
    name: string;
    version: string;
    build: string;
  };
  device: {
    platformType: PlatformType; // WEB, IOS, ANDROID, etc.
    customDeviceManufacturer?: string;
    customDeviceName?: string;
  };
  user: {
    id: string;
  };
}
import { PlatformType } from '@quickplay/player-react';

<QuickplayPlatformProvider
  configUrl="https://api.example.com/config"
  analyticsConfig={{
    enabled: true,
    application: { name: 'My Video App', version: '1.0.0', build: '1' },
    device: { platformType: PlatformType.WEB },
    user: { id: 'anonymous' },
  }}
>
  <App />
</QuickplayPlatformProvider>;

Understand token management​

The provider refreshes access tokens in the background once initialized. You do not need manual refresh logic for the default anonymous flow.

Your token endpoint must return this JSON structure:

{
  "data": {
    "token": "eyJhbGciOiJIUzI1NiIs...",
    "expires_in": 3600
  }
}

Implement a custom token manager​

When your app has its own auth system, implement QuickplayAccessTokenManager and pass it to the provider.

import type {
  PlatformAuthorizer,
  PlatformClient,
  QuickplayAccessTokenManager,
} from '@quickplay/player-react';

class MyTokenManager implements QuickplayAccessTokenManager {
  private platformAuthorizer?: PlatformAuthorizer;
  private platformClient?: PlatformClient;

  async getAccessToken(): Promise<string> {
    const response = await fetch('/api/auth/token');
    const payload = await response.json();
    return payload.data.token;
  }

  async clear(): Promise<void> {
    await fetch('/api/auth/logout', { method: 'POST' });
  }

  setPlatformDependencies(
    platformAuthorizer: PlatformAuthorizer,
    platformClient: PlatformClient,
  ): void {
    this.platformAuthorizer = platformAuthorizer;
    this.platformClient = platformClient;
  }
}

Pass your token manager to the provider using the quickplayAccessTokenManager prop:

<QuickplayPlatformProvider
  configUrl="https://api.example.com/config"
  quickplayAccessTokenManager={new MyTokenManager()}
>
  <App />
</QuickplayPlatformProvider>

Handle provider state​

Use useQuickplayPlatform to branch UI during startup, failures, and logout flows.

import { useQuickplayPlatform } from '@quickplay/player-react';

function PlatformStatus() {
  const { isLoading, error, reset } = useQuickplayPlatform();

  if (isLoading) return <div>Loading platform services...</div>;
  if (error)
    return (
      <div>
        <p>{error.message}</p>
        <button onClick={() => reset()}>Retry setup</button>
      </div>
    );

  return null;
}

Next steps​

After provider setup, continue with playback and UI behavior.