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: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'digest' of undefined

TypeError: Cannot read property 'digest' of undefined
    at N (auth0-spa-js.production.js:1)
    at ie.<anonymous> (auth0-spa-js.production.js:1)
    at Generator.next (<anonymous>)
    at auth0-spa-js.production.js:1
    at new ZoneAwarePromise (zone-evergreen.js:876)
    at t (auth0-spa-js.production.js:1)
    at ie.loginWithRedirect (auth0-spa-js.production.js:1)
    at AuthGuard.<anonymous> (auth.guard.ts:22)
    at Generator.next (<anonymous>)
    at fulfilled (environment.ts:11)
    at resolvePromise (zone-evergreen.js:797)
    at new ZoneAwarePromise (zone-evergreen.js:879)
    at t (auth0-spa-js.production.js:1)
    at ie.loginWithRedirect (auth0-spa-js.production.js:1)
    at AuthGuard.<anonymous> (auth.guard.ts:22)
    at Generator.next (<anonymous>)
    at fulfilled (environment.ts:11)
    at ZoneDelegate.invoke (zone-evergreen.js:359)
    at Object.onInvoke (core.js:34195)
    at ZoneDelegate.invoke (zone-evergreen.js:358)

I guess it must be something about the build process, some different flags, but I can't figure out exactly which.

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.