@last1id/login-button¶

Accessible hosted button wrapper for Last1 ID login.

Install¶

npm install @last1id/login-button@0.1.3 @last1id/sdk@0.3.0

Usage¶

import { Last1LoginButton } from "@last1id/login-button";

export function SignIn() {
  return (
    <Last1LoginButton
      issuer="https://auth.last1.id"
      clientId={process.env.NEXT_PUBLIC_LAST1_CLIENT_ID!}
      redirectUri="https://app.example.com/auth/callback"
      scopes={["openid", "email", "profile", "offline_access"]}
      iconSrc="https://last1.id/last1-mark.png"
    />
  );
}

By default, the button renders: - Last1 mark icon (https://last1.id/last1-mark.png, 18px) - Bundled PNG fallback if the CDN icon cannot load - "Continue with Last1 ID" label - Accessible rounded outlined button styling (drop-in ready)

Self-host the mark from the package:

import { Last1LoginButton, DEFAULT_LAST1_ICON_SRC } from "@last1id/login-button";

// Option A: CDN default (recommended)
<Last1LoginButton issuer="..." clientId="..." redirectUri="..." />

// Option B: copy assets/last1-mark-32.png into your public/ folder
<Last1LoginButton iconSrc="/integrations/logos/last1-mark.png" ... />

You can customize with:

iconSrc - custom icon URL (defaults to DEFAULT_LAST1_ICON_SRC)
showIcon - hide icon when set to false
className - override default button styling
label - override button text