Using Streambird SDK as an ES Module

The Streambird SDK can be used as an ES module. There might be non React projects whereby you can use the Streambird SDK with a Javascript bundler. If this is the case, use the Streambird SDK.

For basic or standard HTML projects where you want to use the Streambird SDK then you can include the source directly. Please refer to this Javascipt source file if you want to include it in your script src path.

Installation

npm install @streambird/streambird-js

Usage

loadStreambird

Before initiating and loading Streambird, make sure you have the following setup on the Streambird portal. Without these settings, the SDK will not work.

1. Public API key
2. Login redirect URL
3. Registration redirect URL

The loadStreambird function will initiate a Streambird object and will return a Promise. The newly created Streambird object can be accessed via window.Streambird once the Streambird SDK has been loaded.

import { loadStreambird } from '@streambird/streambird-js';

const Streambird = await loadStreambird();

Streambird('public_api_key').init(
  {
    elementId: "magicLinkDiv",
    enabledProducts: ['emailMagicLink'],
    config: {
      emailMagicLink: {
        loginRedirectUrl: 'Login_redirect_URL_setup_on_the_portal',
        registrationRedirectUrl: 'Registration_redirect_URL_setup_on_the_portal',
        loginExpiresIn: 5,
        registrationExpireIn: 5,
        requiresVerification: false,
        autoVerify: true
      },
      wallet: {
        walletType: 'ETH'
      },
      componentStyle: {
        width: 500,
        showHeaderText: true,
        headerText: 'Welcome to passbird',
        headerTextColor: '',
        bodyText: 'Please enter your email address and sign up with a magic link to start using decentralized applications.',
        bodyTextColor: '#333333',
        buttonTextColor: '#FFFFFF',
        buttonColor: '',
        errMsgColor: '',
        showContainerBorder: true,
        containerYAlignment: 'middle',
        containerXAlignment: 'center',
        headerTextPosition: 'center',
        bodyTextPosition: 'center'
      }
    },
    callbacks: {
      onSuccess: (data) => {
        console.log("callback onSuccess", data);
      },
      onError: (data) => {
        console.log("callback onError", data);
      }
    }
  }
);

For detailed description and information on how to use the Streambird SDK, please refer to the SDK docs.

Changelog

[1.0.4] - 2022-4-27

• Added getSigner for Ethereum

[1.0.3] - 2022-4-23

• New componentStyle props

  • showContainerBorder: true|false
  • containerYAlignment: top|middle|bottom
  • containerXAlignment: left|center|right

• Removed componentStyle props

  • showContainer
  • containerPosition

[1.0.2] - 2022-2-21

• New componentStyle props
  • showContainer: true|false
  • containerPosition: left|center|right
  • headerTextPosition: left|center|right

[1.0.1] - 2022-2-21

• Minor fixes

[1.0.0] - 2022-2-21

• Launch Streambird SDK as ES module