Authentication for Single Page Apps (SPA) on ASP. NET Core

Information may not be reliable

Change is inevitable, the only thing that remains static is users’ approach to find a solution that is more efficient and economical. The same goes for applications, which have evolved a lot in the course of recent years, starting from the Multi-Page Application (MPA) to a faster and extremely responsive Single Page Applications (SPAs). To amplify market reach and meet the customer needs, the companies are focusing on providing solutions that enhance the user experience.

Application Security, being one of the major points of concern in SPAs as well as a contributing factor in the user experience, should be handled carefully. In this highly techno-friendly world, the SPAs are no more limited to mobile devices and computers – it has reached to television and IoT based gadgets as well, requiring it to be more versatile, efficient, and fast. Hence, controlling and maintaining the security of the application brings about a significantly more mind-boggling programming condition with these many moving pieces, requiring you to take care of the various security factors like authentication and authorization at the client end.

Peruser Digest:

• Authentication– the process of determining whether a user is the same who actually they claim to be.
• Authorization– the process of determining what resources are accessible to the given user, and at what level.

Considering the versatility of SPAs and security requirements, Microsoft has come up with a revolutionary idea of shifting the Authorisation and Authentication control to the backend i.e. .net itself by adding the authentication parameter(similar to the Web Apps project templates) to the project template of Angular as well as React, as introduced in ASP.NET Core 3.0.

According to Microsoft, “ASP.NET Core 3.0 and the later versions offer authentication in Single Page Apps (SPAs) using the support for API authorization. ASP.NET Core Identity for authenticating and storing users is combined with IdentityServer for implementing OIDC.”

Peruser Digest:

• Identity– Identity, a membership system for authentication and authorization of the user, is closely related to the UI of the ASP.NET application and manages the attributes related to the user.
• OIDC-  OIDC refers to OpenID Connect, which is an identity and authentication protocol layer built and placed above the OAuth protocol that allows apps to verify the user identity.
• OAuth- OAuth, an open standard for authorization, provides secure access to the app, empowering to act on the behalf of the user.

Authentication and Authorization for Angular based SPAs

Let’s say you are developing a SPA based on Angular, you will find the support for the authentication and API authorization within the Angular module itself, which is present in the API authorization directory.

Elements of the Angular Module

The Angular Module, responsible for the authentication and authorization process, defines the routes associated with those parts of the application accountable for the authentication. The module expounds the elements like the login menu component, the Authorise guard, the Authorise interceptor as well as various Authorise services for using other parts of the app.

• Login Menu Components: handles the Login and Logout flow.
• AuthorizeGuard: authenticates the user before visiting the route.
• AuthorizeInterceptor: attaches the access token after the authentication done by the Authorise guard.
• AuthorizeService: interacts with the other parts of the application and exposes the user information with them.

This was a brief introduction about the Angular Module, let’s proceed further with check out the steps to implement this in your SPA.

How to implement Authentication and Authorisation in Angular based SPAs?

The Authentication and Authorisation in the Angular based SPAs can be implemented in the following steps.

Step-1: Add <Authorize> attribute to the newly created controller, in order to require authorization for the new API.

Step-2: Customize the  API authentication handler i.e. JWT(JSON Web Token) Handler by configuring <JwtBearerOptions> instance.

The JWT(JSON Web Token) handler creates events through JwtBearerEvents, that facilitate control over the authentication process and the instruction AddIdentityServerJwt registers its own event handlers in order to aid the API authorization. To include it into your application, you customize it and can incorporate the required logic to the existing event handler.

services.Configure<JwtBearerOptions>(
IdentityServerJwtConstants.IdentityServerJwtBearerScheme,
options =>
{
…
});

Source:https://docs.microsoft.com/en-us/aspnet/core/security/authentication/identity-api-authorization?view=aspnetcore-3.1

Step-3: Guard the client-side route through the AuthorizeGuard, hence preventing the unauthentic users from accessing the route. When the route is protected, AuthorizeInterceptor authenticates the API request by automatically attaching the token to the HTTP request

Step-4: Now you can start with the production of your application, by providing the database for storing the user details and the access grants, as well as an SSL certificate as the application can run only when the certificate is configured on the portal.

Not only this, but there are also various alternatives to configure your applications in the portal such as you can directly add the application to the list of the Client and resources through app settings or configure through the code as well by overloading the AddApiAuthorization function.

Source: Authentication and authorization for SPAs through ASP.NET Core