React SDK Reference - streambird docs

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
    },
    componentStyle: {
      width: 500,
      showHeaderText: true,
      headerText: 'Sign in or register',
      headerTextColor: '',
      bodyText: 'Please enter your email address',
      bodyTextColor: '#333333',
      buttonTextColor: '#FFFFFF',
      buttonColor: '',
      errMsgColor: '',
      showContainerBorder: true,
      containerXAlignment: 'center',
      containerYAlignment: 'center',
      bodyTextPosition: 'center',
      headerTextPosition: 'center'
    },
    wallet: {
      walletType: 'ETH',
      network: 'https://goerli.infura.io/v3/INFURA_API_KEY'
    }
  }

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

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

export default App;

  {
    eventType: 'EVENT_SUCCESS', 
    eventData: {
      publicAddress: "xvPgUXBKTPUBrBdZWHajG17nWM59Zmx7s5NhXXXXXXX",
      sessionJwt: "eyJhbGciOiJ...",
      sessionToken: "TqXsQbXoTxKvjRAqVyLjrz8cRdQRM4enTUh9ixkoeClcgldtzs4LUxEB1XXXXXXX",
      walletType: "SOL",
      public_address: "xvPgUXBKTPUBrBdZWHajG17nWM59Zmx7s5NhXXXXXXX", // legacy field
      session_token: "TqXsQbXoTxKvjRAqVyLjrz8cRdQRM4enTUh9ixkoeClcgldtzs4LUxEB1XXXXXXX", // legacy field
      wallet_type: "SOL" // legacy field
    }
  }

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
    },
    componentStyle: {
      width: 500,
      showHeaderText: true,
      headerText: 'Sign in or register',
      headerTextColor: '',
      bodyText: 'Please enter your email address',
      bodyTextColor: '#333333',
      buttonTextColor: '#FFFFFF',
      buttonColor: '',
      errMsgColor: '',
      showContainerBorder: true,
      containerXAlignment: 'center',
      containerYAlignment: 'center',
      bodyTextPosition: 'center',
      headerTextPosition: 'center'
    },
    wallet: {
      walletType: 'ETH',
      network: 'https://goerli.infura.io/v3/INFURA_API_KEY'
    }
  }

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

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

export default App;

  {
    eventType: 'EVENT_SUCCESS', 
    eventData: {
      publicAddress: "xvPgUXBKTPUBrBdZWHajG17nWM59Zmx7s5NhXXXXXXX",
      sessionJwt: "eyJhbGciOiJ...",
      sessionToken: "TqXsQbXoTxKvjRAqVyLjrz8cRdQRM4enTUh9ixkoeClcgldtzs4LUxEB1XXXXXXX",
      walletType: "SOL",
      public_address: "xvPgUXBKTPUBrBdZWHajG17nWM59Zmx7s5NhXXXXXXX", // legacy field
      session_token: "TqXsQbXoTxKvjRAqVyLjrz8cRdQRM4enTUh9ixkoeClcgldtzs4LUxEB1XXXXXXX", // legacy field
      wallet_type: "SOL" // legacy field
    }
  }

props parameters

publicToken

string

required

Publishable API Key that identifies your App.

config

StreambirdClientProps Object

Hide attributes

emailMagicLink

EmailMagicLinkOptions Object

This is the config for emailMagicLink and required if emailMagicLink is enabled in enabledProducts

Show childen attributes

The base url we will use to construct the final login magic link and send to the user via email if this is a login (existing user). If the redirect_url is https://streambird.io/authenticate, final url user sees in email will be https://streambird.io/authenticate?token=AUTOGENERATED_MAGIC_TOKEN. We will redirect to your app in this url and your app should handle and parse the token parameter and allow the user log in.

registrationRedirectUrl

string

The base url we will use to construct the final login magic link and send to the user via email if this is a registration (new user). If the redirect_url is https://streambird.io/authenticate, final url user sees in email will be https://streambird.io/authenticate?token=AUTOGENERATED_MAGIC_TOKEN. We will redirect to your app in this url and your app should handle and parse the token parameter and register the user.

Expiration time of the magic link in minutes for login (when an existing user is found) Must be between 5 to 10080 minutes (7 days), defaults to 60 minutes.

registrationExpireIn

integer

Expiration time of the magic link in minutes for registration (when a new user is created). Must be between 5 to 10080 minutes (7 days), defaults to 60 minutes.

requiresVerification

boolean

Determines if verification for the authentication method (email, phone_number) is required before marking the user as active.

autoVerify

boolean

Determines if the user should receive a magic token that will redirect to a Streambird hosted verify token page instead of the redirect url specified by the App owner. If set to true, the user will receive an encrypted token and Streambird will handle the token verification on behalf of the App in our hosted page.

However, if set to false (by default), user will be redirected to the redirect url and the App must handle the token in magic link in their backend using the Streambird secret api key.

wallet

Web3NetworkConfig Object

Determines what kind of wallet login to perform, if we cannot find any wallets for a new or existing user, we will provision a wallet of the specified type for this user.

Show children attributes

walletType

string

Determines what type of wallet to login to or provision on the fly if no wallet is found. Possible values: ETH, SOL.

network

string

Determines the RPC network to use (eg. mainnet, testnet, goerli, etc)

componentStyle

ComponentStyleBase

Custom styling for the login UI component

Show children attributes

width

integer

default:"500"

The width of the SDK UI component

showHeaderText

boolean

default:"true"

Determines whether or not to show the header text.

headerText

string

The header text of the SDK UI component and the default text is Sign in or register

headerTextColor

string

default:"#000000"

The color of the header text and the format is hex e.g. #00FFCC

bodyText

string

The main text in the SDI UI component which sits below the header text and above the email login input. The default text is: “Please enter your email address”

bodyTextColor

string

default:"#333333"

The color of the header text and the format is hex e.g. #000000

buttonTextColor

string

default:"#FFFFFF"

The text color of the login button and the format is hex e.g. #33CC00

buttonColor

string

default:"#00C475"

The background color of the login button and the format is hex e.g. #3C4D20

errMsgColor

string

The text color of the error messages and the format is hex e.g. #FF0033

showContainerBorder

boolean

default:"true"

Whether or not to show the shadow border around the SDK UI component.

containerXAlignment

string

default:"center"

Determine the position of the SDK UI component horizontally. The values include left, center, right

containerYAlignment

string

default:"center"

Determine the position of the SDK UI component vertically. The values include top, center, bottom

bodyTextPosition

string

default:"center"

Determine the position of the body text inside SDK UI component horizontally. The values include left, center, right

headerTextPosition

string

default:"center"

Determine the position of the header text inside SDK UI component horizontally. The values include left, center, right

callbacks

Object

Custom event handler functions for different events triggered within the SDK.

Hide childen attributes

onSuccess

function(data) => void

When there is a success event such as when magic link has been sent.

Show responses

eventType

string

The type of event that has been triggered. For onSuccess(data) callback function, it will be EVENT_SUCCESS.

Show childen attributes

publicAddress

string

The public address of the wallet

sessionJwt

string

The session JWT token linked to this user’s account. Use this session token to authenticate and verify someone. You can either use the JWT or the session token but its a matter of preference. They will differ by the Authorization header syntax.

sessionToken

string

The session token linked to this user’s account. Use this session token to authenticate and verify someone. You can either the session token or the JWT but its a matter of preference. They will differ by the Authorization header syntax.

walletType

string

The type of wallet that this account is linked to e.g. SOL, ETH

onError

function(data) => void

Any error that might occur from the SDK or API. This is helpful for doing debug during development and production.

SDK Callback vs Promise iOS SDK

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
    },
    componentStyle: {
      width: 500,
      showHeaderText: true,
      headerText: 'Sign in or register',
      headerTextColor: '',
      bodyText: 'Please enter your email address',
      bodyTextColor: '#333333',
      buttonTextColor: '#FFFFFF',
      buttonColor: '',
      errMsgColor: '',
      showContainerBorder: true,
      containerXAlignment: 'center',
      containerYAlignment: 'center',
      bodyTextPosition: 'center',
      headerTextPosition: 'center'
    },
    wallet: {
      walletType: 'ETH',
      network: 'https://goerli.infura.io/v3/INFURA_API_KEY'
    }
  }

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

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

export default App;

  {
    eventType: 'EVENT_SUCCESS', 
    eventData: {
      publicAddress: "xvPgUXBKTPUBrBdZWHajG17nWM59Zmx7s5NhXXXXXXX",
      sessionJwt: "eyJhbGciOiJ...",
      sessionToken: "TqXsQbXoTxKvjRAqVyLjrz8cRdQRM4enTUh9ixkoeClcgldtzs4LUxEB1XXXXXXX",
      walletType: "SOL",
      public_address: "xvPgUXBKTPUBrBdZWHajG17nWM59Zmx7s5NhXXXXXXX", // legacy field
      session_token: "TqXsQbXoTxKvjRAqVyLjrz8cRdQRM4enTUh9ixkoeClcgldtzs4LUxEB1XXXXXXX", // legacy field
      wallet_type: "SOL" // legacy field
    }
  }

Frontend SDKs

​props parameters

props parameters