TypeError, 'digest' of undefined, in development environment

Question

When we\'re building our Angular SPA for localhost it works perfectly.

On our dev environment, this error creeps into the DevTool console and breaks everything: ERRO

Answer 1

It's probably because your dev server is setup as an insecure origin.

The digest likely refers to window.crypto.subtle.digest of the Web Crypto API. if you are using a Chromium-based browser, according to the the Chromium Projects page here, the subtle property can only be used in a secure origin:

Access to the WebCrypto API is restricted to secure origins (which is to say https:// pages).

Note: In the spec, crypto.subtle is supposed to be undefined in insecure contexts

Because digest is a method of subtle, and subtle is undefined, you are getting this error.

We got the same error when using the auth0-spa-js library. It worked on localhost, not on our http staging site, but OK on our production https site.

If you aren't in a secure origin, try making your dev environment secure and then testing again (a self-signed certificate should do). As a reminder, secure origins are:

Which origins are "secure"?

Secure origins are those that match at least one of the following (scheme, host, port) patterns:

• (https, *, *)
• (wss, *, *)
• (*, localhost, *)
• (*, 127/8, *)
• (*, ::1/128, *)
• (file, *, —)
• (chrome-extension, *, —)

That is, secure origins are those that load resources either from the local machine (necessarily trusted) or over the network from a cryptographically-authenticated server.

I'm not sure if the Auth0 team have an SPA library that works in a non-secure origin (or plans to enable that capability in their latest SPA library), but their native JS libraries definitely do.

Answer 2

This seems more related to Angular than Auth0 but out of curiosity have you defined digest in your component?

If not, you can do that as: digest: {}; at the component level.

I hope this helps you on your quest!