Cookie authentication with ASP.NET Core and Angular - Code Maze (2023)

In this article, we will learn about cookie authentication using ASP.NET Core and Angular.

We'll build an ASP.NET Core web API with input, output, and a secured user endpoint for the demo. In Angular, after successful cookie-based authentication, we access the protected user endpoint.

To download the source code for this article you can visit ourGitHub-Repository.

Let us begin.

Was sind HTTP-Cookies

A server transmits asmall amount of dataA so-called HTTP cookie (also known as a web cookie or browser cookie) to the user's web browser. For follow-up requests, the browser can save the cookie andtransfer it backon the same server.

Cookies help to recognize whether the request comes from the same browser. Therefore we use cookies for authentication purposes.

To learn more about cookies see hereArticle.

How to configure cookie authentication in ASP.NET Core

In one of oursprevious articleswe learned how to use different authentication schemes in ASP.NET Core. In this article, we mainly focus on cookie authentication.

First, let's create a new project withASP.NET Core com AngularProject template in Visual Studio.

After that we have to change itprogram.csTo enable cookie authentication:

builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme) .AddCookie(options => { options.Events.OnRedirectToLogin = (context) => { context.Response.StatusCode = 401; return Task.CompletedTask; }; });

here theAdd authenticationmethod adds a default authentication scheme with a built-inCookieAuthenticationDefaults.AuthenticationSchemeConstant. After that theadd cookieThe method adds the necessary services for cookie authentication.

By default, cookie authentication redirects the user to the login URL if authentication fails. So we define the delegate functionoptions.Events.OnRedirectToLoginwith a lambda expression. This expression returns anot entitledHTTP-Statuscode401.

Once this is done, we need to enable authenticationprogram.cs:

app.UseAuthentication();app.UseAuthorization();app.MapDefaultControllerRoute();

Make sure you add the methods in the same order. Ouse authenticationeuse permissionMethods add what is necessaryMiddlewareto the pipeline to authenticate the user on each request. These middlewares also define thefrom the userproperty on the controller.

Now we can start creating the endpoints. Let's create a new controller calledAuthControllercomApiControllereRotaAttribute:

[ApiController][Route("/api/auth")] public class AuthController: Controller{}

here theApiControllerThe attribute enables API specific behavior. WithRotaattribute we specify the root API path/API/authfor all action methods in this controller.

Let's create the required templates for our endpoints using aregistrationModel:

public registration SignInRequest(string Email, string Password); public registration Response(bool IsSuccess, string Message); public registration UserClaim(String Type, String Value); public registration user (string email, string name, string password);

login terminal

Throughdemonstration purposes, we create a simple user repository with a private field inAuthController🇧🇷 User information is stored encrypted:

private List<user> user = new(){ new("[email protected]", "User1", "User1"), new("[email protected]", "user2", "user2"),};

Now let's create the endpointapi/auth/loginals HTTP-Post-Methode:

[HttpPost("signin")]public async Task<IActionResult> SignInAsync([FromBody] SignInRequest signInRequest){ var user = users.FirstOrDefault(x => x.Email == signInRequest.Email && x.Password == signInRequest.Password ); if (usuário é nulo) { return BadRequest(new Response(false, "Credenciais inválidas.")); } var Claims = new List<Claim> { new Claim(tipo: ClaimTypes.Email, valor: signInRequest.Email), new Claim(tipo: ClaimTypes.Name,value: user.Name) }; var identidade = new ClaimsIdentity(reivindicações, CookieAuthenticationDefaults.AuthenticationScheme); await HttpContext.SignInAsync( CookieAuthenticationDefaults.AuthenticationScheme, new ClaimsPrincipal(identity), new AuthenticationProperties { IsPersistent = true, AllowRefresh = true, ExpiresUtc = DateTimeOffset.UtcNow.AddMinutes(10), }); return Ok(new Response(true, "Conectado com sucesso"));}

here with thatsignInRequestparameters we get theEmailepasswordValues. With these values ​​we check our local user storeuserwhether the specified user exists or not.

If the user's credentials are valid, we createExpectationsand then the HTTP cookie with theHttpContext.SignInAsyncMethod.

user terminal

Connected users can access secured endpoints. Let's create a secured GET endpoint/api/auth/user:

[Authorize][HttpGet("user")]public IActionResult GetUser(){ var userClaims = User.Claims.Select(x => new UserClaim(x.Type, x.Value)).ToList(); Rückgabe Ok (userClaims);}

