Authenticating with JWT in Deno

Question

Authenticating with JWT in Deno

Can someone guide me on generating and authenticating JSON Web Token in Deno?

Being a newbie to the Deno environment, I would greatly appreciate a code snippet to kickstart my journey with JWT in Deno.

typescript jwt deno

Answer 1

Answer №1

In this example, we demonstrate the process of generating a JWT with an HS256 signature, verifying it, and extracting the payload.

jwtdemo.ts (built on Version 2.4 of djwt):

import { create, verify , getNumericDate, Payload, Header} from "https://deno.land/x/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8886198dad">[email protected]</a>/mod.ts";

const encoder = new TextEncoder()
var keyBuf = encoder.encode("mySuperSecret");

var key = await crypto.subtle.importKey(
  "raw",
  keyBuf,
  {name: "HMAC", hash: "SHA-256"},
  true,
  ["sign", "verify"],
)

const payload: Payload = {
  iss: "deno-demo",
  exp: getNumericDate(300), // expires in 5 min.
};

const algorithm = "HS256"

const header: Header = {
  alg: algorithm,
  typ: "JWT",
  foo: "bar"  // custom header
};

const jwt = await create(header, payload, key)

console.log(jwt);

// create a different key to test the verifcation
/*keyBuf = encoder.encode("TheWrongSecret");
key = await crypto.subtle.importKey(
  "raw",
  keyBuf,
  {name: "HMAC", hash: "SHA-256"},
  true,
  ["sign", "verify"],
)
*/

try {
  const payload = await verify(jwt, key); 
    console.log("JWT is valid");
    console.log(payload);
}
catch(_e){
  const e:Error= _e;
  console.log(e.message);
}

The latest version of djwt leverages the Web Crypto API which has been supported since Deno 1.11. The functions create and verify now require the key parameter as a CryptoKey object, mandating the creation of a proper key object instead of a simple string.

The utility method getNumericDate(exp) automatically configures a correct Unix timestamp by adding the specified number of seconds to the current time or using the provided date input directly.

You can execute the demonstration above, and all imported modules will be fetched automatically:

deno run jwtdemo.ts

The output would be:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImZvbyI6ImJhciJ9.eyJpc3MiOiJkZW5vLWRlbW8iLCJleHAiOjE2MzMzNzUyODl9.FBYgDrpG9RXJSfgme-430UyFLvdNTNliYTKGiWajksQ
JWT is valid
{ iss: "deno-demo", exp: 1633375289 }

If you use an incorrect signature (uncomment the code snippet with the wrong secret for testing):

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImZvbyI6ImJhciJ9.eyJpc3MiOiJkZW5vLWRlbW8iLCJleHAiOjE2MzMzNzU0MDd9.F3szgyrTJSQG3m1a82OJkKqKIDD32Q21ZchAVAj74bk
The jwt's signature does not match the verification signature.

An interesting distinction in Deno compared to node.js is the utilization of predefined interfaces like Header and Payload instead of plain JSON, ensuring data integrity.

Trying to set

const algorithm = "XS256"   // instead of "HS256"

would trigger a failure due to algorithm mismatch:

error: Type '"XS256"' is not assignable to type 'Algorithm'.
...
Argument of type '"XS256"' is not assignable to parameter of type 'AlgorithmInput'.
...

This sample code showcases the capabilities of djwt version 2.4, supporting various signature algorithms like HSxxx, RSxxx, PSxxx, and ESxxx. Future additions may include more algorithms compatible with Deno's cryptographic modules.

Refer to this answer for details on verifying an RS256-signed token in Deno.

Note: This revision covers the changes in the djwt library API introduced in version 2.4. The original post was based on djwt v1.9. View the previous version here.

Answer 2

In this example, we demonstrate the process of generating a JWT with an HS256 signature, verifying it, and extracting the payload.

jwtdemo.ts (built on Version 2.4 of djwt):

import { create, verify , getNumericDate, Payload, Header} from "https://deno.land/x/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8886198dad">[email protected]</a>/mod.ts";

const encoder = new TextEncoder()
var keyBuf = encoder.encode("mySuperSecret");

