Frontend Auth & Guards
Relevant source files
The following files were used as context for generating this wiki page:
- Frontend/Angular/Scheduling.AngularApp/src/app/core/guards/auth.guard.ts
- Frontend/Angular/Scheduling.AngularApp/src/app/core/services/auth.ts
- BuildingBlocks/BuildingBlocks.Infrastructure.Auth/AuthExtensions.cs
- BuildingBlocks/BuildingBlocks.Infrastructure.Auth/AuthController.cs
- Frontend/Angular/Scheduling.AngularApp/src/app/core/layout/navbar/navbar.ts
- claude.md
The Frontend Authentication and Guards system provides a secure, role-based access control mechanism for the Angular SPA. It operates using a Backend-for-Frontend (BFF) pattern where the SPA does not handle OIDC tokens directly; instead, it relies on secure, HttpOnly cookies managed by the Web API. The system integrates Duende IdentityServer for identity management and ASP.NET Core Identity for user and role storage.
Authentication state is managed reactively using Angular Signals within a centralized AuthService. Access control is enforced through functional route guards that check authentication status and specific user roles (e.g., Admin, Doctor, Nurse) before allowing navigation.
Sources: claude.md:73-86, Frontend/Angular/Scheduling.AngularApp/src/app/core/services/auth.ts:13-22
Authentication Architecture
The project utilizes a Cookie-based authentication flow with OpenID Connect (OIDC). The Angular application interacts with the AuthController on the backend to facilitate login, logout, and session validation.
Backend-for-Frontend (BFF) Flow
The SPA never sees the OIDC tokens. Tokens are stored server-side in the authentication cookie properties. The AuthExtensions configuration ensures cookies are HttpOnly, Secure, and utilize Lax SameSite policies for CSRF protection.
The following sequence diagram illustrates the login flow:
Angular Auth Service
The AuthService is the central point for managing authentication state in the frontend. It uses Angular Signals (signal, computed) to provide reactive updates to the UI, such as the navigation bar.
| Feature | Description |
|---|---|
| Reactive State | Uses currentUser and loading signals for zoneless change detection. |
| Auth Check | Calls /auth/current-user to populate user details and roles. |
| Login/Logout | Performs full page redirections to API endpoints to handle OIDC chains. |
| Role Checks | Computed signals like isAdmin and isDoctor for UI-gating. |
Core Methods
checkAuth(): Fetches user information (userId,name,email,roles) from the API.login(): Redirects the browser to${apiUrl}/auth/loginwith areturnUrl.logout(): Redirects the browser to${apiUrl}/auth/logoutto clear local and IDP sessions.
Sources: Frontend/Angular/Scheduling.AngularApp/src/app/core/services/auth.ts:24-76, BuildingBlocks/BuildingBlocks.Infrastructure.Auth/AuthController.cs:57-67
Route Guards
Functional route guards are used to protect frontend routes from unauthorized access. These guards leverage the inject() function to access the AuthService.
authGuard
Ensures the user is authenticated. If authService.isAuthenticated() returns false, the guard triggers the login() flow, redirecting the user to the IdentityServer login page.
roleGuard(role: string)
A factory function that returns a CanActivateFn for specific role requirements.
- It first verifies authentication.
- It checks if the user possesses the required role via
authService.hasRole(role). - If unauthorized, it redirects to a
/forbiddenroute.
API Integration & Interceptors
To support the BFF pattern, the frontend must include credentials in its cross-origin requests.
Authentication Controller Endpoints
| Endpoint | Method | Description |
|---|---|---|
/auth/login | GET | Initiates OIDC challenge. |
/auth/logout | GET | Clears cookies and signs out of IdentityServer. |
/auth/current-user | GET | Returns JSON representation of the authenticated user's claims. |
/auth/access-denied | GET | Fallback for 403 scenarios. |
X-Requested-With Header
The frontend sends an X-Requested-With: XMLHttpRequest header. The backend AuthExtensions are configured to detect this header; if present during an authentication challenge, the server returns a 401 Unauthorized status instead of a 302 Redirect to the IdentityServer. This allows the Angular interceptor to handle the redirect gracefully.
Sources: BuildingBlocks/BuildingBlocks.Infrastructure.Auth/AuthExtensions.cs:98-109, BuildingBlocks/BuildingBlocks.Infrastructure.Auth/AuthController.cs:12-78, claude.md:76-78
Role-Based UI Gating
The application uses the AuthService to hide or show UI elements based on user permissions. The Navbar component, for instance, uses the authService to display user information and control visibility of navigation links.
// Example from navbar.ts
export class Navbar {
authService = inject(AuthService);
logout() {
this.authService.logout();
}
}
Sources: Frontend/Angular/Scheduling.AngularApp/src/app/core/layout/navbar/navbar.ts:23-30, claude.md:86-86
Summary
The Frontend Auth & Guards system implements a secure OIDC/OAuth2 flow using the BFF pattern, ensuring sensitive tokens remain on the server while providing a seamless reactive experience for the user. Through the use of Angular Signals, functional guards, and specialized HTTP handling, the system enforces strict role-based access control (RBAC) across both navigation and API interactions.