> ## 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.

# Javascript

You can easily integrate with MoonKey login flow to provision or retrieve Ethereum wallet access. We keep track of all MoonKey provisioned wallets with the associated user and securely provide access to your users `client-side`.

## 1 - Install MoonKey.js

```html HTML theme={null}
<script src="https://js.moonkey.fun/sdk/dist/latest/streambird.js"></script>
```

## 2 - Install Ethers.js

```html HTML theme={null}
<script src="https://cdn.ethers.io/scripts/ethers-v4.min.js"></script>
```

## 3 - Configure MoonKey SDK

We add the following code to initialize the MoonKey SDK.

```javascript Initialize theme={null}
<script type="module">
  let streambirdProvider;

  let streambird = MoonKey(STREAMBIRD_PUBLIC_TOKEN, {
    headless: true,
    networkConfig: {
      rpcUrl: 'https://goerli.infura.io/v3/INFURA_API_KEY'
    },
    emailMagicLinkOptions: {
      autoVerify: true
    }
  });
</script>
```

<Note>
  In this example, we will be using your `PublicToken`, which is publishable and safe to expose client-side.
</Note>

## 4 - Handle Login

We create a simple login form to allow the user to enter their email and authenticate.

```html HTML theme={null}
<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.

```javascript Login Click theme={null}
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 MoonKey hosted verification page.

```javascript Handle Login + Authentication theme={null}
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 [MoonKey SDK Docs](/sdks).

## 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:

<CodeGroup>
  ```javascript Wallet Address theme={null}
    async function getAddress() {
      const signer = streambirdProvider.getSigner();
      const address = await signer.getAddress();

      // put the address in a control
      document.getElementById('walletAddress').innerText = address;
    }
  ```

  ```javascript Get Balance theme={null}
    async function refreshBalance() {
      const signer = streambirdProvider.getSigner();
      const address = await signer.getAddress();

      const balance = ethers.utils.formatEther(
        await streambirdProvider.getBalance(address),
      );

      // update the balance against control
      document.getElementById('walletBalance').innerText = balance + ' ETH';
    }
  ```

  ```javascript Sign Message theme={null}
  async function signMessage() {
    const signer = streambirdProvider.getSigner();

    // get message from input textbox
    const originalMessage = document.getElementById('inputSignedMessage').value;
    const signedMessage = await signer.signMessage(originalMessage);

    // print the sign message in a control
    document.getElementById('signedMessage').innerText = signedMessage;
  }
  ```
</CodeGroup>

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**](https://demo-sdk-components.vercel.app/headless.htm).