@dfinity/ii-login-button

@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

Attribute	Use	Default Value
Label	Allows you to customize text on the button	"Login With Internet Identity"
Logo-right	Positions the logo on the right side of the button	false

Events

Event	Purpose
ready	Fires once the component has loaded
login	fires once the user has finished logging in

Properties

Property	Type
authClient	AuthClient
isAuthenticated	boolean
identity	Identity | undefined
principal	Principal | undefined
principalString	string | undefined
accountId	string | undefined