Authentication
Overview
The GadgetFest frontend implements authentication using Microsoft Authentication Library (MSAL) for Angular. This integration enables secure user authentication via Azure Active Directory B2C, providing a robust identity management solution with features like single sign-on, multi-factor authentication, and social identity providers.
Authentication Architecture
The authentication system is built on these key components:
MSAL Angular Integration: Leverages the
@azure/msal-angularlibrary for seamless integration with Angular 19.2.0Azure AD B2C: Uses Azure Active Directory B2C as the identity provider
Token-based Authentication: Implements JWT token-based authentication for API requests
Policy-based Flows: Supports multiple authentication policies for different user journeys
Core Components
MSAL Configuration
The MSAL configuration is environment-aware and includes:
Client application setup with proper redirect URIs
Authority configuration with Azure B2C tenant
Cache storage settings (SessionStorage)
Protected resource mapping for API scopes
HTTP Interceptor
The MSAL HTTP interceptor automatically:
Attaches authentication tokens to outgoing API requests
Handles token acquisition for protected resources
Manages token renewal when needed
Security Considerations
Token Storage: Tokens are stored in SessionStorage for enhanced security
Scoped API Access: API permissions are precisely scoped to required operations
Secure Redirects: All redirects use proper validation to prevent open redirect vulnerabilities
Silent Token Renewal: Implements transparent token renewal for seamless user experience
Integration Points
The authentication system integrates with the application through:
Route Guards: Protecting routes that require authentication
HTTP Interceptors: Automatically attaching tokens to API requests
Authentication Events: Broadcasting login/logout events for UI updates