Javascript SDK
React SDK Reference
Javascript SDK
React SDK Reference
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
Publishable API Key that identifies your App.
This is the config for emailMagicLink and required if emailMagicLink is enabled in enabledProducts
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.
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.
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.
Determines if verification for the authentication method (email, phone_number) is required before marking the user as active.
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.
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.
Custom styling for the login UI component
The width of the SDK UI component
Determines whether or not to show the header text.
The header text of the SDK UI component and the default text is Sign in or register
The color of the header text and the format is hex e.g. #00FFCC
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”
The color of the header text and the format is hex e.g. #000000
The text color of the login button and the format is hex e.g. #33CC00
The background color of the login button and the format is hex e.g. #3C4D20
The text color of the error messages and the format is hex e.g. #FF0033
Whether or not to show the shadow border around the SDK UI component.
Determine the position of the SDK UI component horizontally. The values include left, center, right
Determine the position of the SDK UI component vertically. The values include top, center, bottom
Determine the position of the body text inside SDK UI component horizontally. The values include left, center, right
Determine the position of the header text inside SDK UI component horizontally. The values include left, center, right
Custom event handler functions for different events triggered within the SDK.
When there is a success event such as when magic link has been sent.
The type of event that has been triggered. For onSuccess(data) callback function, it will be EVENT_SUCCESS.
The public address of the wallet
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.
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.
The type of wallet that this account is linked to e.g. SOL, ETH
Any error that might occur from the SDK or API. This is helpful for doing debug during development and production.
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
}
}