How to Create a JWT Authentication Web API

How to Create a JWT Authentication Web API

This JWT Authentication tutorial explains how to create a JWT Authentication Web API in 5 Minutes. How to use Magic to create an authentication and authorisation server, able to serve you JWT tokens generically, as a Single Sign On (SSO) solution.

There is no denying that JWT is a cool breeze and a relief from the feature insanity of OAuth. I once spent a week trying to understand OAuth, I had to give up. There was simply no way I could wrap my brain around it. I could explain JWT to a 5-year-old child in less than 5 minutes. If OAuth is a scrapyard of madness and radioactive waste, JWT is a green field swimming in warm rays of sun after the morning dew has sprinkled the fresh grass made.

A JWT token consists of three simple parts: a header describing the token, a payload that's the actual token, and a cryptographically secured signature, ensuring the token was created by a trusted source. All three components are base 64 encoded, separated by a ".", concatenated, and normally provided as a Bearer token in the Authorization HTTP header of your HTTP REST invocations — dead simple in fact.

Below is a typical example of a JWT token.

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

The reason why this is secure is because some sort of "secret" has been used when creating the signature, which is the last part of the token. Without the secret, you might as well try to brute force the unified theory of science. The thing is solid as a rock! Yet as simple as a cup of coffee on a Sunday morning.

If you copy and paste the above token into the textbox at JWT.io, you can clearly see all individual components in your token. It contains an expiration in the form of a Unix timestamp, a name, and some additional data that, combined, allows you to transparently read the token's value in your frontend layer.

In your backend, you can easily validate the token by taking its payload, appending your secret to it, and recreating the same hashing value that is in its signature. If the hash is the same, you know the token is valid. This makes it impossible for anyone not knowing the secret that was used to create the hash signature to create a token that is valid for your backend API. And of course, .Net and most other major software development frameworks contain many helper classes and utility methods to help you out with this process.

A week ago, I decided I wanted to create an SSO JWT auth server, which allows me to permanently solve all my "auth problems." One week later, having worked on it only in the evenings, I was done, and I could pride myself in having a complete SSO JWT authentication and authorization server, covering all my future needs to anything related to auth. Watch me demonstrate the system in the video below.

Sorry, OAuth, you have been weighed, and we have found you to be too heavy. OAuth is dead, long live JWT! ;)

By the way, if you think even adding some ~25 lines of C# code in your Web API is too much, feel free to download Magic, which I am using in the above video to create my SSO JWT AUTH server.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

APIs for Beginners - What is an API? How to use an API?

APIs for Beginners - What is an API? How to use an API?

APIs for Beginners, What exactly is an API? How do you use an API? Learn all about APIs in this full course for beginners. Learn how to use Postman and helper libraries in both JavaScript and Python. Lean how to create a project using an API using both Node.js and Flask. Learn what APIs do, why APIs exist, and the many benefits of APIs. Explore APIs online

APIs for Beginners - What is an API? How do you use an API? Learn all about APIs (Application Programming Interfaces) in this full course for beginners. You will learn what APIs do, why APIs exist, and the many benefits of APIs. APIs are used all the time in programming and web development so it is important to understand how to use them.

You will also get hands-on experience with a few popular web APIs. As long as you know the absolute basics of coding and the web, you'll have no problem following along.

⭐️ Course Contents ⭐️

⭐️ Unit 1 - What is an API
⌨️ Video 1 - Welcome (0:00:00)
⌨️ Video 2 - Defining Interface (0:03:57)
⌨️ Video 3 - Defining API (0:07:51)
⌨️ Video 4 - Remote APIs (0:12:55)
⌨️ Video 5 - How the web works (0:17:04)
⌨️ Video 6 - RESTful API Constraint Scavenger Hunt (0:22:00)

⭐️ Unit 2 - Exploring APIs
⌨️ Video 1 - Exploring an API online (0:27:36)
⌨️ Video 2 - Using an API from the command line (0:44:30)
⌨️ Video 3 - Using Postman to explore APIs (0:53:56)
⌨️ Video 4 - Please please Mr. Postman (1:03:33)
⌨️ Video 5 - Using Helper Libraries (JavaScript) (1:14:41)
⌨️ Video 6 - Using Helper Libraries (Python) (1:24:40)

