Javascript
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
<script src="https://js.streambird.io/sdk/dist/latest/streambird.js"></script>
2 - Install Ethers.js
<script src="https://cdn.ethers.io/scripts/ethers-v4.min.js"></script>
3 - Configure Streambird SDK
We add the following code to initialize the Streambird SDK.
<script type="module">
let streambirdProvider;
let streambird = Streambird(STREAMBIRD_PUBLIC_TOKEN, {
headless: true,
networkConfig: {
rpcUrl: 'https://goerli.infura.io/v3/INFURA_API_KEY'
},
emailMagicLinkOptions: {
autoVerify: true
}
});
</script>
In this example, we will be using your PublicToken, which is publishable and safe to expose client-side.
4 - Handle Login
We create a simple login form to allow the user to enter their email and authenticate.
<div>
<form id="form">
<input id="email" name="email" type="email" />
<button type="submit">
Sign in
</button>
</form>
</div>
In the same script as the initialization, we just add click listener to handle the login button when clicked.
document.getElementById('form').addEventListener('submit', handleLogin)
Once the user types in the email and clicks the login button, 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.
async function handleLogin(e) {
e.preventDefault();
const email = new FormData(e.target).get("email");
if(email) {
try {
// magic link email is sent, now waiting for user to verify
let result = await streambird.magicLinks.loginOrCreate(email);
streambirdProvider = new ethers.providers.Web3Provider(streambird.rpcProvider);
// We're connected now!
// Let's get some wallet information
const address = await streambirdProvider.getSigner().getAddress();
const balance = ethers.utils.formatEther(
await streambirdProvider.getBalance(address),
);
// Print the wallet address somewhere
document.getElementById('walletAddress').innerText = address;
// Print the wallet balance somewhere
document.getElementById('walletBalance').innerText = balance + ' ETH';
} catch(error) {
console.log(error);
}
}
};
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.
5 - Perform Web3 functions
Now that you have the Web3 Provider inside the global variable streambirdProvider, you can perform different Web3 operations. Here are some examples:
async function getAddress() {
const signer = streambirdProvider.getSigner();
const address = await signer.getAddress();
// put the address in a control
document.getElementById('walletAddress').innerText = address;
}
Congrats! You now have allowed your user to access their own Ethereum wallet and you have the capability to perform many Web3 functions!
To view a demo, please see navigate to the following example.