👁 Image
Indice.Features.Identity.UI 8.49.1

Indice.Features.Identity.UI

A comprehensive Razor Class Library that provides a complete, production-ready identity management UI for ASP.NET Core applications. This library delivers all the essential identity-related user interface components including authentication, registration, profile management, multi-factor authentication, and more.

🚀 Features

Core Identity Operations

• Authentication & Authorization

  • Login with username/email and password
  • External provider authentication (Google, Facebook, Microsoft, etc.)
  • Multi-factor authentication (SMS, Email)
  • Remember me functionality
  • Logout and logout confirmation

• User Registration & Onboarding

  • Self-service user registration
  • Email confirmation workflow
  • Custom onboarding processes
  • Terms and conditions acceptance

• Password Management

  • Forgot password with email reset
  • Password reset confirmation
  • Password expiration handling
  • Change password functionality

• Profile Management

  • User profile editing (personal information, preferences)
  • Profile picture upload and management
  • Email address management (add, change, verify)
  • Phone number management (add, verify)
  • Timezone and locale preferences

• Security Features

  • Multi-factor authentication onboarding
  • Device/browser verification
  • Security notifications via email
  • Session management and grants review

UI Framework Support

• Bootstrap 5 - Complete responsive UI components
• Tailwind CSS - Modern utility-first styling
• Customizable Themes - Easy branding and customization

Additional Features

• Localization - Multi-language support
• Email Templates - Pre-built email templates for all workflows
• Error Handling - User-friendly error pages (40X, 500, etc.)
• Accessibility - WCAG compliant UI components
• Mobile Responsive - Optimized for all device sizes

📦 Installation

dotnet add package Indice.Features.Identity.UI

🔧 Configuration

Basic Setup

public void ConfigureServices(IServiceCollection services)
{
 services.AddIdentity<User, Role>()
 .AddEntityFrameworkStores<IdentityDbContext>()
 .AddIdentityUI(options =>
 {
 // Basic configuration
 options.HomePageSlogan = "Welcome to our Digital Services Portal";
 options.CopyYear = 2024;
 options.EnableRegisterPage = true;
 options.EnableForgotPasswordPage = true;
 options.AllowRememberLogin = true;
 });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
 app.UseRouting();
 app.UseAuthentication();
 app.UseAuthorization();
 app.UseEndpoints(endpoints =>
 {
 endpoints.MapRazorPages();
 });
}

Advanced Configuration

services.AddIdentityUI(options =>
{
 // Branding & Appearance
 options.HomePageSlogan = "Welcome to the {0} Digital Services <strong>Portal</strong>";
 options.AvatarColorHex = "1abc9c";
 options.EmailLinkColorHex = "1abc9c";
 options.HtmlBodyBackgroundCssClass = "gradient-bg";
 
 // Feature Toggles
 options.EnableLocalLogin = true;
 options.AutoProvisionExternalUsers = true;
 options.AutoAssociateExternalUsers = true;
 options.EnablePhoneNumberCallingCodes = false;
 options.AutomaticSigninAfterRegister = false;
 
 // File Upload Settings
 options.PictureUploadSizeLimit = 1024 * 1024 * 5; // 5MB
 options.PictureMaxSideSize = 512; // 512px
 
 // Session Management
 options.RememberMeLoginDuration = TimeSpan.FromDays(30);
 options.ShowLogoutPrompt = true;
 options.AutomaticRedirectAfterSignOut = false;
 
 // Custom URLs
 options.TermsUrl = "https://example.com/terms";
 options.PrivacyUrl = "https://example.com/privacy";
 options.ContactUsUrl = "https://example.com/contact";
 
 // Custom Onboarding
 options.OnBoardingPage = "/CustomOnboarding/Welcome";
 
 // Homepage Services
 options.AddHomepageLink("Admin Panel", "~/admin", "admin-card", 
 visibilityPredicate: user => user.IsInRole("Admin"));
 options.AddHomepageLink("My Dashboard", "~/dashboard", "dashboard-card");
 
 // Event Handlers
 options.Events.OnUserRegistering = async context =>
 {
 // Custom logic during user registration
 context.User.CreatedBy = "System";
 await Task.CompletedTask;
 };
});

🎨 Customization

Theme Selection

The library supports multiple UI frameworks. Choose your preferred theme by organizing your views:

Pages/
├── Bootstrap5/ # Bootstrap 5 theme (default)
│ ├── Login.cshtml
│ ├── Register.cshtml
│ └── ...
├── Tailwind/ # Tailwind CSS theme
│ ├── Login.cshtml
│ ├── Register.cshtml
│ └── ...

Overriding Static Assets

You can override any static asset by placing a file with the same path in your host application's wwwroot:

wwwroot/
├── css/
│ └── bootstrap.css # Overrides library's bootstrap.css
├── js/
│ └── app.js # Additional JavaScript
└── images/
 └── logo.png # Custom logo

Custom Page Templates

Override specific pages by creating them in your host application:

1. On the same path as in the library but ommiting the UIFramework folder /Pages/Bootstrap5/Login will become /Pages/Login.

Pages/
├── Login.cshtml # Custom login page
├── Register.cshtml # Custom registration page

2. Under a Themes folder to create a conditional version for a spesific client.

