Auth0-spa-js: On Netlify: `window.crypto` is required to run `auth0-spa-js`

[chbert]

Sent here from the community: https://community.auth0.com/t/window-crypto-is-required-to-run-auth0-spa-js/46137

Describe the problem

I’m running a svelte app with auth0-spa-js (routing via routify).

Everything works perfectly locally, but on netlify I get the following errors:
{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"Error: For security reasons, window.cryptois required to runauth0-spa-js.","trace":["Runtime.UnhandledPromiseRejection: Error: For security reasons, window.cryptois required to runauth0-spa-js."," at process.<anonymous> (/var/runtime/index.js:35:15)"," at process.emit (events.js:310:20)"," at processPromiseRejections (internal/process/promises.js:209:33)"," at processTicksAndRejections (internal/process/task_queues.js:98:32)"]}

Environment

Please provide the following:

• Version of auth0-spa-js used: 1.10.0
• Which browsers have you tested in? Chrome 83.0.4103.116
• Which framework are you using, if applicable (Angular, React, etc): Svelte
• Other modules/plugins/libraries that might be involved: Routify, Apollo

[adamjmcgrath]

Hi @chbert

Are you seeing that error in your browser? If so, do you have a link to your running application with this issue?

[chbert]

Hi @adamjmcgrath
Sure! https://angry-leavitt-68ccaf.netlify.app/

[adamjmcgrath]

Hi @chbert - this is happening on the server, I assume routify is doing some SSR.

When you instantiate the Auth0 client, we check window.crypto before proceeding because you can't use the client without window.crypto. Because SSR environments don't have window we don't perform this check when window doesn't exist https://github.com/auth0/auth0-spa-js/blob/master/src/Auth0Client.ts#L100. In SSR environments like Gatsby and Next.js, window is not present, so users can instantiate the client without performing this check.

It looks like they use jsdom in routify to simulate the browser environment, so window exists, but window.crypto doesn't. So when you instantiate the client the checkis being performed and throwing the error For security reasons, window.crypto is required to run auth0-spa-js..

So in your case, you need to check if you're in an SSR environment and then not create the client if you are.

It looks like in routify they use navigator.userAgent.includes('jsdom') https://github.com/sveltech/routify/blob/bc3d3e14609074a36684605c4e3783b40a4f4b9b/runtime/utils/index.js#L4 - so you can prevent the client from being instantiated, by doing something like:

if (!navigator.userAgent.includes('jsdom')) {
  const client = new Auth0Client({...});
}

[chbert]

@adamjmcgrath thanks will try this!

[adamjmcgrath]

np - feel free to reopen if you run into any issues