BBC's guide to development
  • General

    • About
    • Tools
    • Git(hub)
    • Showpad
    • Hosting
    • Maintenance
    • Security
    • Go live checklist
  • Front-end development

    • Bundlers
    • CSS/SCSS
    • Javascript
    • Vue
    • PHP
    • Mails
    • Dev Faq
  • Functions
  • Mixins
  • General

    • OOP Structure
  • Component Classes

    • Accordion
    • App
    • Component
    • HighwayApp
    • Popup
    • PNG Sequencer
    • Tab
  • Manager Classes

    • BountListenerMgr
    • Cache
    • Configuration
    • InViewStateMgr
    • Instance Manager
    • Event dispatcher
  • Factories

    • SwiperFactory
  • PDF

    • AssetLoader
    • BasePdfDoc
    • TemplatePdfDoc
    • CustomPdfDoc
  • Utility functions

    • canvas
    • Connection Status
    • css
    • dev
    • placeholder
    • dom
    • fetch
    • json
    • object
    • scroll
    • scrollbar
    • spreadsheets
    • string
    • url
  • General

    • ComponentMgr
    • ThreeJsViewer
  • Components

    • ComponentMgr
    • GltfModel
    • Snappable
    • Socket
    • ThreeJsViewer
    • ThreeJsViewerCamera
  • Loaders

    • ConfigurationSerializer
    • GltfBlockParser
  • Utils

    • CanvasInputAdapter
    • CollisionManager
    • SocketGridExpander
    • blender
    • headless
  • General

    • Troubleshooting
    • Legacy
  • Components

    • AssetBar
    • ConfigGenerator
    • ShowpadApp
  • Managers

    • Assets
    • AppsDb
    • Config
  • Utils

    • Connection Status
    • general
    • showpad-interactive
    • showpad-upload
  • Components

    • Accordion
    • BackButton
    • Breadcrumb
    • ByltButton
    • Hamburger
    • Icon
    • Logo
    • Loader
    • Modal
    • Popup
    • Prompt
    • ProgressBar
    • TextLoader
  • Composables

    • useDebugMode
    • useConnectionStatus
  • Utils

    • dom
    • props
  • General

    • General
    • Tracking
  • Components

    • Accordion
    • ActionButton
    • AssetItem
    • AssetList
    • BackButton
    • ConfigGenButton
    • Logo
    • Media
    • Modal
    • Popup
    • Prompt
    • SPButton
    • SPRouterView
    • SPTrackedRouterLink
    • TextLoader
    • View
  • Composables

    • useConnectionStatus
  • Stores

    • useAppsDbStore
    • useBreadcrumbStore
    • useShowpadAPIStore
    • useShowpadSDKStore
    • useSpConfigStore
    • useSpStore
    • useSpTrackingStore
  • The New Kit

    • General
    • Installation & Usage
    • ACF Blocks
    • PHPCS
    • Functions
    • Vite
    • WP Config
    • Staging Deployment
  • Best Practices

    • Page Structure
    • Fonts/Typography
  • Todo
GitHub
  • General

    • About
    • Tools
    • Git(hub)
    • Showpad
    • Hosting
    • Maintenance
    • Security
    • Go live checklist
  • Front-end development

    • Bundlers
    • CSS/SCSS
    • Javascript
    • Vue
    • PHP
    • Mails
    • Dev Faq
  • Functions
  • Mixins
  • General

    • OOP Structure
  • Component Classes

    • Accordion
    • App
    • Component
    • HighwayApp
    • Popup
    • PNG Sequencer
    • Tab
  • Manager Classes

    • BountListenerMgr
    • Cache
    • Configuration
    • InViewStateMgr
    • Instance Manager
    • Event dispatcher
  • Factories

    • SwiperFactory
  • PDF

    • AssetLoader
    • BasePdfDoc
    • TemplatePdfDoc
    • CustomPdfDoc
  • Utility functions

    • canvas
    • Connection Status
    • css
    • dev
    • placeholder
    • dom
    • fetch
    • json
    • object
    • scroll
    • scrollbar
    • spreadsheets
    • string
    • url
  • General

    • ComponentMgr
    • ThreeJsViewer
  • Components

    • ComponentMgr
    • GltfModel
    • Snappable
    • Socket
    • ThreeJsViewer
    • ThreeJsViewerCamera
  • Loaders

    • ConfigurationSerializer
    • GltfBlockParser
  • Utils

    • CanvasInputAdapter
    • CollisionManager
    • SocketGridExpander
    • blender
    • headless
  • General

    • Troubleshooting
    • Legacy
  • Components

    • AssetBar
    • ConfigGenerator
    • ShowpadApp
  • Managers

    • Assets
    • AppsDb
    • Config
  • Utils

    • Connection Status
    • general
    • showpad-interactive
    • showpad-upload
  • Components

    • Accordion
    • BackButton
    • Breadcrumb
    • ByltButton
    • Hamburger
    • Icon
    • Logo
    • Loader
    • Modal
    • Popup
    • Prompt
    • ProgressBar
    • TextLoader
  • Composables

    • useDebugMode
    • useConnectionStatus
  • Utils

    • dom
    • props
  • General

    • General
    • Tracking
  • Components

    • Accordion
    • ActionButton
    • AssetItem
    • AssetList
    • BackButton
    • ConfigGenButton
    • Logo
    • Media
    • Modal
    • Popup
    • Prompt
    • SPButton
    • SPRouterView
    • SPTrackedRouterLink
    • TextLoader
    • View
  • Composables

    • useConnectionStatus
  • Stores

    • useAppsDbStore
    • useBreadcrumbStore
    • useShowpadAPIStore
    • useShowpadSDKStore
    • useSpConfigStore
    • useSpStore
    • useSpTrackingStore
  • The New Kit

    • General
    • Installation & Usage
    • ACF Blocks
    • PHPCS
    • Functions
    • Vite
    • WP Config
    • Staging Deployment
  • Best Practices

    • Page Structure
    • Fonts/Typography
  • Todo
