@dfinity/IILoginButton

To install, run npm install @dfinity/ii-login-button

IILoginButton

Implements a standardized login button for Internet Identity

The simplest way to use this component is to import the auto.js file in your application

<script type="module" src="@dfinity/ii-login-button/auto.js"></script>

In Javascript, you can import the component and its types with

import { IILoginButton, defineComponent } from "@dfinity/ii-login-button";
defineComponent();

Example

in your application

<ii-login-button></ii-login-button>

Once the component is loaded, you can listen for the ready event, and set up more advanced configuration options. A common option would be to set loginOptions, looking like this:

const loginButton = document.querySelector("ii-login-button");

const prepareLoginButton = async (loginCallback) => {
  if (!customElements.get("ii-login-button")) {
    customElements.define("ii-login-button", LoginButton);
  }

  // Once the login button is ready, we can configure it to use Internet Identity
  loginButton?.addEventListener("ready", async (event) => {
    if (
      window.location.host.includes("localhost") ||
      window.location.host.includes("127.0.0.1")
    ) {
      loginButton.configure({
        loginOptions: {
          identityProvider: `http://${process.env.CANISTER_ID_INTERNET_IDENTITY}.localhost:4943`,
        },
      });
    }
  });

  loginButton?.addEventListener("login", async (event) => {
    const identity = loginButton?.identity;
    window.identity = identity;
    loginCallback();
  });
};

document.addEventListener("DOMContentLoaded", async () => {
  await prepareLoginButton(() => {
    // Do something after login
  });
});

Supported attributes

Events

Properties