What is HttpOnly Cookies using in Angular and Dot net

 ertainly! To implement secure handling of access and refresh tokens in an Angular frontend and .NET Core API, we can break down the solution into two parts: the Angular frontend for storing and managing the tokens, and the .NET Core API for securely issuing and validating those tokens.

1. Frontend (Angular)

Step 1: Handle Access Token in Memory or Session Storage

• Access tokens are typically short-lived. To mitigate the risk of cross-site scripting (XSS) attacks, we store them either in memory or in the browser’s session storage. However, do not store tokens in local storage because it's accessible via JavaScript and vulnerable to XSS attacks.

• Session storage can be used since it is only accessible from the current tab and is cleared when the session ends (i.e., when the browser is closed).

Step 2: Handle Refresh Token in HTTP-only Cookies

• Refresh tokens should be stored in a secure, HTTP-only cookie. HTTP-only cookies cannot be accessed by JavaScript, thus preventing XSS attacks from stealing the refresh token.

Example for Angular:

1. Storing Tokens

   • When you authenticate the user (e.g., after login), the access token is saved to the session storage, while the refresh token is stored in a secure, HTTP-only cookie.

   Login Service (auth.service.ts):

   typescript
   
   import { Injectable } from '@angular/core';
   import { HttpClient, HttpHeaders } from '@angular/common/http';
   import { Observable } from 'rxjs';
   
   @Injectable({
     providedIn: 'root',
   })
   export class AuthService {
     private apiUrl = 'https://your-api-url.com/api/auth';
   
     constructor(private http: HttpClient) {}
   
     login(username: string, password: string): Observable<any> {
       return this.http.post<any>(`${this.apiUrl}/login`, { username, password }, {
         withCredentials: true // Ensure the refresh token is sent as a cookie
       });
     }
   
     // Store the access token in session storage
     storeAccessToken(token: string): void {
       sessionStorage.setItem('access_token', token);
     }
   
     // Get the access token from session storage
     getAccessToken(): string | null {
       return sessionStorage.getItem('access_token');
     }
   
     // Remove the access token from session storage
     removeAccessToken(): void {
       sessionStorage.removeItem('access_token');
     }
   }
   

2. Making API Requests with the Access Token

   Whenever you make a request to a secured API endpoint, you need to include the access token in the Authorization header.

   API Service (api.service.ts):

   typescript
   
   import { Injectable } from '@angular/core';
   import { HttpClient, HttpHeaders } from '@angular/common/http';
   import { Observable } from 'rxjs';
   import { AuthService } from './auth.service';
   
   @Injectable({
     providedIn: 'root',
   })
   export class ApiService {
     private apiUrl = 'https://your-api-url.com/api/secure';
   
     constructor(private http: HttpClient, private authService: AuthService) {}
   
     getSecureData(): Observable<any> {
       const accessToken = this.authService.getAccessToken();
       const headers = new HttpHeaders().set('Authorization', `Bearer ${accessToken}`);
   
       return this.http.get<any>(`${this.apiUrl}/data`, { headers });
     }
   }
   

Step 3: Handle Token Expiry (Optional)

You may also need to refresh the access token using the refresh token. When the access token expires, the Angular app can make a request to the backend to get a new access token using the refresh token stored in the HTTP-only cookie.

---

2. Backend (ASP.NET Core API)

Step 1: Issue Access and Refresh Tokens

In your .NET Core API, you can use JWT tokens for the access token and store the refresh token in an HTTP-only cookie.

Step 2: Secure Token Storage and Refresh Logic

Authentication Controller (AuthController.cs):

csharp
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.IdentityModel.Tokens;
using System;
using System.IdentityModel.Tokens.Jwt;
using System.Security.Claims;
using System.Text;
using System.Threading.Tasks;