GitHub
  • showpad-interactive

showpad-interactive

Deprecated

This entire module is deprecated. The OAuth-based functions (getOAuthInstance, triggerOAuthInteractive, initOAuthInteractiveTrigger) do not work with SSO. Use getApiConfig for all new work — it is the only function in this file still recommended for use.

import { getApiConfig } from '@bbc/front-end-kit/js/showpad/utils/showpad-interactive';

getApiConfig()

Retrieves the configuration needed to make direct calls to the Showpad API. Uses Showpad.getShowpadApi() internally.

This is the recommended way to obtain an access token as it supports SSO.

Warning

Requires an active internet connection — will not work in offline mode.

Returns

Promise<{ url: string, accessToken: string }> — resolves with the Showpad API base URL and an OAuth2 access token.

Example

import { getApiConfig } from '@bbc/front-end-kit/js/showpad/utils/showpad-interactive';

const { accessToken } = await getApiConfig();

const globalStore = new AppsDb({
    id: 'my-global-store',
    type: 'global',
    accessToken
});

getOAuthInstance(args = {})

Deprecated

OAuth requires a password prompt and does not work with SSO. Use getApiConfig instead.

Retrieves a Showpad OAuth instance. For admins, returns Showpad.getShowpadInstance(version). For non-admins, triggers an interactive OAuth modal via Showpad.getShowpadOAuthInstanceInteractive.

Parameters

  • clientId (string): OAuth client ID.
  • clientSecret (string): OAuth client secret.
  • allowedEmails (string[]): Allowed email addresses.
  • version (string, default 'v3'): Showpad API version.
  • modalOptions (object, optional): Overrides for the interactive password modal styles and text. Merged over defaults via defaultsDeep. Available keys: containerStyle, formStyle, description, descriptionStyle, inputStyle, buttonStyle.

Returns

Promise — resolves with the OAuth instance.


triggerOAuthInteractive(key, oAuthInstance)

Deprecated

OAuth requires a password prompt and does not work with SSO. Use getApiConfig instead.

Triggers the interactive OAuth flow by probing a global-scoped AppsDB entry. Works around Showpad's behavior of requiring the OAuth prompt before the user reaches the edit page.

Parameters

  • key (string): The AppsDB store identifier.
  • oAuthInstance (object): The OAuth instance from getOAuthInstance.

Returns

Promise<boolean> — true if authentication and the entry update succeeded, false otherwise.


initOAuthInteractiveTrigger(key)

Deprecated

OAuth requires a password prompt and does not work with SSO. Use getApiConfig instead.

Initialises the AppsDB store used by triggerOAuthInteractive. Must be called before triggerOAuthInteractive. Calls db.init() only when the user is online and an admin.

Parameters

  • key (string): The AppsDB store identifier.

Returns

Promise<void> — resolves when initialisation is complete.

External dependencies

  • Experience APP SDK: Showpad.getShowpadApi, Showpad.getShowpadInstance, Showpad.getShowpadOAuthInstanceInteractive, Showpad.isAdmin.
  • AppsDb: Used by the OAuth trigger functions to probe global store access.
  • jsStyleObjectToCss: Converts JS-style objects to CSS strings for modal styling.
Edit this page
Last Updated: 4/27/26, 12:56 PM
Contributors: Nicolas Jaenen