string
import { MoonKey } 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">
<MoonKey
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
string
required
Publishable API Key that identifies your App.
MoonKeyClientProps Object
Hide attributes
Hide attributes
EmailMagicLinkOptions Object
This is the config for emailMagicLink and required if emailMagicLink is enabled in enabledProducts
Show childen attributes
Show childen attributes
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 login (existing user). If the redirect_url is
https://moonkey.fun/authenticate, final url user sees in email will be https://moonkey.fun/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.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://moonkey.fun/authenticate, final url user sees in email will be https://moonkey.fun/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.integer
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.
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.
boolean
Determines if verification for the authentication method (email, phone_number) is required before marking the user as active.
boolean
Determines if the user should receive a magic token that will redirect to a MoonKey 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 MoonKey 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 MoonKey secret api key.
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.
ComponentStyleBase
Custom styling for the login UI component
Show children attributes
Show children attributes
integer
default:"500"
The width of the SDK UI component
boolean
default:"true"
Determines whether or not to show the header text.
string
The header text of the SDK UI component and the default text is
Sign in or registerstring
default:"#000000"
The color of the header text and the format is hex e.g.
#00FFCCThe 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”
string
default:"#333333"
The color of the header text and the format is hex e.g.
#000000string
default:"#FFFFFF"
The text color of the login button and the format is hex e.g.
#33CC00string
default:"#00C475"
The background color of the login button and the format is hex e.g.
#3C4D20string
The text color of the error messages and the format is hex e.g.
#FF0033boolean
default:"true"
Whether or not to show the shadow border around the SDK UI component.
string
default:"center"
Determine the position of the SDK UI component horizontally. The values include
left, center, rightstring
default:"center"
Determine the position of the SDK UI component vertically. The values include
top, center, bottomstring
default:"center"
Determine the position of the body text inside SDK UI component horizontally. The values include
left, center, rightstring
default:"center"
Determine the position of the header text inside SDK UI component horizontally. The values include
left, center, rightObject
Custom event handler functions for different events triggered within the SDK.
Hide childen attributes
Hide childen attributes
function(data) => void
When there is a success event such as when magic link has been sent.
Show responses
Show responses
string
The type of event that has been triggered. For
onSuccess(data) callback function, it will be EVENT_SUCCESS.Show childen attributes
Show childen attributes
string
The public address of the wallet
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.
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.
string
The type of wallet that this account is linked to e.g.
SOL, ETHfunction(data) => void
Any error that might occur from the SDK or API. This is helpful for doing debug during development and production.