namespace YourNamespace.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class AuthController : ControllerBase
    {
        private readonly IConfiguration _configuration;

        public AuthController(IConfiguration configuration)
        {
            _configuration = configuration;
        }

        // Login endpoint
        [HttpPost("login")]
        public IActionResult Login([FromBody] LoginRequest model)
        {
            if (model.Username == "user" && model.Password == "password") // Validate user credentials
            {
                var accessToken = GenerateAccessToken();
                var refreshToken = GenerateRefreshToken();

                // Set the refresh token in an HTTP-only cookie
                SetRefreshTokenCookie(refreshToken);

                return Ok(new { AccessToken = accessToken });
            }

            return Unauthorized();
        }

        // Generate the access token (JWT)
        private string GenerateAccessToken()
        {
            var claims = new[]
            {
                new Claim(ClaimTypes.Name, "user"),
                new Claim(ClaimTypes.NameIdentifier, "12345")
            };

            var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_configuration["JwtSettings:SecretKey"]));
            var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);

            var token = new JwtSecurityToken(
                issuer: "YourIssuer",
                audience: "YourAudience",
                claims: claims,
                expires: DateTime.Now.AddMinutes(15), // Access token expiration
                signingCredentials: creds);

            return new JwtSecurityTokenHandler().WriteToken(token);
        }

        // Generate the refresh token
        private string GenerateRefreshToken()
        {
            return Guid.NewGuid().ToString(); // Just an example, you can use a more complex refresh token strategy
        }

        // Set the refresh token in an HTTP-only cookie
        private void SetRefreshTokenCookie(string refreshToken)
        {
            Response.Cookies.Append("refreshToken", refreshToken, new CookieOptions
            {
                HttpOnly = true,
                Secure = true, // Ensure the cookie is sent only over HTTPS
                SameSite = SameSiteMode.Strict,
                Expires = DateTime.UtcNow.AddDays(7) // Refresh token validity (7 days here)
            });
        }

        // Token Refresh endpoint
        [HttpPost("refresh-token")]
        public IActionResult RefreshToken()
        {
            // Retrieve the refresh token from the cookie
            if (Request.Cookies.ContainsKey("refreshToken"))
            {
                string refreshToken = Request.Cookies["refreshToken"];

                // Validate refresh token and generate a new access token
                if (IsValidRefreshToken(refreshToken))
                {
                    var newAccessToken = GenerateAccessToken();
                    return Ok(new { AccessToken = newAccessToken });
                }
            }

            return Unauthorized();
        }

        private bool IsValidRefreshToken(string refreshToken)
        {
            // Add your refresh token validation logic here
            return true;
        }
    }
}

Step 3: Middleware for JWT Authentication

In your Startup.cs (or Program.cs in .NET 6+), set up JWT bearer authentication.

csharp

public void ConfigureServices(IServiceCollection services)
{
    services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
        .AddJwtBearer(options =>
        {
            options.TokenValidationParameters = new TokenValidationParameters
            {
                ValidateIssuer = true,
                ValidateAudience = true,
                ValidateLifetime = true,
                ValidIssuer = "YourIssuer",
                ValidAudience = "YourAudience",
                IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration["JwtSettings:SecretKey"]))
            };
        });

    services.AddAuthorization();
    services.AddControllers();
}

---

Summary:

1. Angular Frontend:

   • Store the access token in session storage.
   • Store the refresh token in an HTTP-only cookie.
   • Use the access token in the Authorization header for API calls.

2. .NET Core API:

   • Issue an access token (JWT) and a refresh token during login.
   • Store the refresh token in an HTTP-only cookie.
   • Provide a refresh token endpoint that validates the refresh token and issues a new access token.

This approach minimizes the risk of XSS attacks and ensures that the refresh token is securely stored and used for refreshing the access token.

To store the refresh token in an HTTP-only cookie in a .NET Core API, you use the Response.Cookies.Append() method, which allows you to set cookies in the HTTP response. The key point here is to set the HttpOnly flag to ensure the cookie cannot be accessed via JavaScript, as well as the Secure flag to ensure the cookie is only sent over HTTPS connections.

Here's an example to demonstrate how to store the refresh token in an HTTP-only cookie.

Example in .NET Core API

csharp

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System;

