@last1id/login-button

Accessible hosted button wrapper for Last1 ID login.

Install

npm install @last1id/[email protected] @last1id/[email protected]

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