Login Component

Pending Review

Pending Review from User Experience (UX)

Overview

The Login component provides a comprehensive authentication and tenant management system for Progress applications. This solution component combines local authentication, SSO integration, tenant lookup, and organization selection to deliver a complete login workflow with multi-tenant support and flexible authentication methods.

Core Capabilities

Multi-Authentication Support - Support for both local username/password authentication and SSO providers (SAML, OIDC)
Tenant Management System - Dynamic tenant lookup and selection with organization-based access control
SSO Provider Integration - Seamless integration with external identity providers including configuration and callback handling
Context-Driven State Management - Centralized LoginContext provider for consistent authentication state across components
Password Reset Workflows - Built-in password reset functionality with email-based recovery processes
Session Management - Complete session lifecycle management with token handling and automatic logout capabilities

When to use Login:

Enterprise Applications - Applications requiring sophisticated authentication with multiple tenant support and SSO integration
Multi-Tenant SaaS Platforms - Software-as-a-Service applications with tenant isolation and organization-based access control
Identity Provider Integration - Applications that need to integrate with corporate identity systems and external authentication providers
Secure Application Access - Applications requiring robust authentication workflows with password policies and security features

When not to use Login:

Simple Authentication - Use basic form components for straightforward single-tenant authentication without SSO requirements
Public Applications - Consider lighter authentication patterns for applications that don't require multi-tenant or enterprise features
Development Environments - Use simplified authentication mocks for development and testing scenarios without full production workflows

Basic Implementation

React 18React 19+AngularPure JavaScript

import React, { useState } from 'react';
import { PwcLogin } from '@progress-i360/pwc-react';

function LoginForm() {
  const [credentials, setCredentials] = useState({
    username: '',
    password: ''
  });

  const handleLogin = (event: any) => {
    console.log('Login attempt:', event.detail);
  };

  return (
      <PwcLogin
        baseApiUrl="/api/v1/auth"
        onPwcAuthenticate={handleLogin}
      />
  );
}

import { useCallback, useDeferredValue, useState } from 'react';
import '@progress-i360/progress-web-components/login';

function TenantLogin() {
  const [loginState, setLoginState] = useState({
    selectedTenant: 'tenant1',
    ssoEnabled: true
  });

  const deferredState = useDeferredValue(loginState);

  const handleAuthenticate = useCallback((event: CustomEvent) => {
    console.log('Login attempt:', event.detail);
  }, []);

  const handleTenantChange = useCallback((event: CustomEvent<{ tenant: string }>) => {
    setLoginState(prev => ({ ...prev, selectedTenant: event.detail.tenant }));
  }, []);

  return (
      <pwc-login
        base-api-url="/api/v1/auth"
        single-tenant="false"
        selected-tenant={deferredState.selectedTenant}
        sso-enabled={deferredState.ssoEnabled ? 'true' : 'false'}
        onPwcAuthenticate={handleAuthenticate}
        onPwcTenantChange={handleTenantChange}
      ></pwc-login>
  );
}

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@progress-i360/progress-web-components/login";
import "@progress-i360/progress-web-components/action-bar";
import "@progress-i360/progress-web-components/button";
import { AppToken, SsoLoginEvent } from "@progress-i360/progress-web-components/dist/solutions/login/common/login.types";