namespace YourNamespace.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class AuthController : ControllerBase
    {
        public AuthController()
        {
        }

        // Login endpoint
        [HttpPost("login")]
        public IActionResult Login([FromBody] LoginRequest model)
        {
            if (model.Username == "user" && model.Password == "password") // Example validation logic
            {
                var refreshToken = GenerateRefreshToken();

                // Store the refresh token in an HTTP-only cookie
                SetRefreshTokenCookie(refreshToken);

                return Ok(new { message = "Login successful" });
            }

            return Unauthorized();
        }

        // Generate a refresh token (in a real-world app, you might store it in the database)
        private string GenerateRefreshToken()
        {
            return Guid.NewGuid().ToString(); // A simple GUID as a refresh token (you can use a more sophisticated method)
        }

        // Set the refresh token in an HTTP-only cookie
        private void SetRefreshTokenCookie(string refreshToken)
        {
            // Ensure the cookie is HTTP-only, Secure, and has a reasonable expiration time
            Response.Cookies.Append("refreshToken", refreshToken, new CookieOptions
            {
                HttpOnly = true,  // Cookie cannot be accessed via JavaScript
                Secure = true,    // Cookie is only sent over HTTPS
                SameSite = SameSiteMode.Strict, // Helps prevent CSRF attacks
                Expires = DateTime.UtcNow.AddDays(7) // Set expiration date (e.g., 7 days)
            });
        }

        // Refresh token endpoint (for example, to issue a new access token using the refresh token)
        [HttpPost("refresh-token")]
        public IActionResult RefreshToken()
        {
            // Retrieve the refresh token from the HTTP-only cookie
            if (Request.Cookies.ContainsKey("refreshToken"))
            {
                string refreshToken = Request.Cookies["refreshToken"];

                // Validate the refresh token and issue a new access token (this part would be more complex in a real app)
                if (IsValidRefreshToken(refreshToken))
                {
                    // Generate a new access token (JWT)
                    var newAccessToken = GenerateAccessToken();
                    return Ok(new { AccessToken = newAccessToken });
                }
            }

            return Unauthorized(); // Return 401 if no valid refresh token found
        }

        // A simple validation for the refresh token (in a real-world scenario, you'd check the token in your database)
        private bool IsValidRefreshToken(string refreshToken)
        {
            // In a real-world scenario, you'd validate the refresh token here (e.g., check if it's in your database)
            return true; // For this example, we always return true
        }

        // Generate a new access token (JWT)
        private string GenerateAccessToken()
        {
            // Generate and return a JWT token (this is just a placeholder for actual JWT generation)
            return "newAccessToken"; // In a real implementation, generate a valid JWT
        }
    }

    // A simple login request model
    public class LoginRequest
    {
        public string Username { get; set; }
        public string Password { get; set; }
    }
}

Explanation:

1. Storing the Refresh Token:

   • In the Login method, after the user is authenticated (in this case, by hardcoded credentials), we generate a refresh token using GenerateRefreshToken().
   • The refresh token is stored in an HTTP-only cookie using Response.Cookies.Append() with the following options:
     • HttpOnly = true: Ensures the cookie is not accessible via JavaScript, protecting it from XSS attacks.
     • Secure = true: Ensures the cookie is only sent over HTTPS, preventing man-in-the-middle (MITM) attacks.
     • SameSite = SameSiteMode.Strict: Prevents the cookie from being sent with cross-site requests, reducing the risk of CSRF attacks.
     • Expires: Sets an expiration for the cookie. In this example, it expires in 7 days.

2. Retrieving the Refresh Token:

   • In the RefreshToken endpoint, we check for the refresh token in the cookies using Request.Cookies["refreshToken"].
   • If the refresh token exists, it is validated, and a new access token is generated and returned.

Important Notes:

• HttpOnly Cookies: This ensures that JavaScript can't access the refresh token. However, the cookie is still sent with every HTTP request to the server (via the Cookie header).
• Secure Flag: This ensures the cookie is only sent over HTTPS, so it’s protected from being transmitted over an insecure connection.
• Expiration: Setting an expiration date for the cookie helps mitigate the risk of stale refresh tokens being used.

Final Remarks:

By storing the refresh token in an HTTP-only cookie and setting proper flags (HttpOnly, Secure, SameSite), you help protect the refresh token from common web security vulnerabilities like XSS and CSRF.