⭐️ Unit 3 - Using APIs
⌨️ Video 1 - Introducing the project (1:34:18)
⌨️ Video 2 - Flask app (1:36:07)
⌨️ Video 3 - Dealing with API Limits (1:50:00)
⌨️ Video 4 - JavaScript Single Page Application (1:54:27)
⌨️ Video 5 - Moar JavaScript and Recap (2:07:53)
⌨️ Video 6 - Review (2:18:03)

JSON Tutorial For Beginners | What is JSON | Learning JSON with JavaScript

JSON Tutorial For Beginners | What is JSON | Learning JSON with JavaScript

JSON Tutorial For Beginners | What is JSON | Learning JSON with JavaScript

Explore JSON and how JavaScript Objects can be used to access data within JSON data format and output to your web page

Guide to learning how to use JavaScript Objects and JSON data. JSON is the most popular format for data exchange between applications. If you are interested in connected to a web API chances are its JSON formatted. Learn to use AJAX to connect and bring JSON data into your JavaScript!

This course shows you how to work with JSON formatted data, output content, loop JSON data, Parse JSON and a whole lot more.

JSON (JavaScript Object Notation) is a syntax for data. JSON is easier to use than XML and human readable. Most modern web APIs output data in JSON formats. It's a lightweight data interchange format that is quickly becoming the default format for data exchange on internet today! JSON is lightweight, language independent and easy to read and write. JSON is better than XML and more popular!

Within the lessons of this course we will explore

  • JavaScript data types used to hold variables and how they work
  • JSON and how to write JSON data
  • How to add values into a JSON object
  • Accessing JSON data and bringing it into JavaScript
  • JavaScript JSON parse and stringify methods
  • Adding JSON to local storage
  • Retrieving back data within JSON formats, updating and working with JSON
  • Connecting to a web API using fetch
  • Retrieving JSON data from a web API and outputting the results into your web page
  • Iterating threw multiple results from an API
  • Google Spreadsheet data as JSON and how to practice retrieving data
  • All of the source code and resources are in included
  • Explore different methods of working with the JSON data stringify and parsing
  • How JavaScript objects can use Arrays to hold multiple items
  • How JavaScript arrays work and store data

Thanks for reading

If you liked this post, please do share/like it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about JavaScript and JSON

The Complete JavaScript Course 2019: Build Real Projects!

JavaScript Programming Tutorial | Full JavaScript Course for Beginners 2019

The complete beginner’s guide to JSON

The Complete Guide to JSON Web Tokens

JWT Fundamentals for Beginners

Best JavaScript Frameworks, Libraries and Tools to Use in 2019

New ES2019 Features Every JavaScript Developer Should Know

How Do JavaScript Frameworks Impact the Security of Applications?

How Do JavaScript Frameworks Impact the Security of Applications?

In this JavaScript Frameworks tutorial, we explore JavaScript applications that use different types of security controls implemented at levels ranging from developer code, to libraries and plugins, to different frameworks, and analyze which applications actually turn out to be more secure.

The best way to enable developers to create secure applications is to “shift left” in security. That means providing developers with the tools and techniques that help build more secure applications from the get-go. Developers may get security controls into their applications in different ways. They may write them from scratch following security training or guidance, they may use open source libraries, or they may use frameworks that have the security features built in already. In this talk we explore JavaScript applications that use different types of security controls implemented at levels ranging from developer code, to libraries and plugins, to different frameworks, and analyze which applications actually turn out to be more secure. This work is based on analysis of over 500 open source JavaScript applications on GitHub that use client-side frameworks and template engines to prevent XSS, as well as server-side frameworks (Express, Koa, Hapi, Sails, Meteor) and CSRF prevention mechanisms.
In conclusion, we provide data-driven recommendations for framework maintainers and application developers on how to develop and choose a framework that will actually make applications more secure.