var key = await crypto.subtle.importKey(
  "raw",
  keyBuf,
  {name: "HMAC", hash: "SHA-256"},
  true,
  ["sign", "verify"],
)

const payload: Payload = {
  iss: "deno-demo",
  exp: getNumericDate(300), // expires in 5 min.
};

const algorithm = "HS256"

const header: Header = {
  alg: algorithm,
  typ: "JWT",
  foo: "bar"  // custom header
};

const jwt = await create(header, payload, key)

console.log(jwt);

// create a different key to test the verifcation
/*keyBuf = encoder.encode("TheWrongSecret");
key = await crypto.subtle.importKey(
  "raw",
  keyBuf,
  {name: "HMAC", hash: "SHA-256"},
  true,
  ["sign", "verify"],
)
*/

try {
  const payload = await verify(jwt, key); 
    console.log("JWT is valid");
    console.log(payload);
}
catch(_e){
  const e:Error= _e;
  console.log(e.message);
}

The latest version of djwt leverages the Web Crypto API which has been supported since Deno 1.11. The functions create and verify now require the key parameter as a CryptoKey object, mandating the creation of a proper key object instead of a simple string.

The utility method getNumericDate(exp) automatically configures a correct Unix timestamp by adding the specified number of seconds to the current time or using the provided date input directly.

You can execute the demonstration above, and all imported modules will be fetched automatically:

deno run jwtdemo.ts

The output would be:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImZvbyI6ImJhciJ9.eyJpc3MiOiJkZW5vLWRlbW8iLCJleHAiOjE2MzMzNzUyODl9.FBYgDrpG9RXJSfgme-430UyFLvdNTNliYTKGiWajksQ
JWT is valid
{ iss: "deno-demo", exp: 1633375289 }

If you use an incorrect signature (uncomment the code snippet with the wrong secret for testing):

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImZvbyI6ImJhciJ9.eyJpc3MiOiJkZW5vLWRlbW8iLCJleHAiOjE2MzMzNzU0MDd9.F3szgyrTJSQG3m1a82OJkKqKIDD32Q21ZchAVAj74bk
The jwt's signature does not match the verification signature.

An interesting distinction in Deno compared to node.js is the utilization of predefined interfaces like Header and Payload instead of plain JSON, ensuring data integrity.

Trying to set

const algorithm = "XS256"   // instead of "HS256"

would trigger a failure due to algorithm mismatch:

error: Type '"XS256"' is not assignable to type 'Algorithm'.
...
Argument of type '"XS256"' is not assignable to parameter of type 'AlgorithmInput'.
...

This sample code showcases the capabilities of djwt version 2.4, supporting various signature algorithms like HSxxx, RSxxx, PSxxx, and ESxxx. Future additions may include more algorithms compatible with Deno's cryptographic modules.

Refer to this answer for details on verifying an RS256-signed token in Deno.

Note: This revision covers the changes in the djwt library API introduced in version 2.4. The original post was based on djwt v1.9. View the previous version here.

Authenticating with JWT in Deno

Answer №1

Similar questions

The ng-model used within an *ngFor loop is not displaying the correct value

The correlation between the node.js version and the @types/node version

Adonisjs latest version (v5) model creation command malfunctioning

React with TypeScript presents an unusual "Unexpected token parsing error"

What in the world is going on with this Typescript Mapped type without a right-hand side?

Tips for integrating TypeScript with Vue.js and Single File Components

Issue with Angular 18 component not being displayed or identified

Creating a nested observable in Angular2: A step-by-step guide

Select characteristics with designated attribute types

Guide to accessing a newly opened window from a different domain originating from the current window

"Encountering Issues with Angular's Modules and EntryComponents during Lazy Loading

Executing methods sequentially in the ngOnInit lifecycle hook consecutively

Transform two sets of string arrays into nested objects

forEach was unable to determine the appropriate data types

What is the best way to destructure a blend of React props and my own custom props in my code?

Angular is throwing an error stating that the argument type 'typeof MsalService' cannot be assigned to the parameter type 'MsalService'

How to Create a Flexible Angular Array Input Component

Ditch the if-else ladder approach and instead, opt for implementing a strategic design

React refs should always be validated for null or never values to avoid any potential issues

Reorganizing Firebase data in Ionic 2