{{announcement.body}}
{{announcement.title}}

Creating a JWT auth server in 1 second

DZone 's Guide to

Creating a JWT auth server in 1 second

Creating and setting up a JWT server requires some tedious and repetetive steps. In this article we look at how you can use Magic to create it in 1 second

· Web Dev Zone ·
Free Resource

Security is one of those things you shouldn't play around with yourself, unless you know what you're doing. This is the reason products such as Identity Server has gained such momentum and popularity. However, Identity Server is extremely difficult to configure correctly, and OIDC is also arguably a "hack" on top of OAuth2. JWT on the other hand, is dead simple to understand, and was created explicitly to authenticate and authorise users, contrary to OAuth that was originally created for an entirely different purpose. Hence, JWT is just as secure as OpenID Connect, only a gazillion times easier to understand and implement.

In the following video I demonstrate how to create your own JWT server using Magic in 1 second. Notice, Magic is a commercial product, and you need to pay a small fee to use it in a production environment - But compared to the number of hours you'd have to spend rolling your own Enterprise Single Sign On solution using JWT, I'm confident in that the license costs are small in comparison.


When you are done following the recipe in the above video, you can check out the scaffolded Angular code in the HttpService called "AuthService", to see the URLs you need to use to invoke operations towards your auth database - And to authenticate a user to retrieve a secure JSON Web Token, you can check out the "HttpService" in the same folder. If you're using Angular, the way to authenticate your user becomes as follows, assuming you add a dependency injected HttpService to your component's constructor.

TypeScript
 






The above code assumes you've got an HttpService similar to the one found in the scaffolded Magic Angular frontend. Feel free to copy and paste the Magic one into your own Angular project if you wish.

At this point, the only thing you'll need to do yourself, is to use any favourite method of yours to secure your HTTP rest endpoints, requiring a valid JWT token to invoke them. In addition, if you want to use tokens generated by your Magic backend, you'll need to share your JWT Secret Key between Magic and your other app. If you do this in a .Net Web API backend for instance, this would allow you to use the Authorize attribute on your Controller endpoints, such as the following illustrates.

C#
 






Then to add up the middleware, validating your JWT token, you can use something like the following if you're in .Net Core land. The following code would normally be found in your Startup class.

C#
 




x
4
33


1
public void ConfigureServices(IServiceCollection services)
2
{
3
  // Other init stuff here ...
4
 
          
5
  var secret = ""; /* ... get secret from config here ... */
6
  services.AddAuthentication(x =>
7
  {
8
    x.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
9
    x.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
10
  })
11
  .AddJwtBearer(x =>
12
  {
13
    x.RequireHttpsMetadata = true;
14
    x.SaveToken = true;
15
    x.TokenValidationParameters = new TokenValidationParameters
16
    {
17
      ValidateIssuer = false,
18
      ValidateAudience = false,
19
      ValidateLifetime = true,
20
      ValidateIssuerSigningKey = true,
21
      IssuerSigningKeyResolver = (token, secToken, kid, valParams) =>
22
      {
23
        var key = Encoding.ASCII.GetBytes(secret);
24
        return new List<SecurityKey>() { new SymmetricSecurityKey(key) };
25
      }
26
    };
27
  });
28
}
29
 
          


And VOILA! You've secured your entire .Net Core Web app, in addition to that you have an authentication and authorisation backend, and a frontend to administrate your users database. More importantly probably, you've created a Single Sign On solution, that you can now reuse in all of your enterprise development efforts.

Topics:
.net core 3, angular

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}