How to decode JWE token in Angular

Question

I have this problem, I created a JWE in .net core using EncryptingCredentials by this way:

var key = Encoding.ASCII.GetBytes(Configuration["Core:JwtSecret"]);
var encryptionkey = Encoding.ASCII.GetBytes(Configuration["Core:JwtEncrype"]);

var tokenDescriptor = new SecurityTokenDescriptor
{
    Subject = subject,
    Expires = DateTime.UtcNow.AddDays(Convert.ToInt32(Host.Config["Core:JwtDays"])),
    SigningCredentials =
        new SigningCredentials(new SymmetricSecurityKey(key), SecurityAlgorithms.HmacSha256Signature),
    EncryptingCredentials =
        new EncryptingCredentials(new SymmetricSecurityKey(encryptionkey), SecurityAlgorithms.Aes128KW, SecurityAlgorithms.Aes128CbcHmacSha256)
};
var token = tokenHandler.CreateToken(tokenDescriptor);
user.Token = tokenHandler.WriteToken(token);

How can I read token's data with angular?

Answer 1

You can implement a Web API endpoint that will accept your JWE token as an input parameter, decrypts and validates it and returns its payload (contents) as JSON. Then you can easily use JSON in your angular application. In this case you use your signing and encryption keys on the server-side where you keep them in secret.

Moreover, you may consider using JWT instead of JWE. You decode the token in a public client (angular app) in any case. That is similar to the user_info endpoint of OpenID Connect protocol. Encryption will be useful if you decrypt the token on the server-side (private client).

Using the signing and encryption keys in the angular application will expose them to the public.

Alternatively you can introduce another JWT token that is not encrypted and return it to your angular application instead of or in addition to your JWE token. It will be similar to the id_token from OpenID Connect protocol.