Skip to content

Angular Frontend Application

This project implements a Frontend Web Application using Angular, following a feature-based and modular architecture, aligned with enterprise standards and cloud-native best practices.

The application is designed to consume backend APIs securely, manage client-side state, and provide a scalable and maintainable user interface.

🔐 Authentication Entry Point

This frontend application does not provide its own authentication flow.

The only authentication entry point for users is:

https://plataformas.logyca.com/

Authentication is fully handled by Azure AD B2C through the central platforms portal.

Users access this application by: 1. Authenticating in plataformas.logyca.com 2. Selecting the application via a card in the portal 3. Being redirected to this frontend with a valid authentication context

Direct access to this frontend without a valid session is not supported.

🧭 Responsibilities of This Frontend

  • Render the user interface and manage user interactions
  • Consume backend APIs securely
  • Handle client-side routing and navigation
  • Manage application state and UI logic
  • Validate the presence of a valid authentication session
  • Rely exclusively on the central authentication portal
  • Redirect unauthenticated users to https://plataformas.logyca.com/
  • Refresh authentication tokens before expiration
  • Handle session expiration gracefully

🚫 Non-Responsibilities

  • Business logic execution
  • Direct database access
  • Certificate or TLS management
  • Backend authentication logic
  • Infrastructure provisioning

The frontend must remain stateless, delegating all business and security decisions to backend services.

🔐 Security Considerations

  • Authentication is centralized in Azure AD B2C
  • This frontend must not implement a login page
  • This frontend must not initiate authentication flows
  • Access tokens are issued by Azure AD B2C with a 1-hour expiration
  • The frontend must refresh tokens automatically before expiration
  • When the session expires or token refresh fails:
  • The user must be redirected to: https://plataformas.logyca.com/
  • Tokens must never be persisted insecurely or exposed
  • All API calls must include a valid, non-expired access token

🔄 Authentication Lifecycle / Session Expiration and Redirection Flow

  • The frontend assumes a valid authentication context upon entry
  • Token expiration is evaluated on each protected API call
  • If the access token expires and refresh fails:
  • The local session is cleared
  • The user is redirected to https://plataformas.logyca.com/
  • The frontend must never attempt silent or interactive login on its own

🌱 Configuration & Environment Strategy

  • Environment-specific configuration is handled via:
  • environment.ts
  • environment.{environment}.ts
  • Build-time configuration is injected during CI/CD
  • No environment-specific logic should be hardcoded in components

(Angular Frontend Application)

This structure promotes separation of concerns, feature encapsulation, and long-term maintainability.

frontend-angular/
│
├─ .vscode/                            # Editor configuration
├─ arm/                                # Infrastructure templates (ARM/Bicep)
├─ docs/                               # Frontend documentation
│
├─ src/
│  ├─ app/                             # Application modules and features
│  │  ├─ example-component/            # Example feature component
│  │  ├─ home/                         # Home feature
│  │  ├─ log-in/                       # Authentication views
│  │  ├─ navbar/                       # Navigation components
│  │  ├─ interceptors/                 # HTTP interceptors (auth, logging)
│  │  ├─ modules/                      # Feature and shared modules
│  │  ├─ shared/                       # Shared components, pipes, directives
│  │  │
│  │  ├─ app-routing.module.ts         # Application routing
│  │  ├─ app.component.ts              # Root component
│  │  ├─ app.component.html
│  │  ├─ app.component.scss
│  │  ├─ app.component.spec.ts
│  │  └─ app.module.ts                 # Root module
│  │
│  ├─ assets/                          # Static assets
│  │  ├─ azure-storage/                # Azure-related static assets
│  │  └─ images/                       # Images and icons
│  │
│  ├─ environments/                    # Environment configuration
│  │  ├─ environment.ts                # Base environment
│  │  ├─ environment.development.ts    # Development
│  │  ├─ environment.release.ts        # Release
│  │  └─ environment.prod.ts           # Production
│  │
│  ├─ globalStyles/                    # Global SCSS styles
│  │  ├─ mixins.scss
│  │  ├─ utilities.scss
│  │  └─ variables.scss
│  │
│  ├─ custom-theme.scss                # Application theme
│  ├─ styles.scss                      # Global styles entry point
│  ├─ index.html                       # Application HTML shell
│  ├─ main.ts                          # Application bootstrap
│  ├─ polyfills.ts                     # Browser polyfills
│  └─ test.ts                          # Test bootstrap
│
├─ .browserslistrc                     # Browser support configuration
├─ .editorconfig                       # Code style rules
├─ .gitignore
│
├─ angular.json                        # Angular workspace configuration
├─ karma.conf.js                       # Unit testing configuration
├─ package.json                        # NPM dependencies and scripts
├─ package-lock.json
│
├─ tsconfig.json                       # TypeScript base config
├─ tsconfig.app.json                   # App-specific TS config
├─ tsconfig.spec.json                  # Test-specific TS config
│
├─ Dockerfile                          # Container image definition
│
├─ pipelines-develop.yml               # CI/CD pipeline (development)
├─ pipelines-master.yml                # CI/CD pipeline (main/master)
│
└─ README.md                           # Frontend overview and usage