In this article, we’re going to learn about cookie authentication with ASP.NET Core and Angular.<\/p>\n
We’ll create an ASP.NET Core Web API with sign-in, sign-out, and a protected user endpoint for demonstration. In Angular, we’ll access the protected user endpoint after successful authentication based on cookies.<\/p>\n
Let’s begin.<\/p>\n
A server transmits a small piece of data<\/strong> called an HTTP cookie (also known as a web cookie or browser cookie) to a user’s web browser. With subsequent requests, the browser may save the cookie and transmit it back<\/strong> to the same server.<\/p>\n Cookies help to identify if the request comes from the same browser. Hence, we use cookies for authentication purposes.<\/p>\n To learn more about cookies, please refer to this article<\/a>.<\/p>\n In one of our previous articles<\/a>, we learned about using multiple authentication schemes in ASP.NET Core. In this article, we’ll focus mainly on cookie authentication.<\/p>\n First, let’s create a new project using ASP.NET Core with Angular<\/strong> project template in Visual Studio.<\/p>\n After that, we need to change the Here, the By default, cookie authentication redirects the user to the login URL if authentication failed. Hence, we’re setting the delegate function After this is done, we need to enable the authentication in Make sure to add the methods in the same order. The Now we can start creating the endpoints. Let’s create a new controller named Here, the Let’s create the required models for our endpoints using a\u00a0record<\/a> type:<\/p>\n For demonstration purposes<\/strong>, we’re creating a simple user store using a private field in Now, let’s create the endpoint Here, with the If the user credentials are valid, we create Signed-in users can access the protected endpoints. Let’s create one protected GET endpoint In this endpoint, we’re returning the currently signed-in user’s claims. The Finally, let’s create a sign-out endpoint Here, the endpoint will clear the cookies from the user’s browser by issuing a new expired cookie without any claims data.<\/p>\n In this section, we will work with the Angular part<\/a> of our application.<\/p>\n First, let’s create the necessary interfaces for the API responses:<\/p>\n Now we can create the In Apart from these functions, we create another Now, let’s create a sign-in component HTML to input user credentials:<\/p>\n After that, let’s create the In this component, we are checking whether the user is signed in or not in the Whenever the form is submitted, the If the credentials are valid, the API sets the cookie in the response header<\/strong> with the key If we look at the cookie, the user claims are encrypted. The browser stores it and pass this cookie in the subsequent request header<\/strong> with the key Once the sign-in is successful, we redirect the user to another component called In this component, we call the If the cookie is valid, the protected user endpoint will return the 200 (Ok)<\/strong> response. Otherwise, the endpoint will return 401 (Unauthorized)<\/strong>.<\/p>\n Now, let’s implement the As soon as the So, calling any protected endpoint subsequently will return 401.<\/p>\n So far, we didn’t handle the unauthorized response. Under any circumstance, if the user tries to access the protected endpoints, we should redirect them to the Sign In page.\u00a0To achieve this, we can implement our custom HttpInterceptor<\/a>.<\/p>\n Let’s create a Here, we’re intercepting the response of all the API calls using the The above solution works only if the page makes any request to the protected API endpoint.<\/p>\n To overcome this and to protect any angular route, we can implement a guard<\/a> class:<\/p>\nHow to Setup Cookie Authentication in ASP.NET Core<\/h2>\n
Program.cs<\/code> to enable cookie authentication:<\/p>\nbuilder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)\r\n .AddCookie(options =>\r\n {\r\n options.Events.OnRedirectToLogin = (context) =>\r\n {\r\n context.Response.StatusCode = 401;\r\n return Task.CompletedTask;\r\n };\r\n });<\/pre>\nAddAuthentication<\/code> method adds a default authentication scheme using an inbuilt CookieAuthenticationDefaults.AuthenticationScheme<\/code> constant. After that, the AddCookie<\/code> method adds the required services for cookie authentication.<\/p>\noptions.Events.OnRedirectToLogin<\/code> with a lambda expression. This expression returns an unauthorized<\/strong> HTTP status code 401<\/code>.<\/p>\nProgram.cs<\/code>:<\/p>\napp.UseAuthentication();\r\napp.UseAuthorization();\r\n\r\napp.MapDefaultControllerRoute();<\/pre>\n
UseAuthentication<\/code> and UseAuthorization<\/code> methods add the required middleware<\/a> to the pipeline to authenticate the user on each request. These middlewares will also set the User<\/code> property in the controller.<\/p>\nAuthController<\/code> with ApiController<\/a> and Route<\/strong> attributes:<\/p>\n[ApiController]\r\n[Route(\"\/api\/auth\")]\r\npublic class AuthController : Controller\r\n{\r\n}<\/pre>\nApiController<\/code> attribute enables the API-specific behavior. With Route<\/code> attribute, we specify the root API path \/api\/auth<\/code> for all the action methods in this controller.<\/p>\npublic record SignInRequest(string Email, string Password);\r\npublic record Response(bool IsSuccess, string Message);\r\npublic record UserClaim(string Type, string Value);\r\npublic record User(string Email, string Name, string Password);<\/pre>\n
Sign In Endpoint<\/h3>\n
AuthController<\/code>. It will hold the hardcoded user information:<\/p>\nprivate List<User> users = new()\r\n{\r\n new(\"user1@test.com\", \"User 1\", \"user1\"),\r\n new(\"user2@test.com\", \"User 2\", \"user2\"),\r\n};<\/pre>\napi\/auth\/signin<\/code> as HTTP post method:<\/p>\n[HttpPost(\"signin\")]\r\npublic async Task<IActionResult> SignInAsync([FromBody] SignInRequest signInRequest)\r\n{\r\n var user = users.FirstOrDefault(x => x.Email == signInRequest.Email &&\r\n x.Password == signInRequest.Password);\r\n if (user is null)\r\n {\r\n return BadRequest(new Response(false, \"Invalid credentials.\"));\r\n }\r\n\r\n var claims = new List<Claim>\r\n {\r\n new Claim(type: ClaimTypes.Email, value: signInRequest.Email),\r\n new Claim(type: ClaimTypes.Name,value: user.Name)\r\n };\r\n var identity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);\r\n\r\n await HttpContext.SignInAsync(\r\n CookieAuthenticationDefaults.AuthenticationScheme,\r\n new ClaimsPrincipal(identity),\r\n new AuthenticationProperties\r\n {\r\n IsPersistent = true,\r\n AllowRefresh = true,\r\n ExpiresUtc = DateTimeOffset.UtcNow.AddMinutes(10),\r\n });\r\n\r\n return Ok(new Response(true, \"Signed in successfully\"));\r\n}<\/pre>\nsignInRequest<\/code> parameter, we receive the Email<\/code> and Password<\/code> values. Using these values, we’re checking our local user store users<\/code> whether the given user exists or not.<\/p>\nclaims<\/code> and then the HTTP cookie using the HttpContext.SignInAsync<\/code> method.<\/p>\nUser Endpoint<\/h3>\n
\/api\/auth\/user<\/code>:<\/p>\n[Authorize]\r\n[HttpGet(\"user\")]\r\npublic IActionResult GetUser()\r\n{\r\n var userClaims = User.Claims.Select(x => new UserClaim(x.Type, x.Value)).ToList();\r\n\r\n return Ok(userClaims);\r\n}<\/pre>\nAuthorize<\/code> attribute protects this endpoint. Since we’re using cookie authentication, it checks the cookie in the request’s header and populates the User<\/code> object. If the cookie is invalid, it returns 401<\/code> HTTP status code automatically.<\/p>\nSign Out Endpoint<\/h3>\n
\/api\/auth\/signout<\/code> to clear the cookies:<\/p>\n[Authorize]\r\n[HttpGet(\"signout\")]\r\npublic async Task SignOutAsync()\r\n{\r\n await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);\r\n}<\/pre>\nHow to Authenticate Cookies in Angular<\/h2>\n
Auth Service<\/h3>\n
export interface UserClaim {\r\n type: string;\r\n value: string;\r\n}\r\n\r\nexport interface Response {\r\n isSuccess: boolean;\r\n message: string;\r\n}<\/pre>\nAuthService<\/code> class to do all the necessary API calls:<\/p>\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class AuthService {\r\n constructor(private http: HttpClient) {}\r\n\r\n public signIn(email: string, password: string) {\r\n return this.http.post<Response>('api\/auth\/signin', {\r\n email: email,\r\n password: password\r\n });\r\n }\r\n\r\n public signOut() {\r\n return this.http.get('api\/auth\/signout');\r\n }\r\n\r\n public user() {\r\n return this.http.get<UserClaim[]>('api\/auth\/user');\r\n }\r\n\r\n public isSignedIn(): Observable<boolean> {\r\n return this.user().pipe(\r\n map((userClaims) => {\r\n const hasClaims = userClaims.length > 0;\r\n return !hasClaims ? false : true;\r\n }),\r\n catchError((error) => {\r\n return of(false);\r\n }));\r\n }\r\n}\r\n<\/pre>\nAuthService<\/code>, we create signIn<\/code>, user<\/code>, and signOut<\/code> functions. These functions call the respective API endpoints in the backend.<\/p>\nisSignedIn<\/code> function. This function calls the user endpoint and returns true<\/code> or false<\/code> based on its authentication status.<\/p>\nSign In Component<\/h3>\n
<div class=\"d-flex flex-column align-items-center justify-content-center\" *ngIf=\"!signedIn else signedInAlready\">\r\n <div>Please Sign In to continue<\/div>\r\n <form class=\"form w-50\" [formGroup]=\"loginForm\" (submit)=\"signin($event)\">\r\n <div class=\"row m-3\">\r\n <label for=\"name\">Email*<\/label>\r\n <input class=\"col form-field\" name=\"email\" formControlName=\"email\" \/>\r\n <\/div>\r\n <div class=\"row m-3\">\r\n <label for=\"password\">Password*<\/label>\r\n <input class=\"col form-field\" type=\"password\" name=\"password\" formControlName=\"password\" autocomplete=\"on\" \/>\r\n <\/div>\r\n <div class=\"row m-3\" *ngIf=\"authFailed\">\r\n <label style=\"color: red\">Invalid credentials<\/label>\r\n <\/div>\r\n <div class=\"row m-3\">\r\n <button class=\"col btn btn-primary\" [disabled]=\"!loginForm.valid\" type=\"submit\">Sign In<\/button>\r\n <\/div>\r\n <\/form>\r\n <div class=\"alert-info p-2\">\r\n Try user1@test.com \/ user1\r\n or user2@test.com \/ user2\r\n <\/div>\r\n<\/div>\r\n\r\n<ng-template #signedInAlready>\r\n <h4>Sign In<\/h4>\r\n <div>\r\n You are already signed in!\r\n <\/div>\r\n<\/ng-template><\/pre>\n
SignInComponent<\/code> class:<\/p>\n@Component({\r\n selector: 'app-signin-component',\r\n templateUrl: '.\/signin.component.html'\r\n})\r\nexport class SignInComponent implements OnInit {\r\n loginForm!: FormGroup;\r\n authFailed: boolean = false;\r\n signedIn: boolean = false;\r\n\r\n constructor(private authService: AuthService,\r\n private formBuilder: FormBuilder,\r\n private router: Router) {\r\n this.authService.isSignedIn().subscribe(\r\n isSignedIn => {\r\n this.signedIn = isSignedIn;\r\n });\r\n }\r\n\r\n ngOnInit(): void {\r\n this.authFailed = false;\r\n this.loginForm = this.formBuilder.group(\r\n {\r\n email: ['', [Validators.required, Validators.email]],\r\n password: ['', [Validators.required]]\r\n });\r\n }\r\n\r\n public signIn(event: any) {\r\n if (!this.loginForm.valid) {\r\n return;\r\n }\r\n const userName = this.loginForm.get('email')?.value;\r\n const password = this.loginForm.get('password')?.value;\r\n this.authService.signIn(userName, password).subscribe(\r\n response => {\r\n if (response.isSuccess) {\r\n this.router.navigateByUrl('user')\r\n }\r\n },\r\n error => {\r\n if (!error?.error?.isSuccess) {\r\n this.authFailed = true;\r\n }\r\n });\r\n }\r\n}\r\n<\/pre>\nconstructor<\/code>. In ngOnInit<\/code> function, we’re initializing the loginForm<\/code> with two form fields email<\/code> and password<\/code>.\u00a0<\/p>\nsignIn<\/code> function gets called. In this function, we retrieve the form values and then pass them to the this.authService.signIn<\/code> function. This function calls the \/api\/auth\/signin<\/code> endpoint and returns the result.<\/p>\nset-cookie<\/code>:<\/p>\nset-cookie: .AspNetCore.Cookies=CfDJ8KZELxg4LUBBvlmGEWUFluV ... _w8capcAdZ3fvcL18VNo5fReX1juZAI; expires=Sun, 10 Jul 2022 06:34:18 GMT; path=\/; secure; samesite=lax; httponly<\/code><\/p>\nCookie<\/code>:<\/p>\nCookie: .AspNetCore.Cookies=CfDJ8KZELxg4LUBBvlmGEWUFluVgrOiEyLK6GfUQIr8qlbJKQBcCANpte0iuC9uBZ-_zfJl-W...<\/code><\/p>\nUser Component<\/h3>\n
UserComponent<\/code>:<\/p>\n@Component({\r\n selector: 'app-user',\r\n templateUrl: '.\/user.component.html',\r\n})\r\nexport class UserComponent {\r\n userClaims: UserClaim[] = [];\r\n constructor(private authService: AuthService) {\r\n this.getUser();\r\n }\r\n\r\n getUser() {\r\n this.authService.user().subscribe(\r\n result => {\r\n this.userClaims = result;\r\n });\r\n }\r\n}<\/pre>\n\/api\/auth\/user<\/code> endpoint using the getUser()<\/code> function.<\/p>\nSign Out Component<\/h3>\n
SignOutComponent<\/code>. It is as simple as calling the this.authService.signOut()<\/code> function on click of a ‘Sign Out’ button:<\/p>\n@Component({\r\n selector: 'app-signout-component',\r\n templateUrl: '.\/signout.component.html'\r\n})\r\nexport class SignOutComponent {\r\n constructor(private authService: AuthService) {\r\n this.signout();\r\n }\r\n\r\n public signout() {\r\n this.authService.signOut().subscribe();\r\n }\r\n}<\/pre>\n\/api\/auth\/signout<\/code> endpoint is called a cookie will be invalidated. The server does this by issuing expired cookies in the same set-cookie<\/code> response header:<\/p>\nset-cookie: .AspNetCore.Cookies=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=\/; secure; samesite=lax; httponly<\/code><\/p>\nAuth Interceptor<\/h3>\n
AuthInterceptor<\/code> class to intercept the request:<\/p>\n@Injectable()\r\nexport class AuthInterceptor implements HttpInterceptor {\r\n constructor(private router: Router) { }\r\n intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {\r\n return next.handle(req).pipe(tap(() => { },\r\n (err: any) => {\r\n if (err instanceof HttpErrorResponse) {\r\n if (err.status !== 401) {\r\n return;\r\n }\r\n this.router.navigate(['signin']);\r\n }\r\n }));\r\n }\r\n}<\/pre>\npipe<\/code> and tap<\/code> RxJS<\/a> operators. If any of the endpoints return 401<\/strong>, then we redirect the user to the sign-in page.<\/p>\nAuth Guard<\/h3>\n
@Injectable()\r\nexport class AuthGuard implements CanActivate {\r\n constructor(private authService: AuthService, private router: Router) { }\r\n\r\n canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {\r\n return this.isSignedIn();\r\n }\r\n\r\n isSignedIn(): Observable<boolean> {\r\n return this.authService.isSignedIn().pipe(\r\n map((isSignedIn) => {\r\n if (!isSignedIn) {\r\n this.router.navigate(['signin']);\r\n return false;\r\n }\r\n return true;\r\n }));\r\n }\r\n}<\/pre>\n