@bloomprotocol/share-kit v7.6.1

Share Kit

Easily allow your users to share their verified personal information directly with your application.

• Share Kit
  • Installation
  • Implementations
  • Usage
    • RequestData
    • TAttestationTypeNames
      • TAttestationTypeNames Subtypes
      • Appending to URL
    • QROptions
    • ButtonOptions
      • ButtonType
• Using Share Kit for BloomID Sign-In

Installation

npm install --save @bloomprotocol/share-kit

Implementations

Usage

renderRequestElement will render a QR code or button based on the client's platform. By default it will render a button when the client is mobile or tablet and on iOS.

import {renderRequestElement, RequestData, QROptions} from '@bloomprotocol/share-kit'

const requestData: RequestData = {...}
const qrOptions: Partial<QROptions> = {
  size: 200,
}
const callbackUrl = 'https://mysite.com/bloom-callback'
const container = document.createElement('div')

const {update, remove} = renderRequestElement({container, requestData, qrOptions, callbackUrl})

// Update the element
update({requestData: newRequestData, qrOptions: newQROptions, callbackUrl: newCallbackUrl})

// Remove the element
remove()

RequestDataAuthentication

Data to be rendered into the RequestQRCode for authentication requests.

RequestDataAttestation

Data to be rendered into the RequestQRCode for attestation sharing requests.

TAttestationTypeNames

TAttestationTypeNames Subtypes

For more information, see the full list of attestation types that are implemented / planned to be implemented.

Appending to URL

The user can share by tapping a button or scanning a QR code, sometimes you'll need to know the difference so the query param share-kit-from is appended to your url.

The param will either be share-kit-from=qr OR share-kit-from=button.

// Input
'https://receive-kit.bloom.co/api/receive'

// Output
'https://receive-kit.bloom.co/api/receive?share-kit-from=qr'

Works if your url already has a query param too!

// Input
'https://receive-kit.bloom.co/api/receive?my-param=',

// Output
'https://receive-kit.bloom.co/api/receive?my-param=&share-kit-from=qr',

Attestation data request:

{
  action: Action.attestation,
  token: '0x8f31e48a585fd12ba58e70e03292cac712cbae39bc7eb980ec189aa88e24d043',
  url: 'https://receive-kit.bloom.co/api/receive',
  org_logo_url: 'https://bloom.co/images/notif/bloom-logo.png',
  org_name: 'Bloom',
  org_usage_policy_url: 'https://bloom.co/legal/terms',
  org_privacy_policy_url: 'https://bloom.co/legal/privacy',
  types: ['full-name', 'phone', 'email'],
}

Authentication/login request:

{
  action: Action.authentication,
  token: '0xabcdee48a585fd12ba58e70e03292cac7fbac958b591baf9cbe9ac157cbadefa',
  url: 'https://receive-kit.bloom.co/api/receive',
  org_logo_url: 'https://bloom.co/images/notif/bloom-logo.png',
  org_name: 'Bloom',
  org_usage_policy_url: 'https://bloom.co/legal/terms',
  org_privacy_policy_url: 'https://bloom.co/legal/privacy',
  types: [],
}

QROptions

NOTE: Does not apply to the rendered button

Display options for the rendered QR code.

ButtonOptions

NOTE: This is only used with the rendered button and not the QR code.

Rendering options for the rendered button.

ButtonType

The type of button to rendered based on it's size

Example:

• Small:

  • Square

    

  • Rounded Square

    

  • Circle

    

  • Squircle

    

• Small Inverted:

  • Small buttons can have thier foreground and background colors swaped with the invert flag

    

• Medium:

  • Log In

    

  • Sign Up

    

  • Connect

    

  • Bloom

    

  • Verify

    

• Large:

  • Log In

    

  • Sign Up

    

  • Connect

    

  • Bloom

    

  • Verify

    

Using Share Kit for BloomID Sign-In

In conjuction with this libary you will use Verify Kit to verify shared data on your server.

Complete examples are available at Bloom Starter.