Console SSO Login
blockauthSplit-screen developer console authentication suite featuring brand telemetry showcases, OAuth providers, passkey biometric sign-in, and automatic enterprise SAML SSO domain detection.
Installation
$pnpm dlx shadcn@latest add https://uipkge.dev/r/lit/login-01.json$npx shadcn@latest add https://uipkge.dev/r/lit/login-01.json$yarn dlx shadcn@latest add https://uipkge.dev/r/lit/login-01.json$bunx shadcn@latest add https://uipkge.dev/r/lit/login-01.jsonManifest:
https://uipkge.dev/r/lit/login-01.jsonInstalls to:src/uip/blocks/login-01/Variants
Loading interactive previews…
Loading interactive previews…
Schema
Type aliases exported from this item's source. Use these to shape the data you pass in.
LoginSubmitPayloadinterface LoginSubmitPayload {
method: LoginMethod
email: string
password?: string
domain?: string
}HTMLElementTagNameMapinterface HTMLElementTagNameMap {
'uip-login-01': UipLogin01
}
}Files installed (1)
src/uip/blocks/login-01/login-01.ts18.2 kB
import { LitElement, css, html, nothing } from 'lit' import { ArrowRight, CheckCircle2, Fingerprint, KeyRound, Lock, Mail, ShieldCheck, Terminal, Zap } from 'lucide' import { cn } from '../../lib/utils' import { tailwind } from '../../lib/styles' import { ThemeController } from '../../lib/theme' import { icon } from '../../lib/icon' // Side-effect imports: register the composed elements for standalone use // (consumers who install only this block still get working primitives). import '../../components/badge/badge' import '../../components/button/button' import '../../components/input/input' import type { UipInput } from '../../components/input/input' import '../../components/label/label' import '../../components/separator/separator' import '../../components/tabs/tabs' export type LoginMethod = 'password' | 'passkey' | 'sso' export interface LoginSubmitPayload { method: LoginMethod email: string password?: string domain?: string } /** * <uip-login-01> — the registry Login01 block as a web component. * * Class strings are React's Login01 verbatim. React state (useState) becomes * @state fields; `onSubmit` (payload) / `onForgotPassword` / `onSignUp` / * `onOAuth` (provider) become `submit` / `forgot-password` / `sign-up` / * `oauth` CustomEvents (bubbles, composed). The Mail/Lock field icons move * from React's absolute overlay into <uip-input>'s prefix slot (same visual * result, no overlay positioning to maintain). */ export class UipLogin01 extends LitElement { static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true } // :host display can't be a utility class (the host has no template of its own). static styles = [tailwind, css`:host { display: block; }`] static properties = { authMethod: { state: true }, email: { state: true }, password: { state: true }, ssoDomain: { state: true }, isLoading: { state: true }, } private authMethod: LoginMethod = 'password' private email = '' private password = '' private ssoDomain = '' private isLoading = false private timer?: number constructor() { super() new ThemeController(this) } connectedCallback() { super.connectedCallback() this.setAttribute('data-uipkge', '') this.setAttribute('data-slot', 'login-01') } disconnectedCallback() { super.disconnectedCallback() if (this.timer) window.clearTimeout(this.timer) } private get isEnterpriseEmail(): boolean { const parts = this.email.split('@') if (parts.length < 2) return false const domain = parts[1].toLowerCase() return !!domain && !['gmail.com', 'yahoo.com', 'hotmail.com', 'outlook.com', 'icloud.com'].includes(domain) && domain.includes('.') } private handleSubmit(e: Event) { e.preventDefault() if (this.isLoading) return this.isLoading = true this.timer = window.setTimeout(() => { this.isLoading = false this.dispatchEvent( new CustomEvent<LoginSubmitPayload>('submit', { detail: { method: this.authMethod, email: this.email, password: this.password, domain: this.ssoDomain }, bubbles: true, composed: true, }), ) }, 800) } render() { return html` <div data-slot="login-01" class=${cn('bg-background grid min-h-screen w-full grid-cols-1 lg:grid-cols-12')}> <div class="border-border bg-muted/30 relative hidden flex-col justify-between overflow-hidden border-r p-12 lg:col-span-6 lg:flex xl:col-span-7" > <div class="relative z-10 flex items-center gap-2.5"> <div class="bg-primary text-primary-foreground flex size-9 items-center justify-center rounded-lg font-bold shadow-xs"> ${icon(Zap, 'zap', 'size-5 fill-current')} </div> <span class="text-foreground text-lg font-bold tracking-tight">UIPKGE Studio</span> </div> <div class="relative z-10 my-auto max-w-xl space-y-6"> <div class="space-y-3"> <div class="border-primary/20 bg-primary/10 text-primary inline-flex items-center gap-2 rounded-full border px-3 py-1 font-mono text-xs font-semibold" > ${icon(Terminal, 'terminal', 'size-3.5')} <span>Developer Cloud Console v4.8</span> </div> <h1 class="text-foreground text-3xl leading-tight font-bold tracking-tight xl:text-4xl"> The dual-framework UI registry for mission-critical software. </h1> <p class="text-muted-foreground text-sm leading-relaxed"> Own your source code without runtime dependency lock-in. Built with Tailwind CSS v4, OKLCH color spaces, and headless accessibility primitives. </p> </div> <div class="border-border bg-card overflow-hidden rounded-xl border shadow-lg"> <div class="border-border bg-muted/40 flex items-center justify-between border-b px-4 py-2.5"> <div class="flex items-center gap-2"> <span class="bg-destructive/60 size-2.5 rounded-full"></span> <span class="bg-warning/60 size-2.5 rounded-full"></span> <span class="bg-success/60 size-2.5 rounded-full"></span> <span class="text-muted-foreground ml-2 font-mono text-xs">auth-session-init.ts</span> </div> <uip-badge variant="outline" class="font-mono text-xs">mTLS Encrypted</uip-badge> </div> <div class="bg-card/90 space-y-1 p-4 font-mono text-xs leading-relaxed"> <p class="text-muted-foreground">// Validating SAML 2.0 / WebAuthn identity assertion</p> <p class="text-foreground"> <span class="text-primary font-bold">const</span> session = <span class="text-primary font-bold">await</span> auth.<span class="text-foreground font-semibold" >verifyCredentials</span >({ </p> <p class="text-foreground pl-4">tenant: <span class="text-success">'cyberdyne-systems.internal'</span>,</p> <p class="text-foreground pl-4"> protocols: [<span class="text-success">'webauthn-fido2'</span>, <span class="text-success">'saml2-okta'</span>] </p> <p class="text-foreground">});</p> <p class="text-success flex items-center gap-1.5 pt-1 font-medium"> ${icon(CheckCircle2, 'circle-check', 'size-3.5')} <span>✓ Cryptographic identity handshaking verified (0.8ms)</span> </p> </div> </div> <div class="border-border grid grid-cols-3 gap-4 border-t pt-4 text-xs"> <div> <p class="text-foreground font-mono text-lg font-bold">99.95%</p> <p class="text-muted-foreground">Auth Uptime SLA</p> </div> <div> <p class="text-foreground font-mono text-lg font-bold">FIDO2</p> <p class="text-muted-foreground">Passkey Standard</p> </div> <div> <p class="text-foreground font-mono text-lg font-bold">SOC 2 Type II</p> <p class="text-muted-foreground">Certified Cloud</p> </div> </div> </div> <div class="text-muted-foreground relative z-10 flex items-center justify-between text-xs"> <span>© 2026 UIPKGE Inc.</span> <div class="flex gap-4"> <a href="#" class="hover:text-foreground transition-colors">Privacy Policy</a> <a href="#" class="hover:text-foreground transition-colors">Terms of Service</a> <a href="#" class="hover:text-foreground transition-colors">Trust Center</a> </div> </div> </div> <div class="flex flex-col items-center justify-center p-6 sm:p-12 lg:col-span-6 xl:col-span-5"> <div class="w-full max-w-md space-y-6"> <div class="mb-4 flex items-center gap-2 lg:hidden"> <div class="bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-lg font-bold shadow-xs"> ${icon(Zap, 'zap', 'size-4 fill-current')} </div> <span class="text-foreground font-bold tracking-tight">UIPKGE Studio</span> </div> <div class="space-y-2"> <h2 class="text-foreground text-2xl font-bold tracking-tight">Sign in to console</h2> <p class="text-muted-foreground text-xs">Enter your credentials, passkey or company Single Sign-On.</p> </div> <div class="grid grid-cols-2 gap-3"> <uip-button variant="outline" type="button" class="h-10 gap-2 text-xs font-semibold" @click=${() => this.dispatchEvent(new CustomEvent('oauth', { detail: 'github', bubbles: true, composed: true }))} > <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" width="16" height="16"> <path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z" /> </svg> <span>GitHub</span> </uip-button> <uip-button variant="outline" type="button" class="h-10 gap-2 text-xs font-semibold" @click=${() => this.dispatchEvent(new CustomEvent('oauth', { detail: 'google', bubbles: true, composed: true }))} > <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"> <path fill="#4285F4" d="M22.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.32z" /> <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.66-2.25 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" /> <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z" /> <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z" /> </svg> <span>Google</span> </uip-button> </div> <div class="relative"> <uip-separator></uip-separator> <span class="bg-background text-muted-foreground absolute -top-2.5 left-1/2 -translate-x-1/2 px-3 font-mono text-xs tracking-wider uppercase" >Or continue with</span > </div> <uip-tabs class="w-full" value=${this.authMethod} @value-change=${(e: CustomEvent<{ value: string }>) => { this.authMethod = e.detail.value as LoginMethod }} > <span slot="trigger" data-value="password" class="text-xs font-medium">Password</span> <span slot="trigger" data-value="passkey" class="text-xs font-medium">Passkey</span> <span slot="trigger" data-value="sso" class="text-xs font-medium">SAML SSO</span> <div slot="content" data-value="password" class="mt-4 space-y-4"> <form class="space-y-4" @submit=${this.handleSubmit}> <div class="space-y-1.5"> <uip-label for="lit-email-input" class="text-xs font-medium">Work Email</uip-label> <uip-input id="lit-email-input" class="text-xs" .value=${this.email} type="email" placeholder="[email protected]" autocomplete="email" required @input=${(e: Event) => { this.email = (e.target as UipInput).value }} > <span slot="prefix">${icon(Mail, 'mail', 'size-4')}</span> </uip-input> ${this.isEnterpriseEmail ? html`<div class="text-primary mt-1 flex items-center gap-1.5 text-xs font-medium"> ${icon(ShieldCheck, 'shield-check', 'size-3.5')} <span>Enterprise domain detected. Single Sign-On available.</span> </div>` : nothing} </div> <div class="space-y-1.5"> <div class="flex items-center justify-between"> <uip-label for="lit-pass-input" class="text-xs font-medium">Password</uip-label> <button type="button" class="text-muted-foreground hover:text-foreground text-xs transition-colors" @click=${() => this.dispatchEvent(new CustomEvent('forgot-password', { bubbles: true, composed: true }))} > Forgot password? </button> </div> <uip-input id="lit-pass-input" class="text-xs" .value=${this.password} type="password" placeholder="••••••••••••" autocomplete="current-password" required @input=${(e: Event) => { this.password = (e.target as UipInput).value }} > <span slot="prefix">${icon(Lock, 'lock', 'size-4')}</span> </uip-input> </div> <uip-button type="submit" class="h-10 w-full gap-2 text-xs font-semibold" ?disabled=${this.isLoading}> ${this.isLoading ? html`<span class="border-primary-foreground size-3.5 animate-spin rounded-full border-2 border-t-transparent"></span>` : html`<span>Continue with Password</span>`} ${icon(ArrowRight, 'arrow-right', 'size-3.5')} </uip-button> </form> </div> <div slot="content" data-value="passkey" class="mt-4 space-y-4"> <div class="border-border bg-card space-y-4 rounded-xl border p-6 text-center"> <div class="bg-primary/10 text-primary mx-auto flex size-12 items-center justify-center rounded-full"> ${icon(Fingerprint, 'fingerprint', 'size-6')} </div> <div class="space-y-1"> <p class="text-foreground text-sm font-semibold">Passwordless Biometric Login</p> <p class="text-muted-foreground text-xs"> Use Touch ID, Face ID, or a FIDO2 hardware security key for zero-friction sign in. </p> </div> <uip-button type="button" class="h-10 w-full gap-2 text-xs font-semibold" ?disabled=${this.isLoading} @click=${this.handleSubmit} > ${icon(Fingerprint, 'fingerprint', 'size-4')} <span>${this.isLoading ? 'Authenticating...' : 'Sign in with Passkey'}</span> </uip-button> </div> </div> <div slot="content" data-value="sso" class="mt-4 space-y-4"> <form class="space-y-4" @submit=${this.handleSubmit}> <div class="space-y-1.5"> <uip-label for="lit-sso-domain" class="text-xs font-medium">Enterprise Domain</uip-label> <uip-input id="lit-sso-domain" class="font-mono text-xs" .value=${this.ssoDomain} type="text" placeholder="company.okta.com or domain.com" required @input=${(e: Event) => { this.ssoDomain = (e.target as UipInput).value }} ></uip-input> <p class="text-muted-foreground text-xs"> Redirects to your corporate Identity Provider (Okta, Azure AD, Ping Identity). </p> </div> <uip-button type="submit" class="h-10 w-full gap-2 text-xs font-semibold" ?disabled=${this.isLoading}> ${icon(KeyRound, 'key-round', 'size-3.5')} <span>Continue with SAML SSO</span> ${icon(ArrowRight, 'arrow-right', 'size-3.5')} </uip-button> </form> </div> </uip-tabs> <div class="text-muted-foreground text-center text-xs"> Don't have a workspace account? <button type="button" class="text-primary ml-1 font-semibold hover:underline" @click=${() => this.dispatchEvent(new CustomEvent('sign-up', { bubbles: true, composed: true }))} > Create free trial </button> </div> </div> </div> </div> ` } } customElements.get('uip-login-01') || customElements.define('uip-login-01', UipLogin01) declare global { interface HTMLElementTagNameMap { 'uip-login-01': UipLogin01 } }
Raw manifest:https://uipkge.dev/r/lit/login-01.json