Skip to main content

​
Overview

The WellPlayedProvider is the root component that wraps your application and provides access to WellPlayed’s authentication, GraphQL client, and API services.

​
Basic Setup

Wrap your application with the WellPlayedProvider component: 
import { WellPlayedProvider } from '@well-played.gg/react-sdk';
import { RouterProvider } from 'react-router-dom';

const App = () => {
  return (
    <WellPlayedProvider
      organizationId="your-organization-id"
      wpAppConfig={{
        scope: "offline_access",
        client_id: "your-app-client-id",
        redirect_uri: `${window.location.protocol}//${window.location.host}/login`,
      }}
    >
      <RouterProvider router={router} />
    </WellPlayedProvider>
  );
};
The redirect_uri must match exactly with the redirect URI configured in your App Client settings on the WellPlayed Console.

​
Configuration Props

​
Required Props

​
organizationId
string
required
Your organization ID from the WellPlayed Console.
​
wpAppConfig
object
required
Application configuration object containing authentication settings.

​
Optional Props

​
oidcConfig
object
Additional OIDC configuration options. This extends the OidcProviderProps from @axa-fr/react-oidc.
​
clientConfig
object
GraphQL client configuration options (excluding token and organizationId which are managed automatically).
​
apiBaseUrl
ApiBaseUrl
Custom API base URL. Defaults to "well-played.gg".
​
typedClientConfig
object
Configuration for the typed API client (excluding url, headers, batch, keepalive, and method which are managed automatically).

​
useWellPlayed Hook

Access WellPlayed context anywhere in your application: 
import { useWellPlayed } from '@well-played.gg/react-sdk';

const MyComponent = () => {
  const { organizationId, apiClient, typedClient, accessToken } = useWellPlayed();
  
  // Use the context values
  return <div>Organization: {organizationId}</div>;
};

​
Return Values

​
organizationId
string
Your organization ID.
​
apiClient
ApolloClient<NormalizedCacheObject>
Configured Apollo Client instance for GraphQL queries.
​
typedClient
ReturnType<typeof createTypedClient>
Typed API client for making REST API calls.
​
accessToken
string | undefined
Current OIDC access token (if user is authenticated).
The useWellPlayed hook must be used within a component that’s wrapped by WellPlayedProvider, otherwise it will throw an error.

​
Advanced Configuration

​
Custom API Base URL

For testing or custom deployments: 
<WellPlayedProvider
  organizationId="your-org-id"
  wpAppConfig={{
    scope: "offline_access",
    client_id: "your-client-id",
    redirect_uri: "https://your-app.com/login",
  }}
  apiBaseUrl="custom-domain.com"
>
  {children}
</WellPlayedProvider>

​
With Custom OIDC Configuration

<WellPlayedProvider
  organizationId="your-org-id"
  wpAppConfig={{
    scope: "offline_access",
    client_id: "your-client-id",
    redirect_uri: "https://your-app.com/login",
  }}
  oidcConfig={{
    configuration: {
      // Additional OIDC configuration
      silent_redirect_uri: "https://your-app.com/silent-renew",
    },
  }}
>
  {children}
</WellPlayedProvider>

​
Source Reference

The provider implementation can be found in:
  • wp.provider.tsx:135-151 - WellPlayedProvider component
  • wp.provider.tsx:86-94 - useWellPlayed hook
  • wp.provider.tsx:20-75 - Type definitions

Build docs developers (and LLMs) love

Get started for freeTalk to us