Skip to content

Authentication

React Native authentication follows the same two-layer model as native mobile integrations.

Overview

LayerWhereWhat it does
Device identifierReact Native appIdentifies the device to the backend via X-TrainingKit-Device header
TrainingKit tokenBackend → app → SDKAuthorizes the native workout session; included in the GraphQL session payload

For the full authentication contracts see:

Device identifier

The package exposes deviceIdentifier() as a synchronous function. It returns the stable TrainingKit device ID from the native SDK on both iOS and Android.

ts
import { deviceIdentifier } from 'trainingkit-reactnative'

const id = deviceIdentifier()

Pass this value as the X-TrainingKit-Device header on every GraphQL request so the backend can associate the session with the correct device.

Wiring the device identifier into Apollo

The recommended place to set the header is in the Apollo HttpLink at client construction time:

ts
import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
import { deviceIdentifier } from 'trainingkit-reactnative'

const client = new ApolloClient({
  link: new HttpLink({
    uri: 'https://your-graphql-endpoint/graphql',
    headers: {
      'X-TrainingKit-Device': deviceIdentifier(),
    },
  }),
  cache: new InMemoryCache(),
})

deviceIdentifier() is synchronous; calling it at client construction time is safe and does not require any async setup.

TrainingKit token flow

  1. The app sends X-TrainingKit-Device with each GraphQL request.
  2. The backend returns the workout session payload, which includes trainingKitToken.
  3. The app calls launchWorkout(session), passing the full session object.
  4. The package extracts trainingKitToken from the session and forwards it to the native SDK.

The app does not need to handle or store trainingKitToken separately; it is passed through as part of the session object.