Implementing Secure Authentication and Authorization in Angular Applications

{
  "title": "Implementing Secure Authentication and Authorization in Angular Applications",
  "description": "Best practices for setting up robust authentication and authorization mechanisms to secure Angular applications.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "id": "angular-auth-01",
      "description": "Use OAuth 2.0 and OpenID Connect for modern authentication to enable secure authorization without sharing user credentials.",
      "recommendation": "Integrate OAuth 2.0 and OpenID Connect using the Angular OAuth2 OIDC Library to facilitate secure authentication and support third-party login options.",
      "references": [
        "https://www.avidclan.com/blog/how-to-build-secure-angular-applications-top-security-practices-for-angular-in-2025"
      ]
    },
    {
      "id": "angular-auth-02",
      "description": "Implement JSON Web Tokens (JWT) for secure session management, ensuring tokens are stored securely to prevent XSS attacks.",
      "recommendation": "Use HttpOnly Secure Cookies to store JWTs, preventing access via JavaScript, and employ Angular’s HttpInterceptor to automatically add JWT tokens to API requests.",
      "references": [
        "https://www.avidclan.com/blog/how-to-build-secure-angular-applications-top-security-practices-for-angular-in-2025"
      ]
    },
    {
      "id": "angular-auth-03",
      "description": "Enforce Role-Based Access Control (RBAC) to limit user actions based on predefined roles.",
      "recommendation": "Define clear user roles and permissions, implement server-side role validation, and use Angular’s CanActivate route guards to restrict unauthorized access.",
      "references": [
        "https://www.avidclan.com/blog/how-to-build-secure-angular-applications-top-security-practices-for-angular-in-2025"
      ]
    },
    {
      "id": "angular-auth-04",
      "description": "Protect against brute-force and credential stuffing attacks by enforcing strong password policies and implementing Multi-Factor Authentication (MFA).",
      "recommendation": "Require passwords with at least 12 characters, including a mix of letters, numbers, and symbols, and enable MFA to add an additional layer of security.",
      "references": [
        "https://www.avidclan.com/blog/how-to-build-secure-angular-applications-top-security-practices-for-angular-in-2025"
      ]
    },
    {
      "id": "angular-auth-05",
      "description": "Use secure cookies for authentication tokens to prevent XSS attacks.",
      "recommendation": "Store authentication tokens in HttpOnly, Secure cookies with the SameSite attribute set to 'Strict' to enhance security.",
      "references": [
        "https://www.avidclan.com/blog/how-to-build-secure-angular-applications-top-security-practices-for-angular-in-2025"
      ]
    },
    {
      "id": "angular-auth-06",
      "description": "Implement proper session management to handle user sessions securely and prevent unauthorized access.",
      "recommendation": "Use Angular’s HttpInterceptor to attach authorization tokens to outgoing requests and handle token expiration and refreshing mechanisms.",
      "references": [
        "https://infinitejs.com/posts/avoiding-authentication-mistakes-in-angular-apps/"
      ]
    },
    {
      "id": "angular-auth-07",
      "description": "Avoid storing sensitive information on the client-side to prevent security vulnerabilities.",
      "recommendation": "Store authentication tokens in HTTP-only cookies instead of local storage or session storage to reduce the risk of XSS attacks.",
      "references": [
        "https://infinitejs.com/posts/avoiding-authentication-mistakes-in-angular-apps/"
      ]
    },
    {
      "id": "angular-auth-08",
      "description": "Secure communication between the client and server to protect data in transit.",
      "recommendation": "Always use HTTPS to encrypt data transmitted between the client and server, and configure your server to allow requests only from trusted origins using CORS headers.",
      "references": [
        "https://www.divwytechnologies.com/blog/securing-your-angular-app-best-practices-for-web-application-security/"
      ]
    },
    {
      "id": "angular-auth-09",
      "description": "Prevent Cross-Site Scripting (XSS) attacks by sanitizing user input.",
      "recommendation": "Use Angular’s built-in sanitization mechanisms, such as the DomSanitizer service, to sanitize user-generated content before rendering it in the browser.",
      "references": [
        "https://www.divwytechnologies.com/blog/securing-your-angular-app-best-practices-for-web-application-security/"
      ]
    },
    {
      "id": "angular-auth-10",
      "description": "Protect against Cross-Site Request Forgery (CSRF) attacks by implementing CSRF tokens.",
      "recommendation": "Include a unique CSRF token in each request sent from the client to the server and verify its validity on the server-side to ensure the request originated from your Angular app.",
      "references": [
        "https://www.divwytechnologies.com/blog/securing-your-angular-app-best-practices-for-web-application-security/"
      ]
    }
  ]
}