When using the widget with social providers, PingID, or other services requiring you to supply a return URL, add coding similar to this.

Retrieve the value for a continueToken.

/**
 * Event listener for window.load()
 * Listening for a query parameter of `continueToken`
 */
window.addEventListener('load', (event) => {
  var urlParams = new URLSearchParams(window.location.search);
  if (urlParams.get('continueToken')) {
    // flush parameter from window url
    window.history.pushState({}, document.title, window.location.pathname);
    continueWidget('policyId', 'authnflow', urlParams.get('continueToken'))
  }
});

Invoke the widget and continue the flow using the continueToken.

Attention:

The following example won't work unless you add your region-specific information. Replace any instances of <region> with your regional top-level domain:

  • Use .com for North America.
  • Use .ca for Canada.
  • Use .eu for EMEA.
  • Use .asia for APAC.
/**
 * Recreates an instance of the Widget placed on the page,
 * and uses the provided `continueToken` value instead of fetching a new one from DaVinci
 * @param {string} policyId - The flow policy ID for the widget to run
 * @param {string} divId - Location on the page to place the Widget
 * @param {string} continueToken - Value of the `continueToken` query parameter
 */
function continueWidget(policyId, divId, continueToken){
  /**
   * Creates an instance of the Widget with the following:
   * @param {object} props - Properties for the Widget execution
   * @param {object} props.config - Object containing the Widget configuration
   * @param {string} props.config.method - Widget run method { "runFlow" | "continueFlow" }
   * @param {string} props.config.apiRoot - URL of the DaVinci instance for this flow
   * @param {string} props.config.accessToken - @param {string} continueToken
   * @param {string} props.config.companyId - ID of the PingOne environment that contains the flow
   * @param {string} props.config.policyId - Flow policy ID for the Widget to run
   * @param {boolean} props.useModal - Present Widget as a modal, instead of embedded
   * @param {requestCallback} props.successCallback - The callback that handles the Success response
   * @param {requestCallback} props.errorCallback - The callback that handles the Error response
   * @param {requestCallback} props.onCloseModal - The callback that handles the modal close response (`useModal` == true)
   */
  var props= { 
    config: { 
      method: 'continueFlow',
      apiRoot: 'https://auth.pingone.<region>/', 
      accessToken: continueToken,
      companyId: <companyID>, 
      policyId: policyId
    }, 
    useModal: false, 
    successCallback, errorCallback, onCloseModal 
    } 
    /*** Invoke DaVinci Widget ****/ 
    davinci.skRenderScreen(document.getElementById(divId),props)
  }