Pages/
├── Themes/
│ ├── MyApplicationClientLogin.cshtml # Custom login page
│ └── MyApplicationClientRegister.cshtml # Custom registration page

In case (2) you will also need to set the client_id by creating the corresponding PageModel and decorating it with the [IdentityUIClient("MyApplicationClient")] attribute.

Email Template Customization

Email templates can be customized by placing files in your application:

Pages/
├── Shared/
│ ├── EmailConfirmYourEmail.cshtml
│ ├── EmailForgotPassword.cshtml
│ └── EmailSecurityNotification.cshtml

🏗️ Architecture

Project Structure

Indice.Features.Identity.UI/
├── Models/ # View models and input models
├── Pages/ # Razor pages organized by theme
│ ├── Bootstrap5/ # Bootstrap 5 theme
│ ├── Tailwind/ # Tailwind CSS theme
│ └── Shared/ # Shared layouts and components
├── Validators/ # FluentValidation validators
├── ViewComponents/ # Reusable view components
├── TagHelpers/ # Custom tag helpers
├── EventHandlers/ # Event handling for notifications
├── Localization/ # Localization resources
├── Filters/ # Custom action filters
└── wwwroot/ # Static web assets
 ├── css/ # Compiled stylesheets
 ├── js/ # JavaScript libraries
 ├── lib/ # Third-party libraries
 └── images/ # Images and icons

Key Components

• Page Models: Inherit from BasePageModel for common functionality
• Input Models: Data transfer objects with validation attributes
• Validators: FluentValidation rules for form validation
• View Components: Reusable UI components (ProfileSidebar, PageHeading, etc.)
• Tag Helpers: Custom HTML helpers (ProfilePictureImageTagHelper)
• Event Handlers: Extensible event system for custom business logic

Dependencies

🌐 Available Pages

Authentication Pages

• /Login - User login with external providers
• /Logout - Logout confirmation and processing
• /LoggedOut - Post-logout confirmation

Registration & Recovery

• /Register - User registration form
• /ForgotPassword - Password reset request
• /ForgotPasswordConfirmation - Password reset email sent confirmation
• /ConfirmEmail - Email address confirmation
• /ConfirmEmailChange - Email change confirmation

Profile Management

• /Profile - User profile management dashboard
• /ChangePassword - Password change form
• /AddEmail - Add additional email address
• /AddPhone - Add phone number
• /VerifyPhone - Phone number verification

Multi-Factor Authentication

• /Mfa - MFA challenge page
• /MfaOnboarding - MFA setup wizard
• /MfaOnboardingAddPhone - Add phone for MFA
• /MfaOnboardingVerifyPhone - Verify phone for MFA
• /MfaOnboardingAddEmail - Add email for MFA
• /MfaOnboardingVerifyEmail - Verify email for MFA

Security & Consent

• /Consent - OAuth consent page
• /Grants - Review active grants and sessions
• /AcceptTerms - Terms and conditions acceptance
• /Associate - External account association

Utility Pages

• /Home - Landing page with service links
• /Error - General error page
• /Error40X - 404/403 error pages
• /Privacy - Privacy policy page
• /Terms - Terms and conditions page
• /Challenge - External authentication challenge

🛠️ Build Process

The library includes automated build processes for static assets:

{
 "scripts": {
 "gulp": "gulp",
 "npm:install": "npm install"
 }
}

Build Targets

• NpmInstall: Installs Node.js dependencies
• CopyLibs: Copies third-party libraries to wwwroot
• Sass: Compiles SCSS stylesheets

Asset Management

• Fingerprinting: Automatic asset versioning for cache busting
• Minification: JavaScript and CSS optimization
• Image Optimization: Automatic image compression

📚 Examples

Custom Registration Event

services.AddIdentityUI(options =>
{
 options.Events.OnUserRegistering = async context =>
 {
 var user = context.User;
 var httpContext = context.HttpContext;
 
 // Set default user properties
 user.Department = "General";
 user.IsActive = true;
 user.CreatedDate = DateTime.UtcNow;
 
 // Log registration attempt
 var logger = httpContext.RequestServices.GetService<ILogger<Startup>>();
 logger.LogInformation("User {Email} is registering", user.Email);
 
 await Task.CompletedTask;
 };
});

Custom Homepage Services

services.AddIdentityUI(options =>
{
 options.AddHomepageLink("HR Portal", "https://hr.company.com", "hr-card", 
 imageSrc: "/images/hr-icon.png",
 visibilityPredicate: user => user.HasClaim("department", "HR"));
 
 options.AddHomepageLink("Finance Dashboard", "~/finance", "finance-card",
 visibilityPredicate: user => user.IsInRole("Finance"));
});

🤝 Contributing

This library is part of the Indice Platform ecosystem. For contributions, please refer to the main platform repository guidelines.

📄 License

This project is licensed under the MIT License - see the main platform repository for details.

🔗 Related Packages

• Indice.Features.Identity.Core - Core identity functionality
• Indice.Features.Identity.Server - IdentityServer4 integration
• Indice.Features.Identity.AdminUI - Administrative interface
• Indice.AspNetCore - Core ASP.NET Core utilities

For more information and advanced scenarios, please refer to the Indice Platform Documentation