@Component({
  selector: 'login-demo',
  template: `
    <pwc-login (pwc-authenticate)="handleAuthenticate($event)" (pwc-sso-login)="handleSsoLogin($event)"></pwc-login>
    <pwc-action-bar heading="Login Demo" [rowCount]="loginCount">
      <pwc-button slot="actions" label="Simulate Login" variant="primary" (pwc-click)="simulateLogin()"></pwc-button>
    </pwc-action-bar>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class LoginDemo {
  loginCount = 1;

  handleAuthenticate(e: Event) {
    const ce = (e as CustomEvent<AppToken>);
    // Simulate token update
    this.loginCount++;
  }

  handleSsoLogin(e: Event) {
    const ce = (e as SsoLoginEvent);
    ce.detail.success();
  }

  simulateLogin() {
    this.loginCount++;
  }
}

// Create multi-tenant login with authentication events
const login = document.createElement('pwc-login');
login.setAttribute('base-api-url', '/api/v1');
login.setAttribute('single-tenant', 'false');

// Handle local authentication attempts
login.addEventListener('pwc-login-local', (event) => {
  console.log('Local login attempt:', event.detail.username);
  // Simulate authentication success
  event.detail.success();
});

// Handle tenant lookup workflow
login.addEventListener('pwc-lookup-tenant', (event) => {
  const tenants = [{ label: 'Main Tenant', value: 'tenant1' }];
  event.detail.success({ config: tenants });
});

document.body.appendChild(login);

Usage Patterns

Enterprise Login Workflows - Complete authentication flows with tenant discovery, SSO provider selection, and organization assignment
Multi-Tenant Authentication - Dynamic tenant lookup and selection with tenant-specific authentication configuration and branding
SSO Integration Patterns - Seamless integration with SAML and OIDC providers including callback handling and token management
Password Management Workflows - Self-service password reset capabilities with email verification and secure token-based recovery

Best Practices

Content Strategy Guidelines

Clear Authentication Options - Present authentication methods clearly with visual distinction between local login and SSO providers
Progressive Tenant Discovery - Guide users through tenant selection with clear labels and helpful error messages for invalid tenants
Consistent Branding - Maintain tenant-specific branding and customization while preserving usability and accessibility standards
Security Communication - Provide clear security messaging and password requirements without overwhelming the user experience

Performance Optimization

Efficient API Calls - Implement proper debouncing for tenant lookup and optimize authentication API calls to prevent unnecessary requests
Context State Management - Use LoginContext efficiently to minimize re-renders and maintain authentication state across component lifecycle
Lazy Loading - Load SSO provider configurations and tenant data only when needed to improve initial page load performance
Token Management - Implement secure token storage and refresh patterns to maintain session state without compromising security

Integration Architecture

Modular Authentication Views - Structure login components (local, SSO, tenant lookup, org selection) as independent, reusable modules
Context-Driven Design - Leverage LoginContext for consistent state management across all authentication workflow components
API Abstraction Layer - Implement clean separation between authentication logic and API calls with proper error handling patterns
OIDC Client Integration - Follow OIDC best practices for secure authentication flows and token handling with proper callback management

Common Use Cases

Data Table Headers

User Management Interfaces - Authentication tables showing user sessions, login history, and tenant access permissions
SSO Provider Configuration - Administrative tables for managing SSO provider settings, mappings, and authentication policies
Tenant Administration - Management interfaces for tenant configuration, organization structure, and access control settings

Search Result Sections

User Directory Search - Search across tenant users with authentication status, roles, and organization membership filters
Tenant Discovery - Search and filter available tenants based on user permissions and organizational relationships
Authentication Audit - Search login events, authentication attempts, and security-related activities across tenants

Authentication Metrics - Dashboard widgets showing login success rates, authentication method usage, and tenant activity
Security Monitoring - Real-time security widgets displaying failed login attempts, suspicious activity, and authentication alerts
Tenant Health Status - Overview widgets showing tenant authentication service health, SSO provider status, and system availability

Troubleshooting

Common Issues

Actions Not Triggering

Problem: Authentication actions (login, SSO redirect, password reset) don't respond or fail to execute properly

Solutions:

Verify that LoginContext is properly provided and consumed by authentication components
Check that API endpoints are correctly configured with baseApiUrl and OIDC authority settings
Ensure that authentication event handlers are properly bound to form submission and SSO callback methods

Actions Not Visible

Problem: Login forms, SSO providers, or tenant selection options don't appear in the interface

Solutions:

Confirm that tenant configuration API is responding correctly and returning expected authentication options
Check that SSO provider configurations are properly loaded and displayed based on tenant settings
Verify that authentication components are properly imported and registered in the application bundle

Layout Issues

Problem: Login interface doesn't display correctly or has responsive layout problems across different screen sizes

Solutions:

Ensure that required CSS styles and design tokens are properly loaded for authentication components
Check that flex layout containers have appropriate responsive breakpoint handling for mobile and desktop views
Verify that logo, copyright, and branding elements have proper positioning and scaling configurations

Icon Problems

Problem: Authentication provider icons, status indicators, or UI elements don't display correctly

Solutions:

Confirm that icon fonts and provider-specific branding assets are properly bundled and available
Check that SSO provider configurations include correct icon keys and display names
Verify that status indicators and loading states have proper icon mappings matching the design system standards

Implementation Support

Framework Integration - Complete examples and integration guides for React, Angular, and vanilla JavaScript implementations
Authentication Context Integration - Comprehensive state management patterns using LoginContext for authentication workflows
SSO Provider Support - Full documentation for SAML and OIDC integration including provider configuration and callback handling

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools: 📖 View Complete API Documentation in Storybook →

This guide provides high-level implementation guidance. For detailed API specifications and interactive examples, visit our Storybook documentation.

Login Component

Overview

Core Capabilities

Basic Implementation

Usage Patterns

Best Practices

Content Strategy Guidelines

Performance Optimization

Integration Architecture

Common Use Cases

Data Table Headers

Search Result Sections

Dashboard Widget Headers

Troubleshooting

Common Issues

Actions Not Triggering

Actions Not Visible

Layout Issues

Icon Problems

Implementation Support

Resources

Storybook Documentation