Using panva/jose in an Angular (v.12) app

[GStoynev]

I was trying something quick and needed to create a JWT from scratch in javascript, in an existing Angular app in the browser.

I was drawn to this library because it claims it doesn't have any dependencies. Initially

I did npm i jose. Later I tried with the browser runtime jose-browser-runtime but in both cases I got a "transpile time" error: Cannot find module 'crypto'

`Error: node_modules/jose-browser-runtime/dist/types/types.d.ts:2:32 - error TS2307: Cannot find 
module 'crypto' or its corresponding type declarations.

2 import type { KeyObject } from 'crypto'`

Do I need to install or update any typings (we're currently using "@types/node": "^14.17.5"? Where is the crypto imported from?

[panva]

In tsconfig.app.json under the compilerOptions, add just add "node" to types, e.g. like so

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["node"]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

[GStoynev]

That worked - thanks!

I now get another jose import error, which I assume is caused by importing SignJWT from the wrong place or, again, missing configuration of the angular/ts compile system. (I did find this issue where you're talking about lack of support for the way you bundle this package: #143 - curious if it's related to the IDE not able to suggest the correct import?)

./src/app/my-component.ts:39:0-80 - Error: Module not found: Error: Can't resolve 'node_modules/jose-browser-runtime/dist/types/jwt/sign' in 'C:\src\....'

On my current setup (VSCode on Windows; jose is NOT installed, just the jose-browser-runtime), I was not getting any useful suggestion by the IDE where to import SignJWT from, so I manually imported from the location where the error is. This is my code:

        const privateKey = this.getBytes("my shared secret");
        const jwtHeader = {
            typ: "JWT",
            alg: "RS256",
        };
        var jwtPayload = {
            email: "[email protected]",
            externalCustomerId: 11909,
            firstName: "FName",
            lastName: "LName",
            returnTo: "https://mySite.com/route",
        };
        const jwts2 = await new SignJWT(jwtPayload)
            .setProtectedHeader(jwtHeader)
            .setIssuedAt()
            .setExpirationTime("24h")
            .sign(privateKey);

getBytes is:

getBytes(str: string): Uint8Array {
        let intArray = str.split("").map(function (c) {
            return c.charCodeAt(0);
        });
        let byteArray = new Uint8Array(intArray.length);
        for (let i = 0; i < intArray.length; i++) byteArray[i] = intArray[i];
        return byteArray;
    }

Two questions:

• Do I need to install jose alongside jose-browser-runtime (import suggestions worked when I had jose installed... before I noticed in your doc that there is jose-browser-runtime)
• If I don't have jose installed but just the browser runtime, which SignJWT do I import?

[panva]

#143 i don't find relevant. There's nothing special you need. In fact all i did was follow the hello world for angular 12, installed jose, updated the tsconfig.app.json file and everything worked just fine as per the documentation for the module. I was able to ng serve and see my module loaded and working.

I was not getting any useful suggestion by the IDE where to import SignJWT from

Are you relying on an IDE to tell you where to import modules from? Please follow the docs. They're pretty clear and every module has an example of how to import. The only caveat is to replace jose with jose-browser-runtime if that's the only npm module you have installed.

Do I need to install jose alongside jose-browser-runtime (import suggestions worked when I had jose installed... before I noticed in your doc that there is jose-browser-runtime)

No you don't need to install both, you just need one or the other. jose if you want the universal runtime module, jose-browser-runtime if all you want is the browser runtime.

If I don't have jose installed but just the browser runtime, which SignJWT do I import?

I don't get the question. It's {pkgName}/jwt/sign as per the docs. So either

• jose/jwt/sign if jose is installed
• jose-browser-runtime/jwt/sign if jose-browser-runtime is installed

both worked

[GStoynev]

Thank you - this is the import that worked: jose-browser-runtime/jwt/sign

I am having troubles generating the KeyLike parameter for the sign(). II convert my shared secret (plain string) using _getBytes _ shown above. I have tried numerous ways to obtain the KeyLike parameter for the sign() method, and I do get a token generated and signed, but when I try to verify it, signature is failing. I suspect that I don't have the correct KeyLike structure passed to sign(). In the latest incarnation, this is what I have:

        const privateKeyString = "my 32-character shared secret";
        var privateKeyOctetSequence = [];
        for (var i = 0, length = privateKeyString.length; i < length; i++) {
            var code = privateKeyString.charCodeAt(i);
            // Since charCodeAt returns between 0~65536, simply save every character as 2-bytes
            //privateKeyOctetSequence.push(code & 0xff00, code & 0xff);
            privateKeyOctetSequence.push(code);
        }
        const x = await parseJwk({
            alg: "HS256",
            kty: "oct",
            k: privateKeyOctetSequence.join(""),
            //k: privateKeyString,
        });
        const jwts2 = await new SignJWT(jwtPayload).setProtectedHeader(jwtHeader).sign(x);

Since this is a throw-away POC I am not that eager to get it to work, but if easy to explain, could you please point me to how to generate the correct KeyLike that sign() expects, considering I have a plain string shared secret and HS256 alg. Thank you

[panva]

I'm not in a position debug here. If you have plain secrets use TextEncoder & TextDecoder. And better yet. Don't use symmetric HS algorithms altogether. Generate a keypair you'd store in IndexedDB so that the private key remains 100% non-extractable

[panva]

I'm done waiting for these ecosystems to catch up. jose v4.x will be coming out today/tomorrow with only top level named exports that solve all these tools' problems.