On this endpoint, we return the claims of the currently logged-in user. OAuthorizeThe attribute secures this endpoint. Since we're using cookie authentication, it checks the cookie in the request header and fills in thefrom the userObject. If the cookie is invalid, it will be returned401HTTP status code automatically.

output terminal

Finally, let's create an output endpoint/api/auth/sairto delete cookies:

[Authorize][HttpGet("signout")]public asynchronous task SignOutAsync(){ await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);}

Here the end device clears the user's browser cookies by issuing a new expired cookie with no claims data.

How to authenticate cookies in Angular

In this section we work with theangular partour application.

authentication service

First, let's create the required interfaces for the API responses:

UserClaim Export Interface { type: string; value: string; } export interface response { isSuccess: boolean; message: string;}

Now we can create itAuthServiceClass to make all necessary API calls:

@Injectable({ fornecidoIn: 'root',})export class AuthService { constructor(private http: HttpClient) {} public signIn(email: string, password: string) { return this.http.post<Response>('api/ Authentifizierung/Anmeldung, { E-Mail: E-Mail, Passwort: Passwort }); } public signOut() { return this.http.get('api/auth/signout'); } public user() { return this.http.get<UserClaim[]>('api/auth/user'); } public isSignedIn(): Observable<boolean> { return this.user().pipe( map((userClaims) => { const hasClaims = userClaims.length > 0; return !hasClaims ? false : true; }), catchError( (Fehler) => { Rückgabe von (false); })); }}

WithinAuthService, we createdlog in,from the user, zgo outfunctions. These functions call the respective API endpoints in the backend.

In addition to these functions, we have created another oneisSignedInOccupation. This function calls the user's endpoint and returnsrealorNOT CORRECTbased on your authentication status.

login component

Now let's create an HTML login component to input the user's credentials:

<div class="d-flex flex-column align-items-center justifica-content-center" *ngIf="!signedIn else assinadoInAlready"> <div>Faça o login para continuar</div> <form class="form w-50" [formGroup]="loginForm" (submit)="signin($event)"> <div class="row m-3"> <label for="name">E-Mail*</label> <input class="col form-field" name="email" formControlName="email" /> </div> <div class="row m-3"> <label for="password">Senha*</label> < input class="col form-field" type="password" name="password" formControlName="password" autocomplete="on" /> </div> <div class="row m-3" *ngIf="authFailed "> <label style="color: red">Credenciais invalidas</label> </div> <div class="row m-3"> <button class="col btn btn-primary" [disabled]="! loginForm.valid" type="submit">Eingabe</button> </div> </form> <div class="alert-info p-2"> Experimente[email protected]/user1 or[email protected]/ user2 </div></div><ng-template #signedInAlready> <h4>Sign in</h4> <div> You are already signed in! </div></ng-template>

After that we create theSignInComponentClass:

@Component({ selector: 'app-signin-component', templateUrl: './signin.component.html'}) export class SignInComponent implementiert OnInit { loginForm!: FormGroup; authFailed: boolean = falsch; AssinadoIn: booleano = falsch; Konstruktor (privater authService: AuthService, privater formBuilder: FormBuilder, roter oder privater: Router) { this.authService.isSignedIn().subscribe( isSignedIn => { this.signedIn = isSignedIn; }); } ngOnInit(): void { this.authFailed = false; this.loginForm = this.formBuilder.group( { email: ['', [Validators.required, Validators.email]], senha: ['', [Validators.required]] }); } public signIn(event: any) { if (!this.loginForm.valid) { return; } const userName = this.loginForm.get('email')?.value; senha const = this.loginForm.get('senha')?.value; this.authService.signIn(userName, password).subscribe( response => { if (response.isSuccess) { this.router.navigateByUrl('user') } }, error => { if (!error?.error?. isSuccess) { this.authFailed = true; } }); }}

In this component we check if the user is logged in or notconstructor🇧🇷 Withincom OnInitWe initialize the functionLogin Formularwith two form fieldsdie Emailepassword.

Each time the form is submitted, thelog infunction is called. In this function, we retrieve the values ​​from the form and pass them to thethis.authService.signInOccupation. This function calls the/api/auth/signinendpoint and returns the result.

If the credentials are valid, the API sets the cookieresponse headerwith the keySet-Cookie:

Set cookie: .AspNetCore.Cookies=CfDJ8KZELxg4LUBBvlmGEWUFluV ... _w8capcAdZ3fvcL18VNo5fReX1juZAI; expire=Sunday 10 July 2022 06:34:18 GMT; path=/; secure; same side = lax; https only

When we look at the cookie, the user's claims are encrypted. The browser saves it and passes this cookie on the next timeorder headerwith the keycookie:

Cookie: .AspNetCore.Cookies=CfDJ8KZELxg4LUBBvlmGEWUFluVgrOiEyLK6GfUQIr8qlbJKQBcCANpte0iuC9uBZ-_zfJl-W...

user component

After successful login, we redirect the user to another called componentuser component:

@Component({ selector: 'app-user', templateUrl: './user.component.html',}) export class UserComponent { userClaims: UserClaim[] = []; Konstruktor (privater authService: AuthService) { this.getUser (); } getUser() { this.authService.user().subscribe( resultado => { this.userClaims = resultado; }); }}

In this component we call the/api/auth/userEndpoint with thegetUser()Occupation.

If the cookie is valid, the protected user endpoint returns the200 (ok)Answers. Otherwise, the endpoint is returned401 not authorized).

starting component

Now let's implement theSignOutComponent🇧🇷 It's as easy as callingthis.authService.signOut()Function when clicking on an 'Exit' button:

@Component({ selector: 'app-signout-component', templateUrl: './signout.component.html'})export class SignOutComponent { constructor(private authService: AuthService) { this.signout(); } public signout() { this.authService.signOut().subscribe(); }}

As soon/api/auth/sairEndpoint means Invalidating Cookie. The server does this by issuing expired cookies on the sameSet-CookieResponse header:

Set-Cookie: .AspNetCore.Cookies=; expire=Thursday 1 January 1970 00:00:00 GMT; path=/; secure; same side = lax; https only

Therefore, when subsequently invoking a protected endpoint, 401 is returned.

Auth interceptor

Until now we haven't dealt with the unauthorized reply. By all means, when the user tries to access the protected endpoints, we need to redirect them to the login page.HttpInterceptor.

Let's create oneAuthInterceptorClass to intercept the request:

@Injectable() export classe AuthInterceptor implementa HttpInterceptor { constructor(private router: Router) { } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return next.handle(req).pipe (tap(() => { }, (err: any) => { if (err instanceof HttpErrorResponse) { if (err.status !== 401) { return; } this.router.navigate(['signin'] ); } })); }}

Here we intercept the response of all API calls with thecannoneToque RxJSOperator. When one of the endpoints returns401, we redirect the user to the login page.

authentication protection

The above solution only works if the page makes requests to the secured API endpoint.

To overcome this and protect any angular route, we can implement oneguardClass:

@Injectable() export classe AuthGuard implementa CanActivate { constructor(private authService: AuthService, remote or privado: Router) { } canActivate(proximo: ActivatedRouteSnapshot, estado: RouterStateSnapshot) { return this.isSignedIn(); } isSignedIn(): Observable<boolean> { return this.authService.isSignedIn().pipe( map((isSignedIn) => { if (!isSignedIn) { this.router.navigate(['signin']); return false ; } gibt wahr zurück; })); }}

here thecanActivateThe function checks the user's login status. If you are logged in, we allow the user to access the page. If not, redirect them to the login page.

Routes can use oursAuthGuardNamein your statementcanActivateKey:

RouterModule.forRoot([ { path: 'secured', component: SecuredComponent, pathMatch: 'full', canActivate: [AuthGuard] }])

Provider Registration

We have to register bothAuthInterceptoreAuthGuardNamenoAppModulOffererbe effective:

Provenores: [ { bereitstellen: HTTP_INTERCEPTORS, useFactory: Funktion (Router: Router) { return new AuthInterceptor (Router); }, multi: true, deps: [Router] }, AuthGuard],

Testing the app

Finally, let's run the app from Visual Studio ordotnet-RunCommand. In the browser we see the "Login" page to enter credentials.

If we try to use invalid credentials, we won't be able to log in. For valid credentials, the server issues cookies to the browser and we redirect to the user's page. On this page we can see the authenticated user claims:

[ { "type": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress", "value": "[email protected]" }, { "type": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name", "value": "User 1" }]

Finally, we can also access the Protected page. After you click the exit button, the server invalidates the cookie. Therefore, after logging out, we cannot access the "Users" and "Protected" pages. At this point, the browser always redirects us to the "Login" page to enter valid credentials.

Conclusion

In this article, we will learn in detail how to use cookie authentication with ASP.NET Core and Angular using a code sample. First, we looked at creating the endpoints. After that we create the angle components, interceptors and guards to correctly authenticate the user.