Integrate Ethereum Blockchain with the Streambird SDK

You can easily integrate with Streambird login flow to provision or retrieve Ethereum wallet access. We keep track of all Streambird provisioned wallets with the associated user and securely provide access to your users client-side.

1 - Install Streambird.js

HTML

<script src="https://js.streambird.io/sdk/dist/latest/streambird.js"></script>

NPM

npm install --save @streambird/streambird-js

Yarn

yarn add @streambird/streambird-js

2 - Install Ethers.js

HTML

<script src="https://cdn.ethers.io/scripts/ethers-v4.min.js"></script>

NPM

npm install --save ethers

Yarn

yarn add ethers

3 - Configure Streambird SDK

Configure Streambird SDK to provision ETH wallet and be mounted at a html div with element id streambird-sdk. For example,

<div id="streambird-sdk"></div>

note

In this example, we will be using your PublicToken, which is publishable and safe to expose client-side.

HTML

var streambird = Streambird('STREAMBIRD_PUBLIC_TOKEN');var options = {  enabledProducts: ["emailMagicLink"],  elementId: "#streambird-sdk",  config: {    emailMagicLink: {      loginExpiresIn: 10,      registrationExpireIn: 10,      requiresVerification: true,      autoVerify: true,    },    wallet: {      walletType: "ETH"    },  },  callbacks: {    onSuccess: (data) => {      console.log("callback onSuccess", data);    },    onError: (data) => {      console.log("callback onError", data);    }  }};
streambird.init(options);

NPM

import { loadStreambird } from '@streambird/streambird-js';
const Streambird = await loadStreambird();
Streambird('STREAMBIRD_PUBLIC_TOKEN').init(  {    elementId: '#streambird-sdk',    enabledProducts: ['emailMagicLink'],    config: {      emailMagicLink: {        autoVerify: true      },      wallet: {        walletType: 'ETH'      },    },    callbacks: {      onSuccess: (data) => {        console.log("callback onSuccess", data);      },      onError: (data) => {        console.log("callback onError", data);      }    }  });

This will trigger the login or sign up from to be mounted at streambird-sdk div. Once the user types in the email, a magic link will be sent to their email address. Since we enabled the the autoVerify setting by configuring autoVerify: true, which allows the user to verify magic link via a Streambird hosted verification page.

However, if you want to customize this verification page and brand it yourself, you can optionally configure redirect url that your user will redirect to and handle the magic token yourself. Read more about the different parameters and customizations you can do in our Streambird SDK Docs.

4 - Handle Callbacks and get signer using Ethers.js

In the SDK Configuration section, we pass in callback functions to the SDK to handle success and error responses. Once the user clicks on their magic link and verifies, we will automatically trigger the callback function in onSuccess, which will then provide you access to a ethers.js signer with full ethereum wallet access. You can use it to sent transactions against any Ethereum and EVM compatible blockchains. To read more about the full data object you have access to in the callback here under callbacks.

{    ...    callbacks: {      onSuccess: (data) => {
        // We are using the default provider for demo purposes.         // Configure your ethers provider here with your rpc node url or network.        const provider = ethers.getDefaultProvider()         const signer = streambird.getSigner(ethers, provider)
        // Now with access to your signer, you can perform any transaction via ethers.js.        console.log("callback onSuccess", data);      },      onError: (data) => {        console.log("callback onError", data);      }    }    ...}

Congrats! You now have allowed your user to access their own Ethereum wallet with just a few lines of code!