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
- NPM
- Yarn
<script src="https://js.streambird.io/sdk/dist/latest/streambird.js"></script>
npm install --save @streambird/streambird-js
yarn add @streambird/streambird-js
#
2 - Install Ethers.js- HTML
- NPM
- Yarn
<script src="https://cdn.ethers.io/scripts/ethers-v4.min.js"></script>
npm install --save ethers
yarn add ethers
#
3 - Configure Streambird SDKConfigure 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
- NPM
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);
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.jsIn 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!