ROLAC/APP/src/app/core/guards

Authentication Guard System

This implementation provides a complete authentication system that automatically detects if a user is logged in and redirects to the login page if not.

Components

AuthGuard (auth.guard.ts)

• Purpose: Protects routes that require authentication
• Functionality:
  • Checks if user is authenticated using AuthService.isAuthenticated()
  • Stores attempted URL for redirect after login
  • Redirects to /login if not authenticated
  • Allows access if authenticated

LoginPage (login-page.ts)

• Purpose: Full-page login interface for routing
• Features:
  • Beautiful landing page with company branding
  • Integrated login dialog
  • Demo credentials display
  • Automatic redirect after successful login
  • Prevents access if already logged in

How It Works

1. Route Protection

All protected routes use the AuthGuard:

{ path: 'dashboard', component: Dashboard, canActivate: [AuthGuard] }

2. Authentication Flow

1. User tries to access protected route
2. AuthGuard checks authentication status
3. If not authenticated:
   • Stores attempted URL
   • Redirects to /login
4. If authenticated:
   • Allows access to requested route

3. Login Process

1. User lands on /login page
2. Clicks "Sign In" button
3. Login dialog opens with MFA support
4. After successful login:
   • User data stored in localStorage
   • Redirected to originally requested URL or dashboard

4. Logout Process

1. User clicks logout from header dropdown
2. AuthService.logout() clears user data
3. Redirected to /login page

User State Management

AuthService Features

• Persistent Login: User stays logged in across browser sessions
• State Management: Reactive user state with RxJS
• Redirect URLs: Remembers where user was trying to go
• localStorage: Automatic persistence and restoration

Header Integration

• Dynamic User Menu: Shows different options based on auth state
• User Information: Displays current user name/email
• Logout Button: Easy access to logout functionality

Route Structure

/login              - Public login page
/dashboard          - Protected (requires auth)
/schedule           - Protected (requires auth)
/patients           - Protected (requires auth)
...                 - All other routes protected
/**                 - Catch-all redirects to /login

Usage Examples

Adding New Protected Routes

{ path: 'new-feature', component: NewFeatureComponent, canActivate: [AuthGuard] }

Checking Auth State in Components

constructor(private authService: AuthService) {}

ngOnInit() {
  this.authService.currentUser$.subscribe(user => {
    if (user) {
      // User is logged in
    } else {
      // User is not logged in
    }
  });
}

Manual Logout

this.authService.logout();
this.router.navigate(['/login']);

Security Features

• Route Protection: All sensitive routes are protected
• Persistent Sessions: Users stay logged in across browser sessions
• Automatic Redirects: Seamless user experience
• State Validation: Authentication state is checked on every route change
• Clean Logout: Complete session cleanup on logout

Testing

Use these test credentials:

• Direct Login: user@example.com / password123
• MFA Required: admin@example.com / password123 / 123456

The system will automatically redirect unauthenticated users to the login page and remember where they were trying to go.