> ## Documentation Index
> Fetch the complete documentation index at: https://docs.streambird.io/llms.txt
> Use this file to discover all available pages before exploring further.

# React SDK Reference

<RequestExample>
  ```javascript React Example theme={null}
  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;
  ```
</RequestExample>

<ResponseExample>
  ```json OnSuccess Example theme={null}
    {
      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
      }
    }
  ```
</ResponseExample>

## props parameters

<ParamField body="publicToken" type="string" required>
  Publishable API Key that identifies your App.
</ParamField>

<ResponseField name="config" type="MoonKeyClientProps Object">
  <Expandable title="attributes" defaultOpen="true">
    <ResponseField name="emailMagicLink" type="EmailMagicLinkOptions Object">
      This is the config for emailMagicLink and required if emailMagicLink is enabled in enabledProducts

      <Expandable title="childen attributes">
        <ResponseField name="loginRedirectUrl" type="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.
        </ResponseField>

        <ResponseField name="registrationRedirectUrl" type="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.
        </ResponseField>

        <ResponseField name="loginExpiresIn" type="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.
        </ResponseField>

        <ResponseField name="registrationExpireIn" type="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.
        </ResponseField>

        <ResponseField name="requiresVerification" type="boolean">
          Determines if verification for the authentication method (email, phone\_number) is required before marking the user as active.
        </ResponseField>

        <ResponseField name="autoVerify" type="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.
        </ResponseField>
      </Expandable>
    </ResponseField>

    <ResponseField name="wallet" type="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.

      <Expandable title="children attributes">
        <ResponseField name="walletType" type="string">
          Determines what type of wallet to login to or provision on the fly if no wallet is found. Possible values: `ETH`, `SOL`.
        </ResponseField>

        <ResponseField name="network" type="string">
          Determines the RPC network to use (eg. `mainnet`, `testnet`, `goerli`, etc)
        </ResponseField>
      </Expandable>
    </ResponseField>

    <ResponseField name="componentStyle" type="ComponentStyleBase">
      Custom styling for the login UI component

      <Expandable title="children attributes">
        <ResponseField name="width" type="integer" default="500">
          The width of the SDK UI component
        </ResponseField>

        <ResponseField name="showHeaderText" type="boolean" default="true">
          Determines whether or not to show the header text.
        </ResponseField>

        <ResponseField name="headerText" type="string">
          The header text of the SDK UI component and the default text is `Sign in or register`
        </ResponseField>

        <ResponseField name="headerTextColor" type="string" default="#000000">
          The color of the header text and the format is hex e.g. `#00FFCC`
        </ResponseField>

        <ResponseField name="bodyText" type="string">
          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"
        </ResponseField>

        <ResponseField name="bodyTextColor" type="string" default="#333333">
          The color of the header text and the format is hex e.g. `#000000`
        </ResponseField>

        <ResponseField name="buttonTextColor" type="string" default="#FFFFFF">
          The text color of the login button and the format is hex e.g. `#33CC00`
        </ResponseField>

        <ResponseField name="buttonColor" type="string" default="#00C475">
          The background color of the login button and the format is hex e.g. `#3C4D20`
        </ResponseField>

        <ResponseField name="errMsgColor" type="string">
          The text color of the error messages and the format is hex e.g. `#FF0033`
        </ResponseField>

        <ResponseField name="showContainerBorder" type="boolean" default="true">
          Whether or not to show the shadow border around the SDK UI component.
        </ResponseField>

        <ResponseField name="containerXAlignment" type="string" default="center">
          Determine the position of the SDK UI component horizontally. The values include `left`, `center`, `right`
        </ResponseField>

        <ResponseField name="containerYAlignment" type="string" default="center">
          Determine the position of the SDK UI component vertically. The values include `top`, `center`, `bottom`
        </ResponseField>

        <ResponseField name="bodyTextPosition" type="string" default="center">
          Determine the position of the body text inside SDK UI component horizontally. The values include `left`, `center`, `right`
        </ResponseField>

        <ResponseField name="headerTextPosition" type="string" default="center">
          Determine the position of the header text inside SDK UI component horizontally. The values include `left`, `center`, `right`
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="callbacks" type="Object">
  Custom event handler functions for different events triggered within the SDK.

  <Expandable title="childen attributes" defaultOpen="true">
    <ResponseField name="onSuccess" type="function(data) => void">
      When there is a success event such as when magic link has been sent.

      <Expandable title="responses">
        <ResponseField name="eventType" type="string">
          The type of event that has been triggered. For `onSuccess(data)` callback function, it will be `EVENT_SUCCESS`.

          <Expandable title="childen attributes">
            <ResponseField name="publicAddress" type="string">
              The public address of the wallet
            </ResponseField>

            <ResponseField name="sessionJwt" type="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.
            </ResponseField>

            <ResponseField name="sessionToken" type="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.
            </ResponseField>

            <ResponseField name="walletType" type="string">
              The type of wallet that this account is linked to e.g. `SOL`, `ETH`
            </ResponseField>
          </Expandable>
        </ResponseField>
      </Expandable>
    </ResponseField>

    <ResponseField name="onError" type="function(data) => void">
      Any error that might occur from the SDK or API. This is helpful for doing debug during development and production.
    </ResponseField>
  </Expandable>
</ResponseField>