ASP.NET Core Client Server JWT Authentication

Recently, I was trying to play around with ASP.NET Core JWT Authentication with Web API as backend server and Angular as front end client. I used ASP.NET Core 2.1 version.

Web API server setup
1. Add these codes inside ConfigureService method on Startup.cs:

public void ConfigureServices(IServiceCollection services)
{
 services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

 services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
  .AddJwtBearer(options =>
  {
   options.TokenValidationParameters = new TokenValidationParameters
   {
    ValidateIssuer = true,
    ValidateAudience = true,
    ValidateLifetime = true,
    ValidateIssuerSigningKey = true,

    ValidIssuer = "ABC",
    ValidAudience = "DEF",
    IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("mySuperSecretKey"))
   };
  });

 services.AddCors(options =>
 {
  options.AddPolicy("EnableCORS", builder =>
  {
   builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials().Build();
  });
 });
}

Notice that we also need to enable Cross Origin Resource Sharing (CORS) as our Angular client will sit on different domain.

2. Then inside Configure method, add:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
 if (env.IsDevelopment())
 {
  app.UseDeveloperExceptionPage();
 }
 else
 {
  app.UseHsts();
 }

 app.UseAuthentication();

 app.UseCors("EnableCORS");

 app.UseHttpsRedirection();
 app.UseMvc();
}

Make sure it is before app.UseMvc(); line otherwise you will keep getting ‘401 Unauthorized’ message with no details. Also we need to add CORS setting that we have done.

3. On the Web API login method on controller:

[EnableCors("EnableCORS")]
[HttpPost, Route("login")]
public IActionResult Login([FromBody]LoginModel user)
{
 if (user == null)
 {
  return BadRequest("Invalid client request");
 }

 if (user.UserName == "user" && user.Password == "password")
 {
  var secretKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("mySuperSecretKey "));
  var signinCredentials = new SigningCredentials(secretKey, SecurityAlgorithms.HmacSha256);

  var tokeOptions = new JwtSecurityToken(
   issuer: "ABC",
   audience: "DEF",
   claims: new List<Claim>(),
   expires: DateTime.Now.AddMinutes(5),
   signingCredentials: signinCredentials
  );

  var tokenString = new JwtSecurityTokenHandler().WriteToken(tokeOptions);
  return Ok(new { Token = tokenString });
 }
 else
 {
  return Unauthorized();
 }
}

Make sure [EnableCors("EnableCORS")] is added either to the method or at controller level.

4. On our Angular client we will need to call login:

login(form: NgForm) {
    let credentials = JSON.stringify(form.value);
    this.http.post("http://localhost:5000/api/auth/login", credentials, {
      headers: new HttpHeaders({
        "Content-Type": "application/json"
      })
    }).subscribe(response => {
      let token = (<any>response).token;
      localStorage.setItem("jwt", token);
      this.invalidLogin = false;
      this.router.navigate(["/"]);
    }, err => {
      this.invalidLogin = true;
    });
}

Once authenticated, we use local storage to store the token with ‘jwt’ key.

5. Then on our secured resource controller:

[EnableCors("EnableCORS")]
[HttpGet, Authorize]
public IEnumerable<string> Get()
{
 return new string[] { "confidential one", " confidential two" };
}

6. To request that API, we simply use this on client side:

let token = localStorage.getItem("jwt");
this.http.get("http://localhost:5000/api/customer", {
  headers: new HttpHeaders({
 "Authorization": "Bearer " + token
  })
}).subscribe(response => console.log(response)); 

Note that we need to have "Authorization": "Bearer " + token in the request header so that the server can authorize it.