@dfds-platform/business-components

@dfds-platform/business-components-ts

Installation

Install with npm:

npm install --save @dfds-platform/business-components-ts

Install with yarn:

yarn add @dfds-platform/business-components-ts

Environment

For development you need to create a .env file with they following keys.

key
AUTH_ISSUER
AUTH_CLIENT_ID
CONTENTFUL_SPACE_ID
CONTENTFUL_TOKEN
CONTENTFUL_ENVIRONMENT

Look in .env.development for default values.

Publishing

New releases are created in github which will create a new tag. ADO will pick up on the new tag and publish a version with the that tag using the ci:publish npm script

Login component and AuthProvider configuration example:

Go to example

Developing using yarn link

It can be handy to use developing functionality in the context of an existing app. yarn link can be used in that case.

Getting started

A common problem when using yarn link is that you end of with multiple versions of packages (eg. react). This is because dependencies are resolved upwards from within the symlinked react-components folder.

webpack

If you are using webpack you can try setting resolve.symlinks to false in your webpack.config.js to only resolve dependencies from the apps node_modules folder.

Gatsby

Gatsby uses webpack under the hood, so in order to set resolve.symlinks add the following to the gatsby-node.js file

exports.onCreateWebpackConfig = ({ getConfig, actions, stage }) => {
  const config = getConfig()
  config.resolve.symlinks = false
  actions.replaceWebpackConfig(config)
}

Browser compatibility / polyfill

The auth components use the okta-auth-js library behind the scenes. Compatibility with IE 11 / Edge can be accomplished by adding polyfill/shims for the following objects:

• ES Promise
• Array.from
• TextEncoder
• Object.assign
• UInt8 typed array
• webcrypto (crypto.subtle)

Okta auth js git repository

Example usage with gatsby:

import 'core-js/es/promise'
import 'core-js/es/typed-array/uint8-array'
import 'core-js/features/array/from'
import 'core-js/web/url'
import 'webcrypto-shim'
if (typeof window !== 'undefined' && typeof window.TextEncoder !== 'function') {
  const TextEncodingPolyfill = require('text-encoding')
  window.TextEncoder = TextEncodingPolyfill.TextEncoder
  window.TextDecoder = TextEncodingPolyfill.TextDecoder
}