Using Streambird React component

To render the Streambird auth/login component in your React project, simply install the package and configure the Streambird component. For further information on all the Streambird props and definitions, they can be found within the the Streambird SDK Docs.

Installation

npm install @streambird/streambird-react

or

yarn add @streambird/streambird-react

Usage

Streambird

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

1. Public API key
2. Login redirect URL (For Web3 usage: skip if you use autoVerify: true and enable a wallet, which means you will use our hosted verification page.)
3. Registration redirect URL (For Web3 usage: skips if you use autoVerify: true and enable a wallet, which means you will use our hosted verification page.)

The Streambird component will render the Streambird login/auth screen.

import { Streambird } from "@streambird/streambird-react";
import { ErrorData, SuccessData, WalletType } from '@streambird/streambird-js';

const App = () => {
  const streambirdConfig = {
    emailMagicLink: {
      loginRedirectUrl: 'LOGIN_REDIRECT_URL_FROM_PORTAL_GOES_HERE',
      registrationRedirectUrl: 'REGISTRATION_REDIRECT_URL_FROM_PORTAL_GOES_HERE',
      loginExpiresIn: 5,
      registrationExpireIn: 5,
      requiresVerification: false,
      autoVerify: true
    },
    wallet: {
      walletType: WalletType.Ethereum
    },
    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'
    }
  }

  const handleCallbacks = {
    onSuccess: (message: SuccessData) => {
      console.log(message)
    },
    onError: (message: ErrorData) => {
      console.log(message)
    }
  }

  return (
    <div id="login">
      <Streambird
        publicToken={"YOUR_API_KEY_FROM_PORTAL_GOES_HERE"}
        config={streambirdConfig}
        callbacks={handleCallbacks}
      />
    </div>
  );
};

export default App;

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

Streambird React example project

There is also an example of this React project which can be found at the following repository.

Changelog

[1.0.0] - 2020-03-06

• Launch